穿插 KineticJS 和 jQuery 事件

Question

我正在寻找使用 KineticJS 和 Canvas 构建一个简单的照片拼贴。 在画布容器中，我有预定义的图像区域。 我也有（在 DOM 和画布容器外部），我想拖放到画布上的图像井中的一条图像。 我能够拖动图像并将其很好地捕捉到（硬编码）图像，但是当图像在画布上移动时，我无法获得 x 和 y 坐标。 我试过使用 jQuery 的拖动/拖动事件，但它对画布视而不见，我试过使用 KineticJS 的拖动功能，但我无法获得 DOM 图像的 x 和 y。 这个想法是知道被拖动的图像的 x,y 我可以编写一些逻辑来确定它应该被捕捉到哪个图像位置 - 而不是硬编码它的目标。

甚至可以使用 KineticJS+jQuery 做到这一点 - 将图像从 DOM 拖到画布上并让它们卡入预定义的图像区域？ 或者，有没有更简单的方法？

Answer 1

据我了解你的问题，我试图重现它，但没有看到任何困难

    <div width="600" height="500" style="background-color:green;padding-left:60px" id="wrap">
    <canvas id="a" width="300" height="225" style="background-color:yellow"></canvas>
</div>
<img id="dragMe" src="http://www.linuxmint.com/img/logo.png"/>
<div id="log">
    <span class="a"></span>
    <span class="b"></span>
    <span class="c"></span>
        <span class="d"></span>
</div>

$("#wrap").mousemove(function(e){
  var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
  var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
  $("#log > span.a").text("( e.pageX, e.pageY ) : " + pageCoords);
  $("#log > span.b").text("( e.clientX, e.clientY ) : " + clientCoords);
});
var p = $('#a').position();
$("#dragMe").draggable({
    drag: function(event, ui) {
        $("#log > span.c").text(  ui.offset.left+':' +ui.offset.top);
        $("#log > span.d").text( ( ui.offset.top-p.top)+':' +(ui.offset.left - p.left));
    }
});

http://jsfiddle.net/agj3N/1/

Answer 2

当我问你是否有理由在 KineticJS 阶段之外拥有图像条时，你回答说：

只是因为当我使用它（用于保存和调用以供将来编辑）时，我只想要照片拼贴上的图像，而不是条带上的照片。

我对此的回答是：

您不必在整个阶段都使用 toJSON。

如果您将照片带（以前在画布外部）与拼贴画（以前在画布内部）分开到不同的层中，那么您可以有两个层，并且仅在其中一个层上使用toJSON ！

结果将是toJSON只会序列化来自给定层的对象，这听起来像您所需要的。

jsfiddle - 这是一个示例来说明我的意思，请原谅我将图像捕捉到组的糟糕逻辑。 我有 2 层： photoStripLayer和collageLayer

1. 单击拼贴 toJSON 按钮。 请注意，console.log 输出不包括任何图像。 这是因为collageLayer内部只有一个具有子矩形的组。

2. 将第一个尤达（左上角，其余不起作用，这只是一个示例）拖到红色框中。 抱歉，您必须尝试使用​​它才能正确捕捉（我假设您已经有了“捕捉”代码）

3. 在dragend如果 Yoda 节点在红框内，它将使用 KineticJS 的moveTo函数从photoStripLayer --> collageLayer移动 yoda。 当 Yoda 捕捉到相对于新组的位置 (0,0) 时，您就会知道它起作用了。

4. 现在单击 Collage toJSON 按钮。 请注意，yoda 图像现在是 toJSON console.log 输出的一部分。 yoda 被移动到新组，它是collageLayer的孩子。 现在是 collageLayer 的一部分，Yoda 是.

这是dragend代码：

             node.on('dragend', function () {
                var pos = stage.getMousePosition();
                var X = pos.x;
                var Y = pos.y;
                var minX = snap.getX();
                var maxX = snap.getX() + snap.getWidth();
                var minY = snap.getY();
                var maxY = snap.getY() + snap.getHeight();
                if (node.getX() < minX) {
                    node.moveTo(snap);
                    node.setX(0);
                    node.setY(0);
                }
                if (node.getX() > maxX) {
                    node.moveTo(snap);
                    node.setX(0);
                    node.setY(0);
                }
                if (node.getY() < minY) {
                    node.moveTo(snap);
                    node.setX(0);
                    node.setY(0);
                }
                if (node.getY() > maxY) {
                    node.moveTo(snap);
                    node.setX(0);
                    node.setY(0);
                }
                photoStripLayer.draw();
                collageLayer.draw();
            });

和按钮单击代码来说明使用 toJSON：

            function collageToJSON() {
                var cjson = collageLayer.toJSON();
                console.log(cjson);
                /* To illustrate, you can also call toDataURL here. But in JSFiddle I think it throws a Security Error.
                collageLayer.toDataURL({
                    callback: function(dataUrl) {
                        window.open(dataUrl);
                    }
                });
                */
            }

            document.getElementById('CtoJSON').addEventListener('click', function () {
                collageToJSON();
            });

你有它！ 通过让KineticJS处理整个过程来解决这个问题。