javascript - 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 设置为 following 时，你甚至不能进行第一次拖动

    x: 612,
    y: 612,

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

如上例x/y 612和612，不能点击拖动，因为 KineticJS 理解它，因为你没有点击 612 和 612，但它认为它是 100 和 100

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

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

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

与此同时，我不建议使用 Canvas 进行转换。除非您构建自己的框架，否则很难通过转换后的 Canvas 正确地制作所有东西。