canvas 鼠标绘图

Posted 2020-11-24 grani

项目要求在视频上绘制多边形区域
单单描出鼠标轨迹很简单，lineTo 配合鼠标事件大概十几行代码就搞定
画直线的话原来是要在 mousemove 里清空画布，鼠标移动时都在不断地清空画布再重新根据起点终点来绘制
如此"曲折"才得到了一条直线，因为不断地 clearRect，所以要画多条直线就要记录以前画过的直线，试过用数组来记录，但感觉极其麻烦没有可行性
看了 创建一个HTML5 Canvas绘画应用程序 后才恍然大悟，原来要用到两张画布，一张用于临时绘制，一张用于记录，每在临时画布上画一条直线就立马画一份到记录画布上再清空临时画布，因为两张画布重叠，所以看起来就有了连续作画的感觉

重点是 drawImage 方法
drawImage(img,x,y) img 可以是图片、canvas对象或 video 对象，xy为画布上的坐标，这样放置的 img 会是原始尺寸
drawImage(img,x,y,w,h) wh 为绘制的尺寸，是设置宽高，不是截取
drawImage(img,x,y,w,h,x1,y1,w1,h1)
x,y,w,h 是原图上的一个矩形区域
x1,y1,w1,h1 是画布上的一个矩形区域
将原图上选定的矩形区域图像显示到画布指定的矩形区域
若 w1h1 大于 wh ,则这区域的图像会被等比放大，同理，相等则是原尺寸，小于则是等比缩小

先贴自己的挫代码，方便以后优化
鼠标轨迹

drawCurve() {
    var $imgView = $('#imageView'),
        $imgTemp = $('#imageTemp'),
        ctx1 = $imgView[0].getContext('2d'),
        ctx2 = $imgTemp[0].getContext('2d');

    $imgTemp.off().on('mousedown', function (e) {
        ctx2.moveTo(e.clientX, e.clientY);

        $imgTemp.on('mousemove', function (e) {
            ctx2.lineTo(e.clientX, e.clientY);
                ctx2.stroke();
        });

        $imgTemp.on('mouseup', function () {
            ctx1.drawImage($imgTemp[0], 0, 0, ctx2.canvas.width, ctx2.canvas.height);
        })
   })
},

圆

drawCircular() {
    var $imgView = $('#imageView'),
        $imgTemp = $('#imageTemp'),
        ctx1 = $imgView[0].getContext('2d'),
        ctx2 = $imgTemp[0].getContext('2d')

    $imgTemp.off('mousedown').on('mousedown', function (e) {
        var startX = e.clientX,
            startY = e.clientY;

        $imgTemp.on('mousemove', function (e) {
            var x = Math.min(e.clientX, startX),
                y = Math.min(e.clientY, startY),
                w = Math.abs(e.clientX - startX),
                h = Math.abs(e.clientY - startY);

            ctx2.clearRect(0, 0, ctx2.canvas.width, ctx2.canvas.height);
            ctx2.beginPath();
            ctx2.arc(x, y, w, 0, Math.PI * 2);
            ctx2.stroke();
            ctx2.closePath();
        });

        $imgTemp.on('mouseup', function () {
            ctx1.drawImage($imgTemp[0], 0, 0, ctx2.canvas.width, ctx2.canvas.height);
        })
    })
},

直线

drawLine() {
    var $imgView = $('#imageView'),
        $imgTemp = $('#imageTemp'),
        ctx1 = $imgView[0].getContext('2d'),
        ctx2 = $imgTemp[0].getContext('2d');

    $imgTemp.off().on('mousedown', function (e) {
        var startX = e.clientX,
            startY = e.clientY;

        $imgTemp.on('mousemove', function (e) {
            ctx2.clearRect(0, 0, ctx2.canvas.width, ctx2.canvas.height);
            ctx2.beginPath();
            ctx2.moveTo(startX, startY);
            ctx2.lineTo(e.clientX, e.clientY);
            ctx2.closePath();
            ctx2.stroke();
        });

        $imgTemp.on('mouseup', function () {
            ctx1.drawImage($imgTemp[0], 0, 0, ctx2.canvas.width, ctx2.canvas.height);
        })
    })
}

多边形

drawPolygon() {
    var $imgView = $('#imageView'),
        $imgTemp = $('#imageTemp'),
        ctx1 = $imgView[0].getContext('2d'),
        ctx2 = $imgTemp[0].getContext('2d');

    $imgTemp.off().on('mousedown', function (e) {
        var startX = e.clientX,
            startY = e.clientY;

        $imgTemp.on('mousemove', function (e) {
            ctx2.clearRect(0, 0, ctx2.canvas.width, ctx2.canvas.height);
            ctx2.beginPath();
            ctx2.moveTo(startX, startY);
            ctx2.lineTo(e.clientX, e.clientY);
            ctx2.closePath();
            ctx2.stroke();
        });

        $imgTemp.on('mouseup', function () {
            ctx1.drawImage($imgTemp[0], 0, 0, ctx2.canvas.width, ctx2.canvas.height);
        })
    })
}

学习资料

创建一个HTML5 Canvas绘画应用程序