0

Googleマップにあるように、グラフでズーム機能を実現したい。つまり、グラフがより明確になるように、マウスポインターの位置に基づいてマウスホイールイベントのスケールとともにグラフをズームしたい。

HTML5 と JavaScript を使用してそれを達成する必要があります。

誰でも同じことを教えてもらえますか？

何人かの人に聞いたところ、それを実現するにはベクトル グラフを使用する必要があるとのことでした。そうですか？

4

1 に答える 1

0

これを行うには、オフセットとズーム スケールが必要です。次に、描画するたびに、描画を適切に変換する必要があります。キャンバスはこれを簡単にします:

ctx.save();
ctx.translate(offset.x, offset.y);
ctx.scale(scale, scale);
// do your drawing
ctx.restore();

次に、適切なマウス イベントのハンドラーを追加します。マウス ホイールの場合、これはeventwheelになります。このようなイベントを受け取るたびに、新しいスケールを計算する必要があります。これは、たとえば次を使用して実行できます。

// Assuming 'ticks' is some standardized unit of measurement.
// You'll probably want to scale it differently based on event.deltaMode.
var newScale = scale * Math.pow(1.5, ticks);

次に、変換されていない位置を把握する必要があります。

// Assuming mousePos.x and mousePos.y are the position, relative to the canvas,
// of the mouse event. To untransform, first undo the offset and then undo the
// scale.
var untransformed = {
    x: (mousePos.x - offset.x) / scale,
    y: (mousePos.y - offset.y) / scale
};

次に、実験によって決定されたいくつかの魔法を実行します。

offset.x += transformed.x * (scale - newScale);
offset.y += transformed.y * (scale - newScale);

次に、スケールの変更を適用します。

scale = newScale;

それを試してみてください。(CoffeeScript で書かれており、スクロールではなくクリックを使用していますが、計算は同じです)

于 2013-01-24T06:08:18.633 に答える