Canvas拖动图形实现效果完整版

上次那个博客实现只能支持单张图片，并且代码的逻辑不够清晰。所以中秋节，正好一个人也没事做，专门抽出时间来对它进行一个扩展，添加对多张图片的支持。

效果展示

下面我们先来看看实现的效果，这里先提一点：当你移动图片时，注意它是在所有图片的最下层，这是我的技术实现的特点。

1.GIF动图 2.B站视频

canvas图片拖动

实现分析

多张图片移动实现分析

所有的图片存储在一个数组中，使用一个current变量存储当前选中的图片（初始值为-1，即未选中）。当用户开始点击画板时，记录下此时鼠标的位置。当鼠标在画板上进行移动时，首先清空整个画板，然后依次绘制每一张图片和外围的矩形框，并且在绘制完成之后，立刻判断鼠标是否点击到了这张图片上（矩形框内部）。如果鼠标在某个矩形框内部，说明它选中了某张图片。 然后交换它和数组第一个元素的位置，这样它就变成了整个数组的第一个元素了。然后重新绘制所有的图形，由于被选中的图片是数组中的第一个元素，所以它是最先绘制的。这样呈现的效果就是你会看到它在所有图片的底部。之所以采用这种方式进行处理，是因为如果它在其它图片的上层时，当鼠标点击的位置位于两个图片的层叠处，两张图片会出现同时移动的问题。所以，我采用了这种方式进行规避，不过最终的效果也是不错的，你只是看到它处于其它图片的底层而已。

多张图片移动边界限制分析

上一个博客中，我实现了图片不能移动出边界的功能。这里也是要加上的，你可能觉得图片变多了，不好分析了。但是，其实还是很简单的。我的图片数组会存储每一个图片的坐上顶点坐标，并且图片的宽高我们也是知道的（图片元素自身会存储这个值）。因此，当我们鼠标点击某张图片时，我们也就可以算出来图片的右下顶点了。所以我们其实是时刻知道某张图片的四个顶点的位置的，但是我们只需要知道（x1， y1）和 （x3，y3）。并且我们只需要判断这个四个数字的取值值即可。在上一篇博客是判断一个点的位置不能在某个位置，这其实是一种组合判断，我昨天发现其实只要单独判断就行了。 所以最终的判断代码大大简化了：

// 判断位置，当点越界时，进行处理

function judgePosition(obj) {

// 这里只需要考虑点的坐标值即可，两个点，4个坐标判断四种情况。

obj.x = obj.x < 0 ? 0 : (obj.x + obj.img.width) < width ? obj.x : width-obj.img.width;

obj.y = obj.y < 0 ? 0 : (obj.y + obj.img.height) < height ? obj.y : height-obj.img.height;

}

或者一个更容易理解的写法：

// 判断位置，当点越界时，进行处理

function judgePosition(obj) {

// 这里只需要考虑点的坐标值即可，两个点，4个坐标判断四种情况。

let x3 = obj.x + obj.img.width;

let y3 = obj.y + obj.img.height;

if (obj.x < 0) {

obj.x = 0;

}

if (obj.y < 0) {

obj.y = 0;

}

if (x3 > width) {

obj.x = width-obj.img.width;

}

if (y3 > height) {

obj.y = height-obj.img.height;

}

}

完整代码

参考资料

Canvas画图-鼠标移动图形