如何將圖像拖動到dynamic.js外部並將其放入，然后像圖像一樣，或作為矩形的圖案

Question

我給的圖片是這樣的：

<img src = "images/dress_1.jpeg" draggable="true" ondragstart="drag(event)" />

並給定動力學分度：

<div id="container" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
// of course in <script>
var stage = new Kinetic.Stage({
    container: 'container',
    width: 600,
    height: 600,
});

我有一個以圖像為圖案的矩形，例如：

var rectArea_1 = new Kinetic.Rect({
    fillPatternImage: images.topLeft, //in sources, {topLeft: 'http://...', ...}
});

然后在js中：

function allowDrop(ev)
{
    ev.preventDefault();
}
function drag(ev)
    {
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
    ev.preventDefault();
    data = ev.dataTransfer.getData("Text");
    img_received = document.getElementById(data);

}

對於放置函數，我想是否要添加兩行，如下所示：

function drop(ev)
{
        ev.preventDefault();
        data = ev.dataTransfer.getData("Text");
        img_received = document.getElementById(data);
        sources.topRight = img_received.src;
        loadImages(sources, function(images) {draw(images);});

}

它將起作用，但是我試圖將最后兩行放進去：

rectArea_2.on('dragend', function() {
    sources.topRight = img_received.src;
    loadImages(sources, function(images) {draw(images);});
});

但這行不通。 有什么建議么？ 謝謝

Answer 1

Kinetic dragend處理程序不偵聽非Kinetic拖放事件。

取而代之的是，在拖動並釋放Kinetic對象時，將觸發Kinetic后端。

您是否在嘗試將外部元素直接放在動力學矩形上？

如果是這樣，您需要偵聽#container上的drop事件（如上所示）。

然后獲取被刪除的元素（與您一樣）。

然后獲取該放置元素的當前位置，並在舞台上對rect進行命中測試。

最后，您可以從放置的元素創建一個Image（）對象，並為命中矩形填充圖案。

[其他細節]

要獲得鼠標放置位置：

    var c=document.getElementById("container");
    var x=event.pageX-c.offsetLeft;
    var y=event.pageY-c.offsetTop;