如何将图像拖动到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;