3

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

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

4

2 回答 2

0

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

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

我对此的回答是：

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

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

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

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

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

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

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

  4. 现在单击 Collage toJSON 按钮。请注意，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处理整个过程来解决这个问题。

于 2013-08-13T16:48:06.033 回答
0

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

    <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/

于 2013-08-09T15:48:52.553 回答