0

dragBoundFuncを使用している場合、新しいポイントへのトランジションを使用するにはどうすればよいですか？

次のようなdragBoundFuncを使用した長方形があるとします。

rect = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 100,
        height: 50,
        id: 'yellow',
        name: 'rect',
        fill: 'yellow',
        stroke: 'black',
        strokeWidth: 4,
        draggable: true,
        dragBoundFunc : function(pos) {
        return {
            y : Math.round(pos.y/60)*60,
            x : this.getX(),
        }
    }
    });

このrectをドラッグするときに、どうすればスムーズに移行できますか？

編集：私はこれまでにやったことでフィドルを作成しました。ご覧のとおり、長方形を別の長方形にドラッグすると、スムーズな遷移が実行され、何が起こっているかについてユーザーにフィードバックが提供されます。私が欲しいのは、rectをドラッグするときもスムーズな遷移のこのフィードバックです。つまり、移動自体は、新しい位置への突然のジャンプではなく、遷移です。

4

2 に答える 2

0

オブジェクトをゆっくりとドラッグするのがいいと思いますが、それがどのように役立つのだろうかと思います。

ドラッグとトランジションは異なる概念を使用します。

ドラッグは同期的であり、介入するとすぐに実行されるようにします。

移行は非同期であり、すぐには発生しないようにしますが、システムは一定期間後に移行を実行します。たとえば、トランジションを1秒間に設定すると、介入なしで1秒間発生します。自動が非同期であると考えることができます。

アニメーション効果でドラッグしたい場合は、ドラッグ機能を使用せずに、マウスイベントのいくつかの組み合わせを使用することをお勧めします。mouseclick、mousemove、およびmouseup。

しかし、私はまだその有用性に疑問を持っています。興味があれば、試してみてください。

于 2013-02-24T17:35:04.083 に答える
0

これまでのところ非常に素晴らしいjsfiddleであり、構造も整っています。したがって、実行したいのは、ドラッグバウンド関数ロジックを次のドラッグエンドイベントに移動することです。

dragBoundFunc: function (pos) {
    return {
        y: Math.round(pos.y / 60) * 60, //<---- move the grid logic to a transition event to be fired on dragend
        x: this.getX(),
    }
}

グリッドの動きを垂直方向に60ピクセルごとに制限するように定義しました。dragBoundFuncで垂直方向のみの移動を許可してから、ドラッグエンドで長方形をグリッドに遷移させる必要があります。

于 2013-02-25T00:55:06.797 に答える