如何将图像拖到动态之外.js并将其放入，然后像图像一样，或者作为矩形的图案

how to drag image outside kinetic.js and drop it in, then either be like a image, or as a pattern to a rect

本文关键字：图像 一样 或者 后像 动态 js 然后      更新时间：2023-09-26

我给图像sth如下：

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

并给出动力学div sth 如下：

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

但这行不通。有什么建议吗？感谢

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

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

您是否正在尝试将外部元素直接放在动力学矩形上？

如果是这样，则需要侦听 #container 上的 drop 事件（如上所述）。

然后获取已删除的元素（就像您所做的那样）。

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

最后，您可以从放置的元素创建一个 Image（） 对象并填充命中矩形。

[其他详情]

要获取鼠标在下降时的位置：

    var c=document.getElementById("container");
    var x=event.pageX-c.offsetLeft;
    var y=event.pageY-c.offsetTop;
相关文章：