天道酬勤,学无止境

Loop logic for drawing line javascript

I have following two arrays:

var element_1 = new Array([x1,y1],[x2,y2],[x3,y3],[x4,y4]);
var element_2 = new Array([x1,y1],[x2,y2],[x3,y3],[x4,y4]);

Logic: I want to run a loop (nested) where each element of element_1 (for eg [x1,y1]) is compared to each element of element_2 and the shortest distance between them shall be calculated within the loop (I know how to calculate the shortest path). The tricky part here is that I need a reference that which pair made the shortest past and then obtain those [x1,y1] and [x2,y2] combinations to draw a line.

Sample data:

var element_1 = new Array([10,0],[20,10],[10,20],[0,10]);
var element_2 = new Array([10,30],[20,40],[10,50],[0,40]);

Line should be made between [10,20] and [10,30]. Also, I would somehow need to store the coordinates somewhere to pass it to the line drawing function

How can I do this? Any leads would be highly appreciated.

评论

Here is how I would do it:

var element_1 = [[0,0],[1,2],[5,3],[6,8]];
var element_2 = [[0,1],[1,4],[5,9],[9,8]];

var closest = {a: false, b: false, distance: false};

for(var i=0; i<element_1.length; i++) {
  for(var j=0; j<element_2.length; j++) {
    var distance = calculate_distance(element_1[i], element_2[j]);
    console.log('Distance between element_1['+i+'] and element_2['+j+']: ' + distance);
    if(closest.distance === false || distance < closest.distance) {
      closest = {a: element_1[i], b: element_2[j], distance: distance};
    }
  }
}

console.log('The shortest path is between '+closest.a+' and '+closest.b+', which is '+closest.distance);

function calculate_distance(a, b) {
  var width  = Math.abs( a[0] - b[0] ),
      height = Math.abs( a[1] - b[1] ),
      hypothenuse = Math.sqrt( width*width + height*height );
  return hypothenuse;
}

As Roko C. Buljan said, in your case you can just replace new Array() with []. Here's why.

Well i liked this question a lot. It inspired me to invent a generic Array method to apply a callback with each other items of two arrays. So i called it Array.prototype.withEachOther(). What it does is exactly what @blex has done in his solution with nested for loops. It applies an operation (provided by the callback) to each array item with the other array's item. Let's see how it works.

Array.prototype.withEachOther = function(a,cb,s=0){
  return this.reduce((p,et) => a.reduce((q,ea) => cb(et,ea,q),p),s);
};
var element_1 = [[10,0],[20,10],[10,20],[0,10]],
    element_2 = [[10,30],[20,40],[10,50],[0,40]],
           cb = (p1,p2,q) => {var h = Math.hypot(p1[0]-p2[0],p1[1]-p2[1]);
                              return h < q.d ? {d:h,p1:p1,p2:p2} : q},
      minDist = element_1.withEachOther(element_2,cb,{d:Number.MAX_SAFE_INTEGER,p1:[],p2:[]});
console.log(minDist);

So let's explain what's going on.

Array.prototype.withEachOther = function(a,cb,s=0){
  return this.reduce((p,et) => a.reduce((q,ea) => cb(et,ea,q),p),s);
};

is a reusable function. It will execute the operation that is provided in a callback function, with each other element of the two arrays. It takes 3 arguments (a,cb,s=0).

  • a is the second array that we will apply our callback to each item for each item of the array that is invoking .withEachOther.
  • cb is the callback. Below I will explain the callback applied specific for this problem .
  • s=0 is the initial (with a default value of 0) value that we will start with. It can be anything depending on the callback function.

return this.reduce((p,et) => a.reduce((q,ea) => cb(et,ea,q),p),s);

