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

【问题标题】：Setting up different droppable area in one canvas HTML5在一个画布 HTML5 中设置不同的可放置区域
【发布时间】：2013-07-31 20:54:14
【问题描述】：

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

查看链接后，谁能告诉我他们是怎么做到的？

【问题讨论】：

标签： jquery html jquery-ui canvas fabricjs

【解决方案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

【讨论】：