已移动html5画布上已绘制的形状

Question

我在保留画布上的一个对象时遇到问题。最初绘制箱渲染它在正确的位置，但它消失时，我将它拖到：

var canvas = document.getElementById('canvas'), 
    context = canvas.getContext('2d'), 
    eraseAllButton = document.getElementById('eraseAllButton'), 
    strokeStyleSelect = document.getElementById('strokeStyleSelect'), 
    guidewireCheckbox = document.getElementById('guidewireCheckbox'), 
    drawingSurfaceImageData, 
    mousedown = {}, 
    rubberbandRect = {}, 
    dragging = false, 
    guidewires = guidewireCheckbox.checked, 
    w = 90, h = 90; 
    count = 0; 
    boxesXCo = 0; 
    boxesYCo = 0; 
    i = 0; 

// Functions.......................................................... 
function drawGrid(color, stepx, stepy) { 
    context.save() 

    context.strokeStyle = color; 
    context.lineWidth = 0.5; 
    context.clearRect(0, 0, context.canvas.width, context.canvas.height); 

    for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) { 
    context.beginPath(); 
    context.moveTo(i, 0); 
    context.lineTo(i, context.canvas.height); 
    context.stroke(); 
    } 

    for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) { 
    context.beginPath(); 
    context.moveTo(0, i); 
    context.lineTo(context.canvas.width, i); 
    context.stroke(); 
    } 

    context.restore(); 
} 

function windowToCanvas(x, y) { 
    var bbox = canvas.getBoundingClientRect(); 
    return { x: x - bbox.left * (canvas.width/bbox.width), 
      y: y - bbox.top * (canvas.height/bbox.height) }; 
} 

// Save and restore drawing surface................................... 
function saveDrawingSurface() { 
    drawingSurfaceImageData = context.getImageData(0, 0, 
          canvas.width, 
          canvas.height); 
} 

function restoreDrawingSurface() { 
    context.putImageData(drawingSurfaceImageData, 0, 0); 
} 


function drawRubberbandShape(loc) { 
    context.beginPath(); 
    context.moveTo(mousedown.x, mousedown.y); 
    //context.lineTo(loc.x, loc.y); 

    context.stroke(); 
} 

function updateRubberband(loc) { 
    //updateRubberbandRectangle(loc); 
    context.restore(); 
    drawRubberbandShape(loc); 
} 

// Guidewires......................................................... 
function drawHorizontalLine (y) { 
    context.beginPath(); 
    context.moveTo(0,y+0.5); 
    context.lineTo(context.canvas.width,y+0.5); 
    context.stroke(); 
} 

function drawVerticalLine (x) { 
    context.beginPath(); 
    context.moveTo(x+0.5,0); 
    context.lineTo(x+0.5,context.canvas.height); 
    context.stroke(); 
} 

function drawGuidewires(x, y) { 
    context.save(); 
    context.strokeStyle = 'rgba(0,0,230,0.4)'; 
    context.lineWidth = 0.5; 
    drawVerticalLine(x); 
    drawHorizontalLine(y); 
    context.restore(); 
} 

// Canvas event handlers.............................................. 
canvas.onmousedown = function (e) { 
    var loc = windowToCanvas(e.clientX, e.clientY); 

    e.preventDefault(); // prevent cursor change 
    context.restore(); 
    saveDrawingSurface(); 
    mousedown.x = loc.x; 
    mousedown.y = loc.y; 
    dragging = true; 
    if (i ==0) 
    i++; 
    else if(((mousedown.x<=(boxesXCo+w)&&(mousedown.x>=boxesXCo))&& 
        ((mousedown.y<=(boxesYCo+h)&&(mousedown.y>=boxesYCo))))) 
    i--; 

}; 

canvas.onmousemove = function (e) { 
    var loc; 

    if (dragging) { 
     e.preventDefault(); // prevent selections 

     loc = windowToCanvas(e.clientX, e.clientY); 
     restoreDrawingSurface(); 
     //updateRubberband(loc); 

     if(guidewires) { 
     drawGuidewires(loc.x, loc.y); 
     } 
    } 

    if(((mousedown.x<=(boxesXCo+w)&&(mousedown.x>=boxesXCo))&& 
        ((mousedown.y<=(boxesYCo+h)&&(mousedown.y>=boxesYCo)))) 
    && (dragging)&&(i == 1)){ 
     context.restore(); 
     restoreDrawingSurface(); 
     context.fillStyle = strokeStyleSelect.value; 
     context.fillRect(e.clientX,e.clientY,w,h); 


     }; 

    //Trying to implement moving shapes but need to store values of drawn objs 

}; 

canvas.onmouseup = function (e) { 
    loc = windowToCanvas(e.clientX, e.clientY); 
    restoreDrawingSurface(); 
    updateRubberband(loc); 
    dragging = false; 


     if(i == 0); 
     else { 
     saveDrawingSurface(); 
     restoreDrawingSurface(); 
     context.fillRect(e.clientX,e.clientY, w, h); 
     boxesXCo = e.clientX; 
     boxesYCo = e.clientY; 

     context.restore(); 
     i++;} 

     /*else if(i == 1) 
     { 
     context.restore(); 
     }*/ 




    //context.fillRect(mousedown.x,mousedown.y,w,h,"FF0982"); 
}; 

// Controls event handlers....................................... 

eraseAllButton.onclick = function (e) { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    drawGrid('lightgray', 10, 10); 
    saveDrawingSurface(); 
    count =0; 
    context.restore(); 
}; 

strokeStyleSelect.onchange = function (e) { 
    context.strokeStyle = strokeStyleSelect.value; 
    context.fillStyle = strokeStyleSelect.value; 
}; 

guidewireCheckbox.onchange = function (e) { 
    guidewires = guidewireCheckbox.checked; 
}; 

// Initialization................................................ 
context.strokeStyle = strokeStyleSelect.value; 
context.fillStyle = strokeStyleSelect.value; 
drawGrid('lightgray', 10, 10); 


//context.fillRect(mousedown.x,mousedown.y,(mousedown.x+50),(mousedown.x+50),"FF0982"); 
//context.drawRect(mousedown.x-50,mousedown.y-50,mousedown.x+50,mousedown.y+50); 

感谢名单再次

Answer 1

而不是绘图画布上的每个鼠标移动，使用window.requestFrameAnimation不断吸取。

在猜测，我会假设浏览器呈现干扰或坐标已经出来，但我不能运行你的代码来确保。

我写了一些伪代码，显示我为渲染事情做了些什么。你需要自己实现这个功能，它不会用完，它只是作为指导。

var Box = function() { 
}; 
Box.prototype = { 
    x: 0, 
    y: 0, 
    draw: function (canvas) { 
     // draw the item on the canvas 
    } 
}; 

var box = new Box(); 

window.requestAnimationFrame(function() { 
    box.draw(canvas); 
    window.requestAnimationFrame(); 
}); 

canvas.onmousemove = function(e) { 
    if (dragging) { 
     box.x = e.clientX; 
     box.y = e.clientY; 
    } 
}