在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
为了追踪所画内容,诸如画图应用程序、计算机辅助设计系统(computer-aided design system 简称CAD系统)以及游戏等许多应用程序,都会维护一份包含当前显示对象的列表。通常来说,这些应用程序都允许用户对当前显示在屏幕上的物体进行操作。比方说,在CAD应用程序中,我们可以对设计中的元素进行选择、移动、缩放等操作 ——《HTML5 Canvas核心技术》 在Canvas中 维护一个可以描述各个路径的 此文我以
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);//记录路径对象 在后续点击操作时,需要根据对应信息确定点击位置是否在路径之中 点击时,如何选取要拖拽的对象 首先获取点击时在 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中两个 我尽量用语言表达清楚 首先计算 const pos = positionInCanvas(e, canvasLeft, canvasTop), diff = new Map([ ['offsetX', pos.x - mouseStart.get('x')], ['offsetY', pos.y - mouseStart.get('y')] ]); 接着记录当前拖拽对象的 let tempCenterX = draggingPolygon.centerX, tempCenterY = draggingPolygon.centerY; 这里就是难理解的点,为什么要记录?继续往下看,后面会使用到。 根据 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(); } 最后使用到上文中的 draggingPolygon.centerX = tempCenterX; draggingPolygon.centerY = tempCenterY; 为什么需要这么做呢? 因为我们的拖拽是
如果我没说清楚,墙裂推荐大家对代码进行修改和调试 拖拽后的处理 拖拽完成后是处于 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; 结语 其实这个功能实现并不难,关键是了解一个概念:通过维护当前显示对象的列表及isPointInPath进行判断来实现追踪 参考资料 《HTML5 Canvas核心技术》 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论