javascript - 散布 KineticJS 和 jQuery 事件

Question

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

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

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/