Canvas高级路径操作之拖拽对象的实现


Posted in HTML / CSS onAugust 05, 2019

为了追踪所画内容,诸如画图应用程序、计算机辅助设计系统(computer-aided design system 简称CAD系统)以及游戏等许多应用程序,都会维护一份包含当前显示对象的列表。通常来说,这些应用程序都允许用户对当前显示在屏幕上的物体进行操作。比方说,在CAD应用程序中,我们可以对设计中的元素进行选择、移动、缩放等操作

——《HTML5 Canvas核心技术》

在Canvas中 实现拖拽 也同样如此,Canvas提供了一个名为 isPointInPath(x, y) 的API,判断 点(x, y) 是否在路径之中。如果在路径之中,则返回true。于是我们可以有如下思路:

维护一个可以描述各个路径的 数组 ,通过 ispointInPath(x, y) 判断点击位置是否在某一个路径之中,如果在此路径之中,选中此路径,进行操作(移动、缩放等),再绘制图形

此文我以 多边形拖拽为例进行说明 ,Demo如下(后面的印子是录屏软件的原因:japanese_ogre:):

Canvas高级路径操作之拖拽对象的实现 

CodePen打开

Demo中的多边形如何绘制之前做过总结,不再赘述:ghost::Canvas多边形绘制

思路说明

下图给了大致的说明及伪代码,思路并不难,但有部分细节需要处理

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 记录 xy
接着遍历 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')]
    ]);

接着记录当前拖拽对象的 centerXcenterY ,记为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();
}

最后使用到上文中的 tempCenterXtempCenterY

draggingPolygon.centerX = tempCenterX;
draggingPolygon.centerY = tempCenterY;

为什么需要这么做呢?

因为我们的拖拽是 基于多边形的原位置 ,而 mousemove 阶段并 不能确定函数的最终位置 ,如果这时没有复原的话,会出现 "漂移" ,我把这两行代码注释掉,效果如下:

Canvas高级路径操作之拖拽对象的实现 

如果我没说清楚,墙裂推荐大家对代码进行修改和调试

拖拽后的处理

拖拽完成后是处于 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核心技术》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3制作日历实现代码
Jan 21 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
css3media响应式布局实例
Jul 08 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 #HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 #HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 #HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 #HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 #HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 #HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 #HTML / CSS
You might like
php抓取https的内容的代码
2010/04/06 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
js实现选项卡效果
2020/03/07 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python中sleep函数用法实例分析
2015/04/29 Python
python中PIL安装简单教程
2016/04/21 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
标准离婚协议书范文下载
2014/11/30 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS