欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-08-07 19:50:37
这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 19-08-05...

为了追踪所画内容,诸如画图应用程序、计算机辅助设计系统(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核心技术》

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