如何使用canvas绘制多个图形块，并可以拖动。
站长
· 阅读数 51
在日常项目开发中，我们或多或少会遇到使用canvas的场景，下面我分享一个使用canvas绘制多个图形，并可以进行拖动的案例，例如：
通过canvas手册，我们可以获取到绘制图形的方法：ctx.fillRect(x, y, width, height)，其中，x, y 分别为绘制的起始坐标，width, height 分别为绘制的宽度和高度，但是这种方法有个弊端，如果我们是通过鼠标来绘制，点击开始，移动，鼠标抬起，绘制完成，那么，对于上述的方法来说，局限性就比较大。
当然，也不是说没有解决办法，canvas中提供了另外的一种绘制图形方式：例如：
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();
这种方式使我们的绘制更加灵活，我们可以多次使用ctx.lineTo(x, y) 来绘制我们想要的图形路径，最后进行填充，得到最终图形。
那么现在，我们就通过上述的方法，通过鼠标来绘制不同大小的长方形，并可以进行拖动更换位置。 按照通常惯例，我们需要获取canvas，并设置相关的宽高：
<!--
* @Author: ChenJinZhu
* @Date: 2023-04-15 15:55:29
* @Contact:1483364913@qq.com
* @FilePath: F:\桌面文件\demo.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<canvas id="canvas"></canvas>
</div>
</body>
<script>
// 获取canvas
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 设置宽高
const w = 1200, h = 800;
canvas.width = w * devicePixelRatio;
canvas.height = h * devicePixelRatio;
</script>
</html>
接下来，就是使用canvas提供的方法，来绘制。 因为是需要绘制多个，所以，我定义了一个构造函数，使用这个函数，生成数组对象，通过调用对象内部的绘制方法就能绘制出相关图形：
class RectFactory {
/**
* @startX：鼠标 点击时 的坐标轴 X 值
* @startY：鼠标 点击时 的坐标轴 Y 值
* @endX：鼠标 抬起时 的坐标轴 X 值
* @endY：鼠标 抬起时 的坐标轴 Y 值
* */
constructor(startX, startY, endX, endY) {
this.startX = startX;
this.startY = startY;
this.endX = endX;
this.endY = endY;
}
// 为了保持不同的鼠标绘制方向都能绘制出图形，对坐标进行处理。
get minX() {
return Math.min(this.startX, this.endX);
}
get maxX() {
return Math.max(this.startX, this.endX);
}
get minY() {
return Math.min(this.startY, this.endY);
}
get maxY() {
return Math.max(this.startY, this.endY);
}
draw() {
ctx.beginPath();
ctx.moveTo(this.minX * devicePixelRatio, this.minY * devicePixelRatio);
ctx.lineTo(this.maxX * devicePixelRatio, this.minY * devicePixelRatio);
ctx.lineTo(this.maxX * devicePixelRatio, this.maxY * devicePixelRatio);
ctx.lineTo(this.minX * devicePixelRatio, this.maxY * devicePixelRatio);
ctx.lineTo(this.minX * devicePixelRatio, this.minY * devicePixelRatio);
// 填充颜色
ctx.fillStyle = '#ffb60f';
ctx.fill();
ctx.strokeStyle = '#fff';
ctx.lineCap = 'square';
ctx.lineWidth = 1 * devicePixelRatio;
ctx.stroke();
}
}
图形的绘制构造函数写完之后，我们只需要对对应的鼠标函数进行完善即可：
canvas.onmousedown = (e) => {
// 鼠标按下时，需要获取canvas相对浏览器视窗的位置
const rect = canvas.getBoundingClientRect();
// 获取鼠标按下时，相对canvas的位置。
// 因为canvas的坐标系是从左上角开始的，所以需要减去canvas相对浏览器视窗的位置。
const clickX = e.clientX - rect.left;
const clickY = e.clientY - rect.top;
// 执行绘制方法
drawRect(e, clickX, clickY, rect)
}
const drawRect = (e, clickX, clickY, rect) => {
// 鼠标按下，立即通过构造函数创建新的对象
const shape = new RectFactory(clickX, clickY)
// 全局定义的数组，每次鼠标按下，就将创建好的对象推入数组中。
shapeCollection.push(shape)
// 执行鼠标移动事件，移动时，同时修改当前对象的结束坐标
window.onmousemove = (evt) => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
shape.endX = evt.clientX - rect.left;
shape.endY = evt.clientY - rect.top;
}
}
最后，我们只需要一直循环 shapeCollection，并调用里面的 draw() 方法，即可：
const draw = () => {
requestAnimationFrame(draw)
for (const pp of shapeCollection) {
pp.draw()
}
}
draw()
到此，我们就可以随便绘制图形咯。但是，此时功能还未结束，我们还需要拖动的功能，那么，在点击的时候，只需要判断下当前的位置是不是在图形的内部，此判断方法，需要加在构造函数内部，所以，只需要对代码进一步修改即可，以下是次功能的全部代码：
<!--
* @Author: ChenJinZhu
* @Date: 2023-04-15 15:55:29
* @Contact:1483364913@qq.com
* @FilePath: F:\桌面文件\demo.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<canvas id="canvas" style="background-color: #94e8ea"></canvas>
</div>
</body>
<script>
// 获取canvas
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 所有绘制的图形推入数组中。
let shapeCollection = []
// 设置宽高
const w = 1200, h = 800;
canvas.width = w * devicePixelRatio;
canvas.height = h * devicePixelRatio;
class RectFactory {
/**
* @startX：鼠标 点击时 的坐标轴 X 值
* @startY：鼠标 点击时 的坐标轴 Y 值
* @endX：鼠标 抬起时 的坐标轴 X 值
* @endY：鼠标 抬起时 的坐标轴 Y 值
* */
constructor(startX, startY, endX, endY) {
this.startX = startX;
this.startY = startY;
this.endX = endX;
this.endY = endY;
}
// 为了保持不同的鼠标绘制方向都能绘制出图形，对坐标进行处理。
get minX() {
return Math.min(this.startX, this.endX);
}
get maxX() {
return Math.max(this.startX, this.endX);
}
get minY() {
return Math.min(this.startY, this.endY);
}
get maxY() {
return Math.max(this.startY, this.endY);
}
draw() {
ctx.beginPath();
ctx.moveTo(this.minX * devicePixelRatio, this.minY * devicePixelRatio);
ctx.lineTo(this.maxX * devicePixelRatio, this.minY * devicePixelRatio);
ctx.lineTo(this.maxX * devicePixelRatio, this.maxY * devicePixelRatio);
ctx.lineTo(this.minX * devicePixelRatio, this.maxY * devicePixelRatio);
ctx.lineTo(this.minX * devicePixelRatio, this.minY * devicePixelRatio);
ctx.fillStyle = '#ffb60f';
ctx.fill();
ctx.strokeStyle = '#fff';
ctx.lineCap = 'square';
ctx.lineWidth = 1 * devicePixelRatio;
ctx.stroke();
}
// 判断当前点击位置是否在图形内部
isInside(x, y) {
return x >= this.minX && x <= this.maxX && y >= this.minY && y <= this.maxY
}
}
canvas.onmousedown = (e) => {
const rect = canvas.getBoundingClientRect();
const clickX = e.clientX - rect.left;
const clickY = e.clientY - rect.top;
const shape = getRect(clickX, clickY)
if (shape) {
moveRect(e, clickX, clickY, rect, shape)
} else {
drawRect(e, clickX, clickY, rect)
}
}
canvas.onmouseup = () => {
canvas.onmousemove = null;
window.onmousemove = null;
};
// 鼠标点击canvas查看是否点击到了已经绘制的路线，若是，则返回相关线的对象，若否，返回null
const getRect = (x, y) => {
for (let i = shapeCollection.length - 1; i >= 0; i--) {
const element = shapeCollection[i];
if (element.isInside(x, y)) {
return element;
}
}
return null
}
const drawRect = (e, clickX, clickY, rect) => {
const shape = new RectFactory(clickX, clickY)
shapeCollection.push(shape)
window.onmousemove = (evt) => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
shape.endX = evt.clientX - rect.left;
shape.endY = evt.clientY - rect.top;
}
}
const moveRect = (e, clickX, clickY, rect, shape) => {
const { startX, startY, endX, endY } = shape;
window.onmousemove = (evt) => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const distanceX = evt.clientX - rect.left - clickX;
const distanceY = evt.clientY - rect.top - clickY;
shape.startX = startX + distanceX;
shape.startY = startY + distanceY;
shape.endX = endX + distanceX;
shape.endY = endY + distanceY;
}
};
const draw = () => {
requestAnimationFrame(draw)
for (const pp of shapeCollection) {
pp.draw()
}
}
draw()
</script>
</html>
如果此篇文章对您有一定帮助，请给一个赞吧~，您的赞，是对我最大的鼓励 ٩(๑❛ᴗ❛๑)۶
转载自:https://juejin.cn/post/7222189908429094949