3

Raphael を使用して、長方形や円などの図形をいくつか描きました。ここ: http://jsfiddle.net/Ta8jQ/65/

ズーム機能は以下のとおりです。 

function doZoom(coords, factor) {
   //transform real coordinates into viewbox coordinates
   debugger;
   x =  Number(viewbox[0]) + Number(coords.x / zoom);
   y =  Number(viewbox[1]) + Number(coords.y / zoom);

   if (factor < 0) {
     factor = 0.95;
   } else {
      factor = 1.05;
   }

   var z = ((zoom || 1) * factor) || 1;
   zoom = z;

   //zoom viewbox dimensions
   viewbox[2] = bbox.width / zoom;
   viewbox[3] = bbox.height / zoom;

   //transform coordinates to new viewbox coordinates
   viewbox[0] = x - coords.x / zoom;
   viewbox[1] = y - coords.y / zoom;

   paper.setViewBox.apply(paper, viewbox,true);
 }

ビューポートを超えて描画された場合にすべての形状を表示する「画面に合わせる」ボタンがあります(つまり、表示されている描画領域) 。「第四の円」は中心が(-50,-50)の円です。したがって、[画面に合わせる] をクリックすると、すべての形状が表示されます。

また、ズームインとズームアウトはマウスホイールに実装されていますが、私が直面した問題は次のとおりです。[画面に合わせる]ボタンをクリックする前に、マウスホイールのズームイン/アウトは正常に機能します。しかし、[画面に合わせる]ボタンをクリックすると、任意のポイントでズーム..ズーム レベルに突然の変化があります.たとえば、最初にズーム アウトし、[画面に合わせる] をクリックして、マウス ホイールを使用して最初の円をズームしようとするとします.ズームは前の状態(ズーム アウト状態)です. .しかし、マウスポインタが現在のズームレベル（ズームのストレッチレベル）から最初の円を指しているので、最初の円をズームする必要があります。

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

4

0 に答える 0