Question

我正在尝试使用canvas创建类似应用程序的绘制。我可以使用自由手工具绘制，但当我尝试使用形状时，我们需要使用clearrect方法，我无法正常使用。我需要在画布上用鼠标绘制多个形状，但无法这样做。

这是我正在尝试的链接 http://jsfiddle.net/6vq64sdh/

HTML：

<canvas width="800px" height="600px" id="drawing"></canvas>

JS

var isDown;
var start;
var end;
var canvasEl = document.getElementById("drawing");
var draw = canvasEl.getContext("2d");
draw.lineWidth = "2";
draw.strokeStyle = "blue";
var lastWidth = 0;
var lastHeight = 0;

$("#drawing").mousedown(function(e) {
    isDown = true;
    start = getMousePos(canvasEl, e);
    end = getMousePos(canvasEl, e);
    lastWidth = 0;
    lastHeight = 0;
    e.preventDefault();
});

$("#drawing").mouseup(function() {
    isDown = false;
});

$("#drawing").mousemove(function(e) {
    if (!isDown) return;
    var end = getMousePos(canvasEl, e);
    var h = end.y - start.y;
    var w = end.x - start.x;
    draw.clearRect(start.x-5, start.y-5, lastWidth + 6, lastHeight + 6);
    draw.beginPath();
    draw.rect(start.x, start.y, w, h);
    lastWidth = w;
    lastHeight = h;
    draw.stroke();
    draw.closePath();
});


function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: Math.floor(evt.clientX - rect.left),
        y: Math.floor(evt.clientY - rect.top)
    };
}

在上面的链接能够绘制多个矩形当我试图拖动鼠标右侧但当我将其拖动到左侧时无法做到。你能不能

Answer 1

我的代码有点改进了。当您尝试在已存在的矩形上绘制新矩形时，看起来您遇到了一些麻烦。

我创建一个存储绘制矩形的变量。（就像浏览器的大脑一样）在代码的底部，我创建了一个docker run --name drap --privileged -v /home/ubuntu/profile/reads/SE:/usr/local/src/volume -i -t sigenae/drap /bin/bash函数，用于重新绘制setInterval()中大脑变量中的矩形。

＆＃13;

60fps

＆＃13;

var drawed_objects = []; //our brain variable
    var isDown;
    var start;
    var end;
    var canvasEl = document.getElementById("drawing");
    var draw = canvasEl.getContext("2d");
    draw.lineWidth = "2";
    draw.strokeStyle = "blue";
    var lastWidth = 0;
    var lastHeight = 0;

    $("#drawing").mousedown(function(e) {
        isDown = true;
        start = getMousePos(canvasEl, e);
        end = getMousePos(canvasEl, e);
        lastWidth = 0;
        lastHeight = 0;
        e.preventDefault();
    });

    $("#drawing").mouseup(function() {
      drawed_objects.push({start:start,width:w,height:h});
        isDown = false;
    });

    $("#drawing").mousemove(function(e) {
        if (!isDown) return;
        end = getMousePos(canvasEl, e);
        h = end.y - start.y;
        w = end.x - start.x;
        draw.clearRect(start.x-5, start.y-5, lastWidth + 6, lastHeight + 6);
        draw.beginPath();
        draw.rect(start.x, start.y, w, h);
        lastWidth = w;
        lastHeight = h;
        draw.stroke();
        draw.closePath();
    });

    //in here we drawing old rectangles again again again..
    //and all time clearing the canvas
    setInterval(function(){
      draw.clearRect(0,0,draw.canvas.width,draw.canvas.height);

      for( let i=0; i <drawed_objects.length; i++ )
      {
        var obj = drawed_objects[i];
        draw.beginPath();
        draw.rect(obj.start.x, obj.start.y, obj.width, obj.height);
        draw.stroke();
        draw.closePath();
      }

    },1000/60);

function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
            x: Math.floor(evt.clientX - rect.left),
            y: Math.floor(evt.clientY - rect.top)
        };
    }

＆＃13;

使用画布绘制多个形状，如绘画应用程序

1 个答案: