2

PANを使用してRaphael.js2.0で基本的なズーム/パン効果を得るのに問題はありませんでした：

set = ( // set of elements, contained in a rectangle)
var start = function () {
        set.oBB = set.getBBox();
},
move = function (dx, dy) {
        var bb = set.getBBox();
                set.translate(set.oBB.x - bb.x + dx, set.oBB.y - bb.y + dy);
},
up = function() { // do stuff };
set.drag(move, start, up);

とズーム：

//before 
paper.setViewBox(0,0, 500,500, false);
//after
paper.setViewBox(0,0, 200, 200, false);

しかし、私はこれに関して2つの大きな問題を抱えています。これは、ラファエルが作成したsvgオブジェクト用であり、画像用ではありません...

  • まず、ズーム後のパンは「スムーズ」ではありません。少しドラッグすると、長方形が大きく動きます。進むほど動きが悪くなります。ズームしたときにドラッグをスケーリングできますか？
  • 次に、ズームした長方形をパンしてもビューポートから移動できないように配置するにはどうすればよいですか？jqueryでは、制約を使用してこれを行うことができ、上記のset.translate関数を試して制約を含めようとしましたが、どこにも到達していません...

何かアドバイスをいただければ幸いです。そうでなければ、Raphael.jsでこれを行うためのライブラリがすでに存在しますか？上記の私の問題のどちらにも対処していないように見えるraphael-spzを見ました。

私が欲しいのは基本的にこのhttp://dannyvankooten.com/demo/draggable-image-map-with-zoom/ですが、Raphael用です。彼はドラッグ可能なjqueryuiを使用しています...これはRaphaelでは機能しないようです。

ありがとう！

4

1 に答える 1

2

ビューボックスをスケーリングしたため、ドラッグ値もスケーリングする必要がある場合があります。境界を計算するには、次のようにビューポートと比較するだけです。

move = function (dx, dy) {
        var bb = set.getBBox(),
            //Move relative to viewport scale
            x = dx/scale,
            y = dy/scale,
            //Lower bounds
            xf = Math.max(0, set.oBB.x - bb.x + x),
            yf = Math.max(0, set.oBB.y - bb.y + y);
         //upper bounds
         xf = Math.min(viewBoxWidth, xf + bb.width) - bb.width;
         yf = Math.min(viewBoxHeight, yf + bb.height) - bb.height;

         set.translate(xf, yf);
}

scaleビューボックスが紙とは異なるという要因です。すなわち（200/500)

于 2012-06-04T19:22:05.357 に答える