0

このコードを使用してカーソル ポイントをズームする方法はありますか? やる気が出ない。キャンバスはズームしますが、左上隅からのみズームインおよびズームアウトします。

var previousMousePosition = new Vector(0, 0);
function OnMouseWheel (event) {
    var delta = event.wheelDelta ? event.wheelDelta/40 : event.detail ? -event.detail : 0;
    var mousePosition = new Vector(event.clientX, event.clientY);
    var scaleFactor = 1.1;  
    if (delta) {
        var factor = Math.pow(scaleFactor,delta);
        context.scale(factor,factor);
    }
}
4

2 に答える 2

1

キャンバスは常に現在の原点からスケーリングされます。デフォルトの原点は [0,0] です。

別のポイントからスケーリングする場合は、最初にcontext.translate(desiredX,desiredY);. これにより、キャンバスの原点が [desiredX,desiredY] にリセットされます。

そうすれcontext.scaleば、指定した原点からスケーリングされます。

すべてのコンテキスト変換は後続のすべての描画に対して有効なままであるため、現在の描画が完了した後に変換を元に戻したい場合がよくあります (現在の変換を使用する/使用しない可能性がある次の描画の =='resetting')。変換を解除するには、負の引数を指定して変換を呼び出すだけです。context.scale(-factor,-factor). 変換は、元の変換とは逆の順序で行う必要があります。

したがって、リファクタリングされたコードは次のようになります。

// set the origin to mouse x,y
context.translate(mousePosition.x,mousePosition.y);

// scale the canvas at x,y
context.scale(factor,factor);

// ...draw stuff

// reverse the previous scale
context.scale(-factor,-factor);

// reverse the previous translate
context.translate(-mousePosition.x,-mousePosition.y);
于 2014-11-14T20:30:56.733 に答える