穿插KineticJS和jQuery事件

Question

我想用KineticJS和Canvas制作一个简单的照片拼贴。在画布容器中，我有预定义的图像区域。我还有（在DOM中和画布容器外）一条图像，我想将其拖放到画布上的图像井中。我可以很好地拖动图像并将其捕捉到（硬编码的）图像，但当图像在画布上移动时，我无法获得x和y坐标。我试过使用jQuery的拖放事件，但它对画布是盲目的，我也试过使用KineticJS的dragov函数，但我无法获得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

如果将Photo Strip（以前在画布外部）与Collage（以前在帆布内部）分离到不同的层中，则可以有两个层，并且仅在其中一个层上使用toJSON！

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

jsfiddle-这里有一个例子来说明我的意思，原谅我把图像捕捉到组中的糟糕逻辑。我有两层：photoStripLayer和collageLayer

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

2. 将第一个yoda（左上角，其余部分不起作用，这只是一个例子）拖到红框中。很抱歉，你必须玩这个才能正确地捕捉（我假设你已经有了"捕捉"代码）

3. 在dragend上，如果Yoda节点在红框内，它将使用KineticJS的moveTo函数将Yoda从photoStripLayer->collageLayer中移动。当Yoda捕捉到相对于新组的位置（0,0）时，您就会知道它是有效的。

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

这是拖拽代码：

             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处理整个过程可以解决这个问题。