Canvas高级路径操作之如何实现拖拽对象-创新互联
这篇文章主要介绍Canvas高级路径操作之如何实现拖拽对象，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
铜官ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！为了追踪所画内容，诸如画图应用程序、计算机辅助设计系统（computer-aided design system 简称CAD系统）以及游戏等许多应用程序，都会维护一份包含当前显示对象的列表。通常来说，这些应用程序都允许用户对当前显示在屏幕上的物体进行操作。比方说，在CAD应用程序中，我们可以对设计中的元素进行选择、移动、缩放等操作
在Canvas中实现拖拽 也同样如此，Canvas提供了一个名为isPointInPath(x, y) 的API，判断点(x, y) 是否在路径之中。如果在路径之中，则返回true。于是我们可以有如下思路：
维护一个可以描述各个路径的数组 ，通过ispointInPath(x, y) 判断点击位置是否在某一个路径之中，如果在此路径之中，选中此路径，进行操作(移动、缩放等)，再绘制图形
此文我以多边形拖拽为例进行说明 ，Demo如下（后面的印子是录屏软件的原因:japanese_ogre:）：
CodePen打开
Demo中的多边形如何绘制之前做过总结，不再赘述:ghost:：Canvas多边形绘制
思路说明
下图给了大致的说明及伪代码，思路并不难，但有部分细节需要处理
代码结构说明
此处列举代码结构及标注其思路，更详细的代码注释已在CodePen之中
因为本文重点在拖拽(drag)，所以对绘图部分描述会较少
//绘制多边形路径函数
function drawPolygonPath
//多边形类定义
class Polygon{
...
}
//根据点击事件返回在canvas中的位置
function positoinInCanvas
//获取两点间直线距离
function getDistance
//开始阶段，记录拖拽对象
canvas.onmousedown
//拖拽阶段，画路径，描边
canvas.onmousemove
//结束阶段，更新拖拽对象位置
canvas.onmouseup关键部分说明
接下来开始代码中的关键部分及细节处理
如何维护拖拽对象数组
在程序初始化时，我们定义一个polygonArray数组
polygonArray = []
在每次画一个新的多边形之后，都会new一个多边形对象推入数组中进行维护
const polygon = new Polygon(mouseStart.get('x'), mouseStart.get('y'), sideNum, radius);
polygonArray.push(polygon);//记录路径对象在后续点击操作时，需要根据对应信息确定点击位置是否在路径之中
点击时，如何选取要拖拽的对象
首先获取点击时在canvas中 的对应位置，我的代码用mouseStart 记录x 及y
接着遍历polygonArray 中的polygon ，遍历中调用polygon.createPath() ，通过isPointInPath() 判断点击位置是否有路径，有的话draggingPolygon = polygon 结束函数
const pos = positionInCanvas(e, canvasLeft, canvasTop);//获取在canvas中的像素位置
//记录鼠标起始点s
mouseStart.set('x', pos.x);
mouseStart.set('y', pos.y);
...
for (let polygon of polygonArray) {
polygon.createPath();
if (ctx.isPointInPath(mouseStart.get('x'), mouseStart.get('y'))) {
draggingPolygon = polygon;
return;
}
}拖拽时的计算
这部分要完全理解推荐大家根据Demo中两个console.log(draggingPolygon) 及代码进行调试，因为我们是在mousemove 阶段，这个阶段触发函数非常频繁
我尽量用语言表达清楚
首先计算move 时与mouseStart 的距离，记为diff，有x轴上的offsetX ，也有y轴上的offsetY
const
pos = positionInCanvas(e, canvasLeft, canvasTop),
diff = new Map([
['offsetX', pos.x - mouseStart.get('x')],
['offsetY', pos.y - mouseStart.get('y')]
]);接着记录当前拖拽对象的centerX 及centerY ，记为temp
let tempCenterX = draggingPolygon.centerX, tempCenterY = draggingPolygon.centerY;
这里就是难理解的点，为什么要记录？继续往下看，后面会使用到。
根据diff 中的offset，设置draggingPolygon新的中心位置
draggingPolygon.centerX += diff.get('offsetX');
draggingPolygon.centerY += diff.get('offsetY');接着清空画布进行绘制新的路径和描边
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let polygon of polygonArray) {
drawPolygonPath(polygon.sideNum,
polygon.radius,
polygon.centerX,
polygon.centerY, ctx);
ctx.stroke();
}最后使用到上文中的tempCenterX 与tempCenterY ：
draggingPolygon.centerX = tempCenterX; draggingPolygon.centerY = tempCenterY;
为什么需要这么做呢？
因为我们的拖拽是基于多边形的原位置 ,而mousemove 阶段并不能确定函数的最终位置 ，如果这时没有复原的话，会出现"漂移" ，我把这两行代码注释掉，效果如下：
如果我没说清楚，墙裂推荐大家对代码进行修改和调试
拖拽后的处理
拖拽完成后是处于mouseup 阶段，此时我们已经确定dragginPolygon的最终位置，进行更新即可，最后置为null，排除在没有拖拽多边形情况下，鼠标在画布上移动触发对应代码
const
pos = positionInCanvas(e, canvasLeft, canvasTop),
offsetMap = new Map([
['offsetX', pos.x - mouseStart.get('x')],
['offsetY', pos.y - mouseStart.get('y')]
]);
draggingPolygon.centerX += offsetMap.get('offsetX');
draggingPolygon.centerY += offsetMap.get('offsetY');
draggingPolygon = null;以上是“Canvas高级路径操作之如何实现拖拽对象”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
网站标题：Canvas高级路径操作之如何实现拖拽对象-创新互联
文章源于：http://6mz.cn/article/cchogj.html