Question

我通过拖动鼠标绘制矩形。

每次我开始在画布中拖动时，它会清空并变为空白，一旦我停止拖动，绘图就会重新出现。

我认为clearRect()不会产生问题，但我可能错了。

我可能做错了什么，我该如何解决？

以下是我的代码：

<body>
    <canvas id ="canv" width="1000" height="600" ></canvas>
    <div id="button">
    <input type="button" id="clear" value="Clear">
    </div>
</body>

<script>
    var canv = document.getElementById('canv'),
        ctx = canv.getContext('2d'),
        rect = [],
        move = false;
    var newRect;
    var startX, startY, mouseX, mouseY;
    var offsetX,offsetY;
    function reOffset(){
        var bound = canv.getBoundingClientRect();
        offsetX = bound.left;
        offsetY = bound.top;        
    }
    reOffset();
    function movement(){
        canv.addEventListener('mousedown', mouseDown, false);
        canv.addEventListener('mouseup', mouseUp, false);
        canv.addEventListener('mousemove', mouseMove, false);
    }
    function mouseDown(event){

        startX=parseInt(event.clientX-offsetX);
        startY=parseInt(event.clientY-offsetY);
        move = true;

    }
    function mouseUp(event){
        mouseX=parseInt(event.clientX-offsetX);
        mouseY=parseInt(event.clientY-offsetY);
        move = false;
        if(!overlap(newRect)){
            rect.push(newRect);
        }
        make();
        //ctx.fillRect(q.left,q.top,q.right-q.left,q.bottom-q.top);
    }

     function make(){
        for(var i = 0; i < rect.length; i++){
            var q = rect[i];
            ctx.fillStyle = randomColour();
            ctx.fillRect(q.left, q.top, q.right - q.left, q.bottom - q.top);
        }
    }
    function mouseMove(event){

        if(move){
            mouseX=parseInt(event.clientX - offsetX);
            mouseY=parseInt(event.clientY - offsetY);

            newRect = {
                left : Math.min(startX , mouseX),
                right : Math.max(startX , mouseX),
                top : Math.min(startY , mouseY),
                bottom : Math.max(startY , mouseY),
            }
            ctx.clearRect(0, 0, canv.width, canv.height);
            ctx.strokeRect(startX, startY, mouseX-startX, mouseY-startY);
        }
    }
    function randomColour() {
        var colour = [];
        for (var i = 0; i < 3; i++) {
            colour.push(Math.floor(Math.random() * 256));
        }
        return 'rgb(' + colour.join(',') + ')';
    }

    function overlap(newRect){
        var q1 = newRect;

        //if one rect is completely inside another rect
        var inside = function(rectx, recty){
            return(recty.left >= rectx.left && 
                   recty.right <= rectx.right && 
                   recty.top >= rectx.top &&
                   recty.bottom <= rectx.bottom);
        }

        //if the new rect is overlapping any existing rect
        var isOverlaping = false;
        for(var i = 0; i < rect.length; i++){
            var q2 = rect[i];
            var isIntersecting = !(q1.left > q2.right ||
                                   q1.right < q2.left ||
                                   q1.top > q2.bottom ||
                                   q1.bottom < q2.top);
            var isContain = inside(q2, q1) || inside(q1, q2);
            if(isIntersecting || isContain){
                isOverlaping=true;
            }
        }
        return(isOverlaping);
    }
    movement();

    //clear the canvas for redrawing

    document.getElementById('clear').addEventListener('click', function () {
        rect = [];
        console.log(rect);
        ctx.clearRect(0, 0, canv.width, canv.height);
    }, false);
</script>

Answer 1

你可以通过鼠标移动来解决这个问题。以前你正在清理它，但从不重绘鼠标移动。我修改了颜色的分配方式，这里显示了它的工作原理：https://jsfiddle.net/7xrgrqwx/2/

function make() {
  for (var i = 0; i < rect.length; i++) {
    var q = rect[i];
    ctx.fillStyle = q.color;
    ctx.fillRect(q.left, q.top, q.right - q.left, q.bottom - q.top);
  }
}

function mouseMove(event) {

  if (move) {
    mouseX = parseInt(event.clientX - offsetX);
    mouseY = parseInt(event.clientY - offsetY);

    newRect = {
      left: Math.min(startX, mouseX),
      right: Math.max(startX, mouseX),
      top: Math.min(startY, mouseY),
      bottom: Math.max(startY, mouseY),
      color: randomColour(),
    }
    ctx.clearRect(0, 0, canv.width, canv.height);
    ctx.strokeRect(startX, startY, mouseX - startX, mouseY - startY);
    make();
  }
}

每次我拖动画布清除

1 个答案: