在canvas元素中创建多个可拖拽的矩形html5

Question

$(document).ready(function() { 

    var canvas = document.getElementById('canvas'), 
    ctx = canvas.getContext('2d'), 
    rect = {}, 
    drag = false; 

    function init() { 
     canvas.addEventListener('mousedown', mouseDown, false); 
     canvas.addEventListener('mouseup', mouseUp, false); 
     canvas.addEventListener('mousemove', mouseMove, false); 
    } 

    function mouseDown(e) { 
     rect.startX = e.pageX - this.offsetLeft; 
     rect.startY = e.pageY - this.offsetTop; 
     drag = true; 
    } 
    function mouseUp() { 
     drag = false; 
    } 

    function mouseMove(e) { 
     if (drag) { 
      rect.w = (e.pageX - this.offsetLeft) - rect.startX; 
      rect.h = (e.pageY - this.offsetTop) - rect.startY; 
      ctx.clearRect(0, 0, canvas.width, canvas.height); 
      draw(); 
     } 
    } 
    function draw() { 
     ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h); 
    } 
    init(); 


}); 

这是我迄今为止的内容，但是当我创建另一个矩形时，最后一个矩形会自动删除。 我需要打包多个矩形，并使它们能够在画布内拖动。

Answer 1

我想你需要将每个矩形存储在一个数组中，并且每次调用draw()时都需要绘制所有这些矩形。

类似：

rects = []; 
rect = null; 

//onmouse down: 

rect = { x1 : <value from Mouse>,y1: <value from Mouse>,x2 : 0 ,y2 : 0 }; 

//onmouse up 

rect.x2 = <value from Mouse>; 
rect.y2 = <value from Mouse>; 

rects.push(rect); 
rect = null; 

//draw 

for(var i = 0; i < rects.length; i++) { 
    //drawing each rectangle 
} 

这仅仅是一种建议的办法。在坐标旁边，您还可以存储有关填充颜色，笔画宽度和样式等的信息。

祝你好运！

Answer 2

使用drawOldShapes（）方法，您可以保留旧的矩形。

var canvas = document.getElementById('canvas'), 
ctx = canvas.getContext('2d'), 
// ctx.globalAlpha = 0.5; 
rect = {}, 
drag = false; 
var rectStartXArray = new Array() ; 
var rectStartYArray = new Array() ; 
var rectWArray = new Array() ; 
var rectHArray = new Array() ; 

function init() { 
    canvas.addEventListener('mousedown', mouseDown, false); 
    canvas.addEventListener('mouseup', mouseUp, false); 
    canvas.addEventListener('mousemove', mouseMove, false); 
} 

function mouseDown(e) { 
    rect.startX = e.pageX - this.offsetLeft; 
    rect.startY = e.pageY - this.offsetTop; 
    drag = true; 
} 
function mouseUp() { 
    rectStartXArray[rectStartXArray.length] = rect.startX; 
    rectStartYArray[rectStartYArray.length] = rect.startY; 
    rectWArray[rectWArray.length] = rect.w; 
    rectHArray[rectHArray.length] = rect.h; 
    drag = false; 
} 

function mouseMove(e) { 
    if (drag) { 
     rect.w = (e.pageX - this.offsetLeft) - rect.startX; 
     rect.h = (e.pageY - this.offsetTop) - rect.startY; 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     draw(); 
    } 

    drawOldShapes(); 
} 
function draw() { 
    ctx.beginPath(); 
    ctx.rect(rect.startX, rect.startY, rect.w, rect.h); 
    ctx.stroke(); 
} 
function drawOldShapes(){ 
    for(var i=0;i<rectStartXArray.length;i++) 
    { 
     if(rectStartXArray[i]!= rect.startX && rectStartYArray[i] != rect.startY && rectWArray[i] != rect.w && rectHArray[i] != rect.h) 
     { 
      ctx.beginPath(); 
      ctx.rect(rectStartXArray[i], rectStartYArray[i], rectWArray[i], rectHArray[i]); 
      ctx.stroke(); 
     } 
    } 
} 
init();