javascript - ドラッグ中の壁とのRaphael JS衝突検出

javascript svg raphael

Raphaelで図形をドラッグするための次のコードがあります。

var start = function() {
        this.ox = 0;
        this.oy = 0;
        self.bringToFront();
    },
    move = function(dx, dy) {
        var a = self.getAngle(self.rotation),
            bb = self.shape.getBBox();

        switch(a){
            case 90:
                self.shape.translate(dy - this.ox, this.oy - dx);
                this.ox = dy;
                this.oy = dx;
                break;
            case 180:
                self.shape.translate(this.ox - dx, this.oy - dy);
                this.ox = dx;
                this.oy = dy;
                break;
            case 270:
                self.shape.translate(this.ox - dy, dx - this.oy);
                this.ox = dy;
                this.oy = dx;
                break;
            default:
                self.shape.translate(dx - this.ox, dy - this.oy);
                this.ox = dx;
                this.oy = dy;
        }
    },
    end = function() {
    };


(self.shapeはパスとレクタのラファエルセットです)

SVGキャンバス領域の外に図形をドラッグできないようにしようとしています。現時点では、bb関数のmove変数である形状の境界ボックスの座標を取得できます。 if(bb.x < 10)...のチェックを追加しようとしましたが、「これ以上左に移動させないでください」という制約を設定する方法がわかりません。バウンディングボックスのxの位置を確認しているが、形状のx位置を制約しようとしているのは問題ですか?
答え
これ自体は答えではありませんが、正しい方向に向ける必要があります。

dragのraphael 2.0リファレンスを確認してください

横にある画像は、まさにあなたが必要とするものを正確に実行しています。その背後にあるコードはreference.jsファイルにあります。 「Element.drag-extra」を検索すると、次のコードが表示されます

(function (r) {
    var x, y;
    r.circle(15, 15, 10).attr(fill).drag(function (dx, dy) {
        this.attr({
            cx: Math.min(Math.max(x + dx, 15), 85),
            cy: Math.min(Math.max(y + dy, 15), 85)
        });
    }, function () {
        x = this.attr("cx");
        y = this.attr("cy");
    });

})(prepare("Element.drag-extra"));


ここで、Dmitryは最小15から最大85 pxの間のドラッグを制限しています。小さなDOMマジックを使用してキャンバスのサイズを見つけ、それに応じて上記のコードを変更することができるはずです。

少しお役に立てば幸いです。
関連記事

javascript - $ .eachは1つのシリーズのハイチャートのみを表示します

javascript - キャンバスのセクションを(グリッドに基づいて)再描画する

javascript - Pythonを使用してGoogle App EngineにjQueryオートコンプリートを実装するにはどうすればよいですか?

javascript - 検索テキストボックスに基づいて行を表示/非表示

java - Java Scripting Engineクラスのインスタンス化

javascript - ScrollToスクリプトでスクロールするときにページのちらつき/途切れを防ぐ方法はありますか?

javascript - iframeを取得するための正しいJavaScript関数とは

javascript - JavaScriptでのXMLのクエリ

javascript - javascript:WebForm_DoPostBackWithOptionsをデバッグするにはどうすればよいですか?

javascript - Rhino JSインタープリターとSpiderMonkeyインタープリター-異なる戻り値