0

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

到目前为止，当用户通过捕获dragmove-event 用鼠标拖动舞台时它可以工作（那里没有视觉问题），但是因为我打算用一些平滑的缓动来完成完整的滑动，所以我Kinetic.Tween在它上面附加了两个（在jsFiddle可达按“开始补间”）。

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

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

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

4

2 回答 2

0

我不知道您的真实情况，但是如果您将静态对象留在不同的图层中会更好，而不是补间整个舞台，而是仅补间特定的图层，在这种情况下，是包含背景的图层。

修改过的小提琴

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
};
于 2013-06-08T14:33:22.363 回答
0

我发现了如何简单地通过向属性添加事件监听器来解决我的问题xChange，这允许我使用我在更新var dx = stage.getX(); rect.setX(-dx)期间使用的计算dragmove阶段的 x 值。

于 2013-06-12T06:16:18.433 回答