Question

我试图在可拖动的舞台上保持舞台静止且不可拖动。

到目前为止，当用户通过捕捉dragmove -event（没有视觉问题）拖动舞台时它会起作用，但是因为我打算用一些平滑的缓动完成整个滑动两个Kinetic.Tween到它（jsFiddle可以通过按“开始补间”到达）。

他们的工作做得很好，但正如你在我的例子中可能看到的那样，两个补间的执行都有一点延迟，导致绿色矩形在执行过程中颤抖。

有没有办法摆脱执行中的这个小延迟，或者我怎样才能获得舞台的更新x值来重新计算绿色矩形x，就像我在dragmove中所做的那样事件？

非常感谢任何形式的帮助。

Answer 1

我不知道你的真实场景，但如果你将静态对象留在不同的层中，而不是补间整个阶段，只补间特定的图层，在这种情况下，包含背景的图层。

var stage = new Kinetic.Stage({
    container: 'container',
    width: 400,
    height: 400
    // <-- remove drag function
});

var background = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: stage.getWidth(),
    height: stage.getHeight(),
    fill: '#FF0000'
});

var layer = new Kinetic.Layer({
    draggable: true,
    dragBoundFunc: function (pos) { // <-- added drag function here
        return {
            x: pos.x,
            y: this.getAbsolutePosition().y
        }
    }
});
var layer2 = new Kinetic.Layer(); // create new layer

layer.add(background);
stage.add(layer);

var rect = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4
});

layer2.add(rect); // <-- added rect on layer2
stage.add(layer2); // <-- added layer2 to stage

layer.drawScene();
layer2.drawScene(); // <-- draw layer2

stage.on('dragmove', function () {
    var dx = stage.getX();
    rect.setX(-dx);
});

document.getElementById("button").onclick = function () {
    new Kinetic.Tween({
        node: layer, // <-- changed stage to layer 
        x: -300,
        duration: 0.5,
        easing: Kinetic.Easings.EaseInOut
    }).play();

    // rect tween removed
};

Answer 2

我发现如何通过向xChange属性添加eventlistener来解决我的问题，这让我可以使用我在var dx = stage.getX(); rect.setX(-dx)期间使用的dragmove计算更新阶段的x值。

两个Kinetic.Tween不会在同一时间执行||在Tween期间获取更新的x值

2 个答案: