1

我正在使用 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 但没有其他时间，它也可以工作

4

1 回答 1

2

这对于当前的 KineticJS 是不可能的。

让我试着解释一下原因。

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

KineticJS 使用的用于拖动的鼠标单击事件仅读取 MouseEvent 位置，这是可视的（不是缩放的），它不考虑画布元素的转换。

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

    x: 612,
    y: 612,

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

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

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

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

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

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

于 2013-03-02T00:20:02.070 回答