穿插 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 阶段之外拥有图像条时，你回答：

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

我的回答是：

您不必在整个舞台上都使用 toJSON。

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

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

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

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

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

3. 在dragend 上，如果Yoda 节点在红框内，它将使用KineticJS 的moveTo 函数将yoda 从photoStripLayer 中移出--> collageLayer。当 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 处理整个过程来解决问题。