この記事では主に、キャンバスの変換行列を設定することでキャンバスの拡大縮小を実現する方法を紹介します。
最初のステップは、マウス ホイール イベントをリッスンすることです。ホイール イベントでは、マウスのスクロールと前の変換に基づいて、コンテキストのズームと変換がリセットされます。コア コードは次のとおりです。
let delta = this.deltaInst; delta.bind('zoom', (data) => { delta._transform.scale.forEach((s, i) => { delta._transform.scale[i] *= data.delta > 0 : 1/2; }); オフセット X = data.x - delta._transform.translate[0]; delta._transform.translate[1]; delta._transform.translate[0] += -(data.delta > 0? 1 : -1/2)*offsetX; delta._transform.translate[1] -= (データ .デルタ > 0? : -1/2)*オフセットY;ここでは各ズームを２倍としているが、他のズーム倍率であってもよい。
最初のステップは、スクロールの方向に応じて現在のズーム率を 2 で乗算または除算することです。
2 番目のステップは、移動を計算することです。基本的な考え方は、新しいマウスの位置に基づいてキャンバス上の点を中心位置に拡大縮小するときに、同じ効果を達成するためにキャンバスを移動できる位置を計算することです。
では、refreshAll コードを見てみましょう。
let ctx = this.context; let 行列 = this.getTransformMatrix(); //ctx.translate(...this._transform.translate); ctx.scale(...this._transform.scale); if (!Array.isArray(shapes)) { 形状 = [形状] } 形状.forEach( (形状) => {形状.render(ctx);このコードは、まず、以前に計算されたスケール値スケールと変換値に基づいて変更行列を取得し、次に行列内の対応する値をコンテキストの変換メソッドに渡し、キャンバス上で指定された変換を実行してから、前のスケーリングを実行します。完全に一貫した描画操作により、スケーリング後と同じ効果が得られます~~
上記のコードでは、ctx.transform() を ctx.translate() メソッドと ctx.scale() メソッドに完全に置き換えることもできます。コードのコメント部分に示されているように、パラメーターは以前に計算された値です。
完全なコードは、github アドレス: https://github.com/helloheiley/delta にあります。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。