vue canvas 区域绘制有绘制多边形,包括拖拽、重置、撤销、判断线段重合、判断点是否在多边形内

 先上效果图

(gif 图, 应该是可以看到的吧)

忘记解释了,

现在绘制的下面之所以是白色的,是因为录gif的时候 我监控没打开,所以监控没显示出来,用图片也是可以的

vue canvas 区域绘制有绘制多边形,包括拖拽、重置、撤销、判断线段重合、判断点是否在多边形内_第1张图片

 层级是这样的,

然后我就直接上代码了,我写了大量的注释,要是看不懂的,我再解释

我是一个白菜,里面还是有部分搞不太懂,建议可以看一下参考文献第一个链接,问问大佬,


这个是DialogAreaDash.vue的





对了,解释一下,我这个里面多排序的部分,是因为划线你肯定要有顺序,因为我从接口拿到的顺序是打乱的,所以我按照升序 整理了一下。


index的






参考文献:

Vue3 区域绘制,有撤销、重置和判断线段重合功能_瞎跑的uice的博客-CSDN博客

js判断一个点是否在多边形内(重要)[整理] - 豆丁网

这篇文章,我是综合了文献里的各种方法,以及自己修改 添加一部分

感觉这篇文章不太好,侵权啥的,私信我,立刻删

你可能感兴趣的:(vue,javascript)