Question

我正在使用KineticJS，到目前为止，这是一次很棒的体验。我有一个问题是关于拖延。我将此示例中的图像设置为'draggable：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成为标准，它可能得到很好的支持：）

同时，我不建议使用canvas转换。除非你构建自己的框架，否则很难通过canvas转换来完成所有事情。

拖动后KineticJS可拖动图像卡住

1 个答案: