在画布元素 html5 中创建多个可拖动矩形

Create multiple dragable rectangle in canvas element html5

本文关键字：创建 拖动 html5 布元素 元素      更新时间：2023-09-26
$(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();

});

这就是我到目前为止所拥有的，但是当我创建另一个矩形时，最后一个矩形会自动删除。我需要装箱多个矩形并使它们能够在画布内拖动。

使用 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();

我想你需要将每个矩形存储在一个数组中，每次调用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
 }

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

祝你好运！

相关文章：