Canvas高级路径操作之拖拽对象的实现
为了追踪所画内容,诸如画图应用程序、计算机辅助设计系统(puter-aided design system 简称CAD系统)以及游戏等许多应用程序,都会维护一份包含当前显示对象的列表。通常来说,这些应用程序都允许用户对当前显示在屏幕上的物体进行操作。比方说,在CAD应用程序中,我们可以对设计中的元素进行选择、移动、缩放等操作
——《HTML5 Canvas核心技术》
在Canvas中 实现拖拽
也同样如此,Canvas提供了一个名为 isPointInPath(x, y)
的API,判断 点(x, y)
是否在路径之中。如果在路径之中,则返回true。于是我们可以有如下思路
维护一个可以描述各个路径的 数组
,通过 ispointInPath(x, y)
判断点击位置是否在某一个路径之中,如果在此路径之中,选中此路径,进行操作(移动、缩放等),再绘制图形
此文我以 多边形拖拽为例进行说明
,Demo如下(后面的印子是录屏软件的原因:japanese_ogre:)
Demo中的多边形如何绘制之前做过,不再赘述:ghost:
思路说明
下图给了大致的说明及伪代码,思路并不难,但有部分细节需要处理
代码结构说明
此处列举代码结构及标注其思路,更详细的代码注释已在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;
其实这个功能实现并不难,关键是了解一个概念通过维护当前显示对象的列表及isPointInPath进行判断来实现追踪
欢迎大家交流学学习
参考资料
《HTML5 Canvas核心技术》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML