如何使用canvas绘制多个图形块，并可以拖动。

原创已于 2023-04-18 18:47:59 修改 · 3k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2023-04-15 19:08:57 首次发布

canvas 专栏收录该内容

3 篇文章

订阅专栏

文章介绍了一种使用HTML5Canvas通过鼠标事件动态绘制并拖动图形的方法。通过构造函数RectFactory，可以创建可拖动的矩形，利用beginPath(),moveTo(),lineTo()等方法绘制图形，并在鼠标按下和移动事件中更新图形位置。此外，还实现了判断鼠标点击是否在图形内的功能，以实现拖动效果。

部署运行你感兴趣的模型镜像

在日常项目开发中，我们或多或少会遇到使用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>