javascript - Kinetic.js: ドラッグ可能なステージが境界外にならないようにする

Question

ゲームでミニマップとして使用するパン アンド ズーム キャンバスを作成しようとしています。ステージをドラッグ可能に設定して、プレーヤーがマウスで移動したり、ステージのレイヤー上の個々のオブジェクトを移動したりできるようにしました。ただし、ステージを周囲の白いスペースにドラッグできるようにしたくありません。言い換えれば、ズームインしている間だけパンを許可したいので、その空白に遭遇することはありません. ステージを制限しようとするために、dragBoundFunc を設定しました。

        dragBoundFunc: function(pos) {
            return {
                x: (pos.x < 0 ? 0 : pos.x > width ? width : pos.x),
                y: (pos.y < 0 ? 0 : pos.y > height ? height : pos.y)
            };
        }

(完全な JSFiddle の例: http://jsfiddle.net/4Brry/ )

私は2つの問題に遭遇しています:

• まず、キャンバスは依然として上方向と左方向に移動できます。

• 第 2 に、さらに厄介なことに、ズームを開始すると、制約が誤動作し始めます。ズームすると、制約はこの事実を考慮しません。では、ステージ オフセットを追加するとどうなるでしょうか。

          dragBoundFunc: function(pos) {
          return {
              x: ((ui.stage.getOffset().x+pos.x) < 0 ? 0 : pos.x > width ? width : pos.x),
              y: ((ui.stage.getOffset().y+pos.y) < 0 ? 0 : pos.y > height ? height : pos.y)
          };
      }
  

  (完全な JSFiddle の例: http://jsfiddle.net/2fLCd/ )

これははるかに優れていますが、行き過ぎるとビューが「元に戻る」ようになりました。許可されていない方向への移動を停止した方がよいでしょう。

これらの問題を解決する方法を知っている人はいますか?