- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
这一章把直线连接改为折线连接,沿用原来连接点的关系信息。关于折线的计算,使用的是开源的 AStar 算法进行路径规划,启发方式为 曼哈顿距离,且不允许对角线移动.
请大家动动小手,给我一个免费的 Star 吧~ 。
大家如果发现了 Bug,欢迎来提 Issue 哟~ 。
github源码 。
gitee源码 。
示例地址 。
灵感来源主要来自于下面优秀的文章:
关联线探究,如何连接流程图的两个节点 。
主要参考了:如何挑选连接点及其真正的出入口、算法的选型。具体代码没有仔细了解,毕竟布局和元素的想法不一样,没必要参考代码.
路径规划之 A* 算法 。
主要了解一下算法的介绍.
欧式距离、曼哈顿距离、切比雪夫距离、Octile距离 。
主要了解一下 AStar 算法的各种启发方式的差异.
路径规划可视化动画 。
形象的感受路径搜索的差异.
至于算法本身,在目前阶段下不是必须深入分析,这里应用为主.
参考这张图,基于当前案例,可以把折线想象为路径,目标就是查找最优路径,例如:
又或者:
上面明显不是我们直觉最优的路径选择,如:
更希望是这样:
开启调试模式,来说说连接点的出入口:
人为地,距离”连接点“偏离一些,定义所谓的”出入口“(途中绿色的点),作为折线真的起点和终点.
把连线先移除,看看其他点:
一共定义了 3 种点:
关于途径点,是人为挑选的,主要(中心点除外)来自于图中不同颜色区域(线框),这里定义了 ?种区域:
为什么叫节点区域呢?因为此前设计的连接点是动态的,它可以节点内部的其他位置,只是目前定义的都是上下左右边缘而已。所以,它可能比节点区域更小.
两个区域共同所在的最小区域 。
同理,两个区域共同所在的最小区域 。
上面说了那么多点和区域,最终目的就是为了建模,可供算法使用。 这个模型,就是一个数组矩阵 matrix,可以理解成一个格子地图,如:
0 代表可通过,1 代表不可通过(称之为“墙”吧),对应的数组矩阵,就是 。
[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]
计算结果是一个途径格子坐标数组:
坐标就是数组1、2层下标,可以视作 x、y 轴.
[
[5, 3],
[6, 3],
[7, 3],
[8, 3],
[8, 4],
[8, 5]
]
主要问题来了,毕竟在这里的画板,不同于算法示例那样“走格子”,800x800 的画布大小,不可能建一个 800x800 数组矩阵,性能可吃不消,别说更大的画布了.
所以,如何建模才是这个案例画折线的关键! 。
这里,那一个大一点的例子说明:
既然,拿“像素”当作格子不现实,可以拿“点”作为格子不就好了吗?
数组矩阵变成:
[
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0]
]
这里缺少了“墙”,哪些是墙?其实就是上面说的不可通过区域:
“墙”不同于连接点,需要补充一些点:
数组矩阵变成(增加了 2 列、2 行):
[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]
然后给数组矩阵设置“墙”:
这里把 2 定义为墙,所以 0、1 均能通过,方便后面区分和理解.
[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0],
[0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0],
[0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0],
[0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0],
[0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0],
[0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0],
[0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]
连接点、连接线的出入口不应该是“墙”,调整一下:
设置为 1,方便区分 。
起点:[2, 3] 终点:[8, 5] 。
现在交给算法,计算结果得出:
就是:
画成线:
主要思路就是如此,虽然不是完美的,请看:
原因主要是算法并不知道拐弯的“代价”,暂且如此吧。 思路的介绍到此为止,下一章再说说代码大概是如何实现的.
More Stars please!勾勾手指~ 。
源码 。
gitee源码 。
示例地址 。
最后此篇关于前端使用Konva实现可视化设计器(13)-折线-最优路径应用【思路篇】的文章就讲到这里了,如果你想了解更多关于前端使用Konva实现可视化设计器(13)-折线-最优路径应用【思路篇】的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我正在尝试在r中编写代码,以便找到单变量正态分布的最大似然(而不是对数似然)值。我知道还有其他方法,但是我需要深入了解数值优化才能进行进一步的工作。当我调用'optim'函数时,它似乎根本不会进行迭代
最近我一直在用 php + mysql 做一个相当大的项目。现在我担心我的 mysql。我应该怎么做才能使我的 mysql 尽可能优化?把你知道的都说出来,我将非常感激。 第二个问题,我在每次加载页面
我不太了解 InitializeCriticalSectionAndSpinCount 的文档: http://msdn.microsoft.com/en-us/library/windows/des
我们公司有几种不同的获取潜在客户的方式,以及我们处理的几种类型的潜在客户。每种类型的潜在客户之间只有微小的差异,并且大部分信息与一种或多种其他潜在客户类型共享或相关。我和我的团队正在尝试使用 Solr
ϵ-贪婪策略 我知道 Q-learning 算法应该尝试在探索和利用之间取得平衡。由于我是该领域的初学者,因此我想实现一个简单版本的探索/利用行为。最佳 epsilon 值 我的实现使用 ϵ 贪婪策略
我是一名优秀的程序员,十分优秀!