0

ドラッグ可能なステージで、ステージを静的でドラッグできないようにしようとしています。

これまでのところ、ユーザーがイベントをキャッチしてマウスでステージをドラッグすると機能します(視覚dragmove的な問題はありません) 。 「トゥイーンを開始」を押すことによって）。Kinetic.Tween

彼らはかなりうまく仕事をしていますが、おそらく私の例でわかるように、両方のトゥイーンの実行に少し遅延があり、実行中に緑色の四角形が震えます.

実行のこの小さな遅延を取り除く方法はありますか、それともステージの更新された x 値を取得して、dragmoveイベントで行っているように緑の四角形 x を再計算するにはどうすればよいですか?

どんな種類の助けも大歓迎です。

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イベントリスナーをプロパティに追加するだけで問題を解決する方法を見つけました。これにより、ステージの更新された x 値で使用しているvar dx = stage.getX(); rect.setX(-dx)計算を使用できます。dragmove

于 2013-06-12T06:16:18.433 に答える