0

我给出的图像是：

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

并给出动力学 div 之类的：

<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);

}

对于 drop 函数，我想如果我添加这样的两行：

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);});
});

但这不起作用。有什么建议么？谢谢

4

1 回答 1

0

Kineticdragend处理程序不侦听非 Kinetic 拖放事件。

相反，Kinetic dragend 会在 Kinetic 对象被拖动和释放时触发。

您是否尝试将外部元素直接放在 Kinetic rect 上？

如果是这样，您需要在#container 上监听 drop 事件（如上所示）。

然后获取被删除的元素（就像你做的那样）。

然后获取该放置元素的当前位置并针对舞台上的矩形进行命中测试。

最后，您可以从放置的元素创建一个 Image() 对象并填充匹配的矩形。

[其他细节]

要在放置时获取鼠标位置：

    var c=document.getElementById("container");
    var x=event.pageX-c.offsetLeft;
    var y=event.pageY-c.offsetTop;
于 2013-09-07T06:16:17.637 回答