0

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

检查链接后，有人可以告诉我他们是如何做到的吗？

4

1 回答 1

0

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

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

/// 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

于 2013-07-31T20:21:02.723 回答