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教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
几个学习PHP的网址
2006/11/25 PHP
php 获得汉字拼音首字母的函数
2009/08/01 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
电大学习个人自我评价范文
2013/10/04 职场文书
物流专业毕业生推荐信范文
2013/11/18 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
大学生就业意向书范文
2014/04/01 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python