vue-使用canvas画布实现平面图点位标注功能

前言

• 最近需要一个在平面图标注点位功能，去搜了一圈，发现......,最后在查阅文档一顿操作之后。

• 不停修改bug之后，做出一版可以基本使用的版本。

• 最后发现canvas标签可以完成很多功能，电子签名，点位标注，问题标注，画图功能等等

效果

canvas画布

功能难点

画布渲染问题-基于canvas提供的渲染方法封装渲染方法，x，y坐标，width，height高，url图片

移动距离问题-我们需要借助鼠标点击，移动，弹起来事件计算移动的距离，来更改x，y坐标

选中图标问题-当我们画布上有多个图标时通过x，y，加上width，height和点击时x，y坐标判断是那个图标在被点击，在数组中找到匹配返回下标，反之就是点击背景图

画布渲染问题-生成画布之后，为了让用户无感操作，最好以帧方式刷新画布（定时器方式）

图标数据格式-画布上图标有很多个图标，改变一个同时，其他也是要跟着渲染

设备信息问题-我们需要在画布上点击获取到图标的下标之后，把x，y传递给信息框，显示

自己理解

现在这个版本仅仅相当于是一个例子，但是也是费了不少时间和bug才艰辛完成的

为什么说是例子，可能还会有bug，适配，api交互，放大，存储问题等等。

代码实现-可以直接复制

​

​

---

总结：

经过这一趟流程下来相信你也对 vue-使用canvas画布实现平面图点位标注功能 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