KineticJS 可拖动图像在拖动后卡住

Question

我正在使用 KineticJS，到目前为止，这是一次很棒的体验。我的一个问题是关于拖动。我将此示例中的图像设置为“可拖动：true”，但在我第一次拖动后，它无法再次移动。

var stage = new Kinetic.Stage({
    container: 'container',
    width: 2754,
    height: 1836
});
var layer = new Kinetic.Layer();
var scale = '0.16339869281045751633986928104575';
var imageObj = new Image();
imageObj.onload = function () {
    var img = new Kinetic.Image({
        x: 0,
        y: 0,
        height:612,
        width:612,
        image: imageObj,
        draggable: true,
        dragBoundFunc: function (pos) {
            console.log(img.getAttrs());
            return { 
                x: Math.floor((pos.x/scale)/306)*306,
                y: Math.floor((pos.y/scale)/306)*306 
                };
        }
    });

    // add the shape to the layer
    layer.add(img);

    // add the layer to the stage
    stage.add(layer);

};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';

http://jsfiddle.net/7UEC6/

感谢任何帮助。对于额外的功劳，您可以提出使拖动更顺畅的方法。

谢谢！

编辑：我注意到在初始时间拖动图像后，当用户尝试拖动图像时不再调用dragBoundFunc

如果我将图像拖回 0,0 但没有其他时间，它也可以工作

Answer 1

这在当前的 KineticJS 中是不可能的。

让我试着解释一下原因。

当你使用 transform:scale，它是 CSS3 元素（还不是标准的），实际元素的视觉位置也会被缩放。但是 MouseEvent 的相对鼠标位置只传递视觉位置（不是缩放位置）。

KineticJS使用的拖动鼠标点击事件，只读取MouseEvent位置，是可视的（不是缩放的），不考虑canvas元素的变换。

当您将图像 x/y 设置为跟随时，您甚至无法进行第一次拖动

    x: 612,
    y: 612,

但是当你设置它为0和0时，它会响应它，因为缩放和未缩放的位置是相同的。

对于上面的例子x/y 612和612，不能点击拖动， 因为 KineticJS 理解它，因为您没有点击 612 和 612， 但它认为它是 100 和 100

原因很简单，正如我解释的那样。

MouseEvent 不传递缩放后的 X/Y，而是传递 X/Y 的视觉位置。

谁知道CSS3什么时候成为标准，它可能会得到很好的支持:)

同时，我不建议对画布使用转换。除非您构建自己的框架，否则很难通过转换画布来正确地做出所有事情。