Question

我希望在一个画布中有不同的可放置区域，可以在此链接上看到一个示例http://custom.case-mate.com/diy?bypassLandingPage=true#design/iphone5_barelythere 我想将图像拖放到同一画布的不同部分。

检查链接后，有人能告诉我他们是怎么做到的吗？

Answer 1

您首先要做的是在数组中定义要在画布上本地用作拖放区的区域。

从那里只需检查在为画布调整的放置事件中收到的鼠标客户端位置：

/// some random regions to check against
regions = [[0, 0, 100, 100],
           [120, 50, 100, 100],
           [30, 230, 100, 100],
           [300,300,100,100]],

/// this is used to adjust mouse pos. later
rect = canvas.getBoundingClientRect(), ...

设置画布以处理放置事件：

canvas.addEventListener('dragover', fileDragOver, false);
canvas.addEventListener('drop',     fileSelect,   false);

当您现在将文件拖放到画布上时，您可以检查所有内容 - 这里我们为删除的文件（如果有）的区域绘制随机填充颜色：

function fileSelect(e) {

    e.stopPropagation();
    e.preventDefault();

    /// adjust mouse position relative to canvas       
    var x = e.clientX - rect.left,
        y = e.clientY - rect.top;

    /// iterate the regions
    for(i = 0; r = regions[i]; i++) {

        /// are mouse in a region?
        if (x >= r[0] && x < r[0] + r[2] &&
            y >= r[1] && y < r[1] + r[3]) {

            /// if so, fill that region
            ctx.fillStyle = 'rgba(' +
                parseInt(255 * Math.random(), 10) + ',' +
                parseInt(255 * Math.random(), 10) + ',' +
                parseInt(255 * Math.random(), 10) + ',' +
                '0.5)';

            ctx.fillRect(r[0], r[1], r[2], r[3]);

            /// ... do something else
            breaK;
        }
    }

}

这是一个工作示例（删除框中的一些文件）：

的 ONLINE DEMO

在一个画布HTML5中设置不同的可放置区域

1 个答案: