canvas设置点击(Canvas高级路径操作之拖拽对象的实现)
canvas设置点击
Canvas高级路径操作之拖拽对象的实现为了追踪所画内容,诸如画图应用程序、计算机辅助设计系统(computer-aided design system 简称CAD系统)以及游戏等许多应用程序,都会维护一份包含当前显示对象的列表。通常来说,这些应用程序都允许用户对当前显示在屏幕上的物体进行操作。比方说,在CAD应用程序中,我们可以对设计中的元素进行选择、移动、缩放等操作
——《HTML5 Canvas核心技术》
在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;
结语
其实这个功能实现并不难,关键是了解一个概念:通过维护当前显示对象的列表及isPointInPath进行判断来实现追踪
最后欢迎大家交流学学习
参考资料
《HTML5 Canvas核心技术》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
- 微信小程序canvas 动画(微信小程序使用canvas绘制钟表)
- canvas 绘图解决方案(高清屏下canvas重置尺寸引发的问题的解决)
- canvas进阶教程(原生canvas制作画图小工具的踩坑和爬坑)
- canvas宽高技巧(canvas画图被放大且模糊的解决方法)
- html5canvas图形怎么打印(HTML5 Canvas 实现K线图的示例代码)
- canvas处理图片风格(html2 canvas生成清晰的图片实现打印功能)
- html5的canvas图形绘制技术(导出HTML5 Canvas图片并上传服务器功能)
- html5中canvas标签(html5 canvas绘制网络字体的常用方法)
- canvas画布多次渲染失败(深入了解canvas在移动端绘制模糊的问题解决)
- html5 canvas 性能(基于html5 canvas做批改作业的小插件)
- canvas设置点击(Canvas高级路径操作之拖拽对象的实现)
- canvas图片裁剪(使用canvas压缩图片上传的方法示例)
- canvas里面图片如何获取(canvas生成带二维码海报的踩坑记录)
- canvas图片填充位置(手摸手教你用canvas实现给图片添加平铺水印的实现)
- jscanvas画折线图(js+canvas实现代码雨效果)
- 用html5的canvas绘制剪裁图像(Html5 canvas画图白板踩坑)
- 体坛传媒LOGO全新升级,多元发展迈出坚实步伐(体坛传媒LOGO全新升级)
- 超撩人治愈的绝美水彩,原来出自她之手 一笔一画令无数人沉醉(超撩人治愈的绝美水彩)
- 新手的勾线(新手的勾线)
- ()
- 书法欣赏 宋.志南诗《绝句》(宋.志南诗绝句)
- 每周一首古诗 《绝句》(每周一首古诗绝句)
热门推荐
- dedecms添加底部链接(详解如何修改织梦模板dedeCMS友情链接为下拉式)
- html一行两列布局代码(CSS实现页面两列布局与三列布局的方法示例)
- 云服务器哪个安全速度快(云服务器速度快不快?有哪些测试办法?)
- sql server 实例功能(SQL Server简单查询示例汇总)
- python如何读取文件(Python从文件中读取数据的方法讲解)
- ftp服务器的搭建及应用(FTP服务器的部署和维护心得)
- python列表怎么赋值(详解Python列表赋值复制深拷贝及5种浅拷贝)
- CSS中background-attachment
- python将一个字符串逆序输出(Python字符串逆序的实现方法一题多解)
- python中查看数据类型的内置函数(python学习——内置函数、数据结构、标准库的技巧推荐)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9