this part is the core of the function. As you see it has two nested reduces. The outer reduce has an initial value designated by the s, which is provided as explained above. The initial value gets initially assigned to the p argument of the outer reduce's callback and the other argument et is assigned one by one with each of the items of invoking array. (element of this). In the outer reduce we invoke another reduce (the inner reduce). The inner reduce starts with the initial value of the result of previous loop which is the p of outer reduce and after each calculation returns the result to it's reduced value variable q. q is our memory and tested in the callback to see if we keep it as it is or replace it with the result of our calculation. After inner reduce finishes a complete round it will return the q to p and the same mechanism will run again until we finish with all items of the array that's invoking .withEachOther.

cb = (p1,p2,q) => {var h = Math.hypot(p1[0]-p2[0],p1[1]-p2[1]);
                   return h < q.d ? {d:h,p1:p1,p2:p2} : q}

The callback is special to this problem. It will receive two points (each with x and y coordinates) Will calculate the distance between them and will compare it with the previously made calculation. If it's smaller it will replace q by returning this new value; if not it will return q as it is.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 剪刀纸石头的算法(Algorithm for scissor paper stone)
    问题 我正在使用以下有效的方法,但想知道是否有更好的算法来执行测试。 有没有更好的方法来做到这一点? 在 C# 中执行此操作但将语法放在一边,相信算法将在 OOP 语言中相同。 谢谢你。 public String play(int userInput) { //ComputerIn is a randomly generated number between 1-3 ComputerIn = computerInput(); if (ComputerIn == userInput) return "Draw"; else if (ComputerIn == 1 && userInput == 2) return "Win"; else if (ComputerIn == 2 && userInput == 3) return "Win"; else if (ComputerIn == 3 && userInput == 1) return "Win"; else if (ComputerIn == 1 && userInput == 3) return "Lose"; else if (ComputerIn == 2 && userInput == 1) return "Lose"; else return "Lose"; } 回答1 if ((ComputerIn) % 3 +
  • 为什么setTimeout(fn,0)有时有用?(Why is setTimeout(fn, 0) sometimes useful?)
    问题 我最近遇到了一个非常讨厌的错误,其中的代码是通过JavaScript动态加载<select> 。 动态加载的<select>具有预先选择的值。 在IE6中,我们已经有代码来修复选定的<option> ,因为有时<select>的selectedIndex值可能与选定的<option>的index属性不同步,如下所示: field.selectedIndex = element.index; 但是,此代码无法正常工作。 即使正确设置了字段的selectedIndex ,也将最终选择错误的索引。 但是,如果我在正确的时间插入了alert()语句,则将选择正确的选项。 考虑到这可能是某种时序问题,我尝试了一些以前在代码中看到的随机现象: var wrapFn = (function() { var myField = field; var myElement = element; return function() { myField.selectedIndex = myElement.index; } })(); setTimeout(wrapFn, 0); 这有效! 我已经为我的问题找到了解决方案,但是我不知道自己到底为什么能解决我的问题,对此我感到不安。 有人有官方解释吗? 通过使用setTimeout()调用函数“稍后”可以避免出现什么浏览器问题? 回答1 在问题中
  • Optimizing html5 canvas game
    Right now I've got two game loops in a game I'm making. A draw loop that loops through an array of objects on screen and a logic loop that does game logic. I have the logic loop running about 10 more frames than the draw loop. I have this set up like this because doing game logic may take longer and I don't want it to interfere with the draw loop. I have the logic loop set up like this: vs.logicloop = function(){ vs.Gameloop(); //do the updating of object scripts if(vs.windowActive){ var l = vs.scenegraph.length; var i = 0; while(i < l){ vs.scenegraph[i].logicScript(); i++; } } //restart loop
  • 非法使用break语句; javascript(illegal use of break statement; javascript)
    问题 当此变量达到一定数量时,我希望循环停止,但我不断收到错误消息“未捕获的语法错误:非法中断语句”。 function loop() { if (isPlaying) { jet1.draw(); drawAllEnemies(); requestAnimFrame(loop); if (game==1) { break; } } } 回答1 break是跳出for,while,switch等你这里没有的循环,你需要用return来中断当前函数的执行流程,返回给调用者。 function loop() { if (isPlaying) { jet1.draw(); drawAllEnemies(); requestAnimFrame(loop); if (game == 1) { return } } } 注意:这不包括 if 条件背后的逻辑或何时从方法返回,为此我们需要更多关于drawAllEnemies和requestAnimFrame方法以及game值如何更新的上下文 回答2 您需要确保 requestAnimFrame 在 game == 1 后停止被调用。break 语句仅退出传统循环(例如while() )。 function loop() { if (isPlaying) { jet1.draw(); drawAllEnemies(); if (game != 1)
  • AppStore / iOS 应用程序和解释代码 - 他们在哪里划线?(AppStore / iOS apps and interpreted code - where do they draw the line?)
    问题 Apple 的 iOS 开发者指南指出: 3.3.2 — 应用程序本身不得以任何方式安装或启动其他可执行代码,包括但不限于通过使用插件架构、调用其他框架、其他 API 或其他方式。 除了由 Apple 的文档化 API 和内置解释器解释和运行的代码外,不得在应用程序中下载或使用任何解释代码。 假设允许在运行时下载数据(例如 XML 和图像或游戏级别描述)(如我的印象?),我想知道他们在哪里划清“数据”和“代码”之间的界限。 想象一下向用户提供交互式“演示”(例如调查)的应用程序的场景。 演示文稿不断添加到服务器,不同的演示文稿可供不同的用户使用,因此它们不能成为初始应用程序下载的一部分(这将是重点)。 它们以 XML 格式描述,但由于是交互式的,它们可能包含此类条件分支(以伪形式显示以举例说明): <options id="Gender"> <option value="1">Male</option> <option value="2">Female</option> </options> <branches id="Gender"> <branch value="1"> <image src="Man" /> </branch> <branch value="2"> <image src="Woman" /> </branch> </branches> 当这个 XML
  • javaScript基础 (运算符 逻辑控制语句 循环控制语句)
    运算符 算术运算符 概念 算术运算使用的符号,用于执行两个变量或值的算术运算。 浮点数的精度问题 浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数。 var result = 0.1 + 0.2; // 结果不是 0.3,而是:0.30000000000000004 console.log(0.07 * 100); // 结果不是 7, 而是:7.000000000000001 所以:不要直接判断两个浮点数是否相等 ! 表达式和返回值 表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合,简单理解:是由数字、运算符、变量等组成的式子 表达式最终都会有一个结果,返回给我们,我们称为返回值 递增和递减运算符 如果需要反复给数字变量添加或减去1,可以使用**递增(++)和递减( – )**运算符来完成。 在 JavaScript 中,递增(++)和递减( – )既可以放在变量前面,也可以放在变量后面。 放在变量前面时,我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。 注意:递增和递减运算符必须和变量配合使用。 递增运算符 1.前置递增运算符 ++num 前置递增,就是自加1,类似于 num = num + 1,但是 ++num 写起来更简单。 使用口诀:先自加,后返回值 var num = 10
  • 从python开始学编程pdf-Python真好玩:教孩子学编程 PDF 完整原版
    前言 第1章 结交一个新朋友,它的名字叫Python 1.1 请叫我Python大人 1 1.2 邀请Python来我的电脑做客 2 1.3 用Python指挥你的电脑 16 1.4 Python的第一个程序 18 1.5 回忆我们的朋友Python 20 1.6 首次小挑战 20 第2章 召唤画图的小海龟 2.1 认识会作图的小海龟 21 2.2 小海龟的作图绝学 28 2.2.1 小海龟画线段 28 2.2.2 小海龟画正方形 30 2.2.3 小海龟画长方形 34 2.2.4 小海龟画小星星 35 2.2.5 添加背景色 36 2.2.6 给小星星上色 38 2.3 别忘了小海龟 40 2.4 小海龟作图的考验 40 第3章 这是什么?变量 3.1 神奇的变量 41 3.2 数字的奥秘 47 3.2.1 数字运算符 47 3.2.2 运算顺序 48 3.2.3 给数字取一个洋气的英文名 49 3.3 字符串是什么东西 50 3.4 变量的可变性 55 3.5 变量取名字很讲究 56 3.6 变量学习小结 58 3.7 趣味小挑战 58 第4章 是或不是的道道 4.1 什么叫条件判断 59 4.1.1 猜数字 60 4.1.2 坐火车 60 4.2 看if来断案 62 4.3 真假总该做点事 69 4.4 if不做的,else来做 72 4.5 它们还有一个兄弟elif 73
  • 散景如何在通过multi_line方法创建的图形上添加图例?(Bokeh how to add legend to figure created by multi_line method?)
    问题 我正在尝试向图添加图例,其中包含由multi_line方法创建的两行。 例子: p = figure(plot_width=300, plot_height=300) p.multi_line(xs=[[4, 2, 5], [1, 3, 4]], ys=[[6, 5, 2], [6, 5, 7]], color=['blue','yellow'], legend="first") 在这种情况下,图例仅适用于第一行。 将图例定义为列表时,将出现错误: p.multi_line(xs=[[4, 2, 5], [1, 3, 4]], ys=[[6, 5, 2], [6, 5, 7]], color=['blue','yellow'], legend=["first","second"]) 是否可以在许多行中添加图例? 回答1 维护者说明:PR#8218(将为Bokeh 1.0合并)允许直接为多行和多个补丁创建图例,而无需任何循环或使用单独的line调用。 multi_line用于概念上单一的事物,碰巧具有多个子组件。 想想德克萨斯州,这是合乎逻辑的事情,但是它有几个不同的(且不相交)多边形。 您可以使用Patches绘制“ Texas”的所有多边形,但总体上只需要一个图例。 图例标记逻辑事物。 如果要将几行标记为逻辑上不同的事物,则必须使用p.line(..., legend
  • Trying to create x number of random rectangles by iterating through loop - but no overlapping
    This one has be me stumped. This is more of a Math/logic issue then a specific JS issue, but it's JS that I am working in and and some point I will need to convert the resulting logic to code.... I am trying to create X number of Non-overlapping rectangles and/or squares of random sizes on the canvas to achieve something like this example image: (the number of boxes I would want to create could range anywhere from 10 to 100, give or take. Obviously the more boxes needed, the smaller they would all have to be) I have a JS Fiddle where I have been trying different ideas, but the logic of this
  • 绘制4连接线的算法(Algorithm for drawing a 4-connected line)
    问题 我正在寻找一种算法(用Java编码会很好,但是任何足以将其转换为Java的东西都可以)绘制4条连接线。 似乎Bresenham的算法是使用最广泛的算法,但是我发现的所有可以理解的实现都是8位连接的。 OpenCV的cvline函数显然具有4连接版本,但是对我来说,作为一个不起眼的,几乎是C素的程序员,源代码是不可渗透的。 其他各种搜索都没有发现任何结果。 感谢您提供任何帮助。 回答1 以下是类似于Bresenham的算法,该算法绘制了4条连接的线。 该代码是使用Python编写的,但是我想即使您不懂该语言,也可以很容易地理解它。 def line(x0, y0, x1, y1, color): dx = abs(x1 - x0) # distance to travel in X dy = abs(y1 - y0) # distance to travel in Y if x0 < x1: ix = 1 # x will increase at each step else: ix = -1 # x will decrease at each step if y0 < y1: iy = 1 # y will increase at each step else: iy = -1 # y will decrease at each step e = 0 # Current
  • 在 Javascript/jQuery/etc 中测量经过的时间/一段时间后触发事件的方法(Ways in Javascript/jQuery/etc to measure time elapsed / trigger events after periods of time)
    问题 我正在尝试使用 HTML5 (Javascript) 制作一个简单的游戏。 我想对事件施加时间限制。 例如,当玩家进入一个屋顶正在关闭的房间时,我想给他们一些时间来做出决定,然后自动发生其他事件。 但是,如果他们做出决定,我根本不想触发定时功能。 我怎样才能完成这样的事情? 回答1 为此,我喜欢使用自定义 Timer 类 var Timer = function(callback, delay, autoRun){ this.running = (autoRun == undefined)?true:autoRun; this.completed = false; this.delay = delay; this.callback = callback; }; Timer.prototype.pause = function() { this.running = false; return this; }; Timer.prototype.resume = function() { this.running = true; return this; }; Timer.prototype.finish = function(){ this.running = false; this.completed = true; this.callback(); return this;
  • 5岁儿童自学python编程-Python真好玩:教孩子学编程 PDF 完整原版
    前言 第1章 结交一个新朋友,它的名字叫Python 1.1 请叫我Python大人 1 1.2 邀请Python来我的电脑做客 2 1.3 用Python指挥你的电脑 16 1.4 Python的第一个程序 18 1.5 回忆我们的朋友Python 20 1.6 首次小挑战 20 第2章 召唤画图的小海龟 2.1 认识会作图的小海龟 21 2.2 小海龟的作图绝学 28 2.2.1 小海龟画线段 28 2.2.2 小海龟画正方形 30 2.2.3 小海龟画长方形 34 2.2.4 小海龟画小星星 35 2.2.5 添加背景色 36 2.2.6 给小星星上色 38 2.3 别忘了小海龟 40 2.4 小海龟作图的考验 40 第3章 这是什么?变量 3.1 神奇的变量 41 3.2 数字的奥秘 47 3.2.1 数字运算符 47 3.2.2 运算顺序 48 3.2.3 给数字取一个洋气的英文名 49 3.3 字符串是什么东西 50 3.4 变量的可变性 55 3.5 变量取名字很讲究 56 3.6 变量学习小结 58 3.7 趣味小挑战 58 第4章 是或不是的道道 4.1 什么叫条件判断 59 4.1.1 猜数字 60 4.1.2 坐火车 60 4.2 看if来断案 62 4.3 真假总该做点事 69 4.4 if不做的,else来做 72 4.5 它们还有一个兄弟elif 73
  • python程序设计基础董付国 pdf-Python程序设计基础与应用
    图书简介 配套资源:部分全彩印刷、电子课件、教学大纲、习题答案、源代码 本书特色: ★知名Python教育者董付国老师新作。 ★言简意赅,案例丰富,配套资源超全部分内容全彩呈现。 ★本书全部代码适用于Python 3.5、Python 3.6以及更高版本。 申请样书,配套资源均可在本页面申请下载,也可联系微信15910938545直接索取 《Python程序设计基础与应用》是一本系统介绍Python程序开发与应用的教程。本书共15章,主要包括Python编程基础(1~11章)和Python开发应用(12~15章)两部分内容,编程基础部分通过众多案例对Python程序设计的概念加以解释,开发应用部分介绍了tkinter编程、网络爬虫、数据分析和数据可视化4个方面的Python核心应用。本书全部代码适用于Python 3.5、Python 3.6以及更高版本。 本书可以作为非计算机专业研究生、本科、专科程序设计课程教材,也可作为计算机专业本、专科程序设计基础课程教材,以及Python爱好者自学用书。 《Python程序设计基础与应用》配有教学资源(包括PPT、源码、大纲、教案、习题答案),需要的教师可登录www.cmpedu.com免费注册,审核通过后下载。 章节目录 目 录 前言 第1章 Python概述1 1.1 Python语言简介1 1.2 Python版本简介2 1.3
  • 【详细+超基础】Java-学习笔记 00
    计算机基础 冯诺依曼结构 数学家 冯·诺依曼 提出了计算机制造的三个基本原则,即采用二进制逻辑、程序存储执行以及计算机由五个部分组成(运算器、控制器、存储器、输入设备、输出设备),这套理论被称为冯·诺依曼体系结构。 附:三分钟带你了解冯.诺依曼结构 Typora及Markdown语法 Markdown常用语法 代码块生成 // 对于代码块,使用“```+编程语言”即可生成书写对应代码块的区域 // JS代码块 ```javascript // Java代码块 ```java …… 标题 // 采用“#+空格+标题的形式定义6个标题” # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 快捷键:Ctrl + 1/2/3/4/5/6 加粗 **明天也要加油鸭** 明天也要加油鸭 快捷键:选中文本 Ctrl + B 代码高亮显示 `高亮显示的代码(一般高亮显示代码)` 高亮显示的代码(一般高亮显示代码) 快键键:选中文本Ctrl + Shift + ~ 删除线 ~~被删除的文本~~ 被删除的文本 快键键:选中文本Shift + Alt + 5 下划线 <u>该文本拥有下划线</u> 该文本拥有下划线 快捷键:选中文本Ctrl + U 斜体 *斜体文本* 斜体文本 快捷键:选中文本Ctrl + I 引用 // 有几个“>
  • 为什么setTimeout(fn,0)有时有用?(Why is setTimeout(fn, 0) sometimes useful?)
    问题 我最近遇到了一个非常讨厌的错误,其中的代码是通过JavaScript动态加载<select> 。 动态加载的<select>具有预先选择的值。 在IE6中,我们已经有代码来修复选定的<option> ,因为有时<select>的selectedIndex值可能与选定的<option>的index属性不同步,如下所示: field.selectedIndex = element.index; 但是,此代码无法正常工作。 即使正确设置了字段的selectedIndex ,也将最终选择错误的索引。 但是,如果我在正确的时间插入了alert()语句,则将选择正确的选项。 考虑到这可能是某种时序问题,我尝试了一些以前在代码中看到的随机现象: var wrapFn = (function() { var myField = field; var myElement = element; return function() { myField.selectedIndex = myElement.index; } })(); setTimeout(wrapFn, 0); 这有效! 我已经为我的问题找到了解决方案,但是我不知道自己到底为什么能解决我的问题,对此我感到不安。 有人有官方解释吗? 通过使用setTimeout()调用函数“稍后”可以避免出现什么浏览器问题? 回答1 在问题中
  • 详细的JavaScript基础语法-上-简单数据类型、运算符、流程控制、循环、数组、
    JS简介 JS与标记语言的区别 js是有逻辑性的、是有指令的、是主动的。 标记语言(html)不需要向计算机发出指令、标记语言的存在是用来被读取的, 是被动的。 浏览器的执行 渲染引擎:用于解析html与css ja引擎:又称js解释器、用于读取网页中的JS代码 注:浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以 JavaScript 语言归为脚本语言,会逐行解释执行。 JS的组成: ECMAScript、dom、bom JS的输出语句 alert(‘msg’) 弹出框 console.log() 控制台打印 prompt(‘msg’) 弹出输入框 js的变量 变量就是内存中用于存放数据的空间、 变量的使用: 声明与赋值 age为声明、18为赋值 var age = 18; 变量的规范 规则: 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,如:usrAge, num01, _name严格区分大小写。var app; 和 var App; 是两个变量不能 以数字开头。 18age 是错误的不能 是关键字、保留字。例如:var、for、while变量名必须有意义。 MMD BBD nl → age遵守驼峰命名法
  • 如何在画布上为绘图线设置动画(how to animate drawing lines on canvas)
    问题 我创建了一些在画布上相互连接的线。 现在,我想在画布上绘画时为这些线条设置动画。 谁能帮忙吗? 这是我的代码和小提琴URL: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0,0,0); ctx.lineTo(300,100); ctx.stroke(); ctx.moveTo(0,0,0,0); ctx.lineTo(10,100); ctx.stroke(); ctx.moveTo(10,100,0,0); ctx.lineTo(80,200); ctx.stroke(); ctx.moveTo(80,200,0,0); ctx.lineTo(300,100); ctx.stroke(); http://jsfiddle.net/s4gWK/1/ 回答1 我知道您希望使用动画使线沿路径中的点逐渐延伸。 演示:http://jsfiddle.net/m1erickson/7faRQ/ 您可以使用此函数来计算路径上的航路点: // define the path to plot var vertices=[]; vertices.push({x:0,y:0}); vertices.push({x:300,y:100}); vertices.push({x
  • 无法让更新面板正常工作(Unable to get Update panel working right)
    问题 我正在使用谷歌地图 apiv3 的网站上工作。 我在更新面板中有一个按钮,通过它我使用 button_click 后面的代码和一个 javascript 函数执行一些逻辑。 由于该按钮位于更新面板中,因此我无法在 firebug 的监视窗口中看到任何内容,而且我在 javascript 函数中的断点也不起作用。 如果没有更新面板,我可以在 watch 中看到执行流程,一切正常,但我在地图上重新加载。 aspx中的代码: <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Button ID="Button1" runat="server" style="z-index: 1; left: 573px; top: 146px; position: absolute" Text="Show route" onclick="Button1_Click1"/> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID=
  • 使用JavaScript删除Google地图路径中的直线(Remove straight line in google map path using javascript)
    问题 装备是在google map上使用多个航路点在起点和终点之间绘制路径。 路径不错,但问题是坐标之间有几条直线。 如何删除坐标之间的多余直线? 我的代码如下 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var markers = [ { "title": 'A', "lat": '26.3489', "lng": ' 92.6845', "description": 'A' } , { "title": 'B', "lat": '26.3546', "lng": '92.6902', "description": 'B' } , { "title": 'D', "lat": '26.3508', "lng": '92.7102', "description": 'D' } , { "title": 'E', "lat": '26.4285', "lng": '92.8497', "description": 'E' } , { "title": 'E', "lat": '26.5486', "lng": '92.9008', "description": 'E'
  • 时序逻辑电路的设计与分析
    目录 1.时序逻辑电路的基本结构与分类 1.1时序电路的基本结构 1.2异步与同步时序电路 1.3米利型和穆尔型时序电路 2.时序逻辑电路功能的表达 2.1逻辑方程组 2.2转换表 2.3状态表 2.4状态图 2.5时序图 3.同步时序电路的分析 3.1分析同步时序逻辑电路的一般步骤 3.2同步时序逻辑电路分析实例 3.2.1穆尔型电路示例 3.2.2米利型电路示例 4.同步时序逻辑电路的设计 4.1设计同步时序逻辑电路的一般步骤 4.1.1由给定的逻辑功能建立原始状态图和原始状态表 4.1.2状态化简 4.1.3状态分配 4.1.4选择触发器类型 4.1.5确定激励方程组和输出方程组 4.1.6画出逻辑图,并检查自校正能力 4.2同步时序逻辑电路设计实例 4.2.1用触发器设计一个同步递增8421计数器 不能自校正电路的修改方法 4.2.2用触发器设计一个给定原始状态图的逻辑功能的同步时序电路 4.2.3用触发器设计一个简易的自动售货机 1.时序逻辑电路的基本结构与分类 1.1时序电路的基本结构 时序电路的基本结构如下图所示,它由完成逻辑运算的组合电路和起记忆作用的存储电路两部分构成,其中,存储电路由触发器或锁存器组成。为了方便,图中各组逻辑变量均已向量形式表示,其中,为输入信号,为输出信号,为驱动存储电路转换为下一状态的激励信号,而为存储电路状态,称为状态信号,亦称为状态变量