HTML5キャンバスでスムーズにパターンイメージを拡大/縮小する方法は？

Question

私はsetTransformを使って私の背景パターン画像を拡大しています。スケールは1から開始し、スケールが0.01になるたびに0.5に達するまで開始します。アップデートで

context.setTransform(scale, 0, 0, scale, position.x, position.y); 

：だからここ

は、スケーリングコードで上記のコードを使用し

scale -= 0.01; 

Iは、地紋画像は、スケーリングされたパターン画像に置き換えられた変更をアニメーション化するとき正しくしかし、移行はそれほど滑らかではありません。短時間で他の画像に突然現れた画像が目立ちますが、目立つように動作します。交換をよりスムーズかつ目立たないようにしたいが、その効果をどのように達成するかはわからない。

Answer 1

あなたが代わり要するにsetTransform()

ctx.translate(pt.x,pt.y); 
ctx.scale(factor,factor); 
ctx.translate(-pt.x,-pt.y); 

のtranslate()を使用することができ、あなたのオフセットにより、キャンバスコンテキストをtranslate()したい、 scale()それは バックまたはズームアウトして、translate()しますマウスのオフセットの反対側。 カーソル位置をスクリーンスペースから変換されたキャンバスコンテキストに変換する必要があることに注意してください。

詳細情報とライブサンプルについては、thisを参照してください。使用することができ

Answer 2

のsetTransform

最初の2つの数字は、x軸の方向と長さ（スケール）であり、次の二つがy軸の方向と長さであり、最後の二つの場所であります起源

あなたに復元する必要がある場合は、軸方向その後

var scale = ? 
var originX = ? 
var originY = ? 
var rotation = ? 
// get the x axis direction and length 
var xdx = Math.cos(rotation) * scale; 
var xdy = Math.sin(rotation) * scale; 
// if you are not skewing then the y axis is at 90deg so x is neg y and y is x 
ctx.setTransform(xdx,xdy,-xdy,xdx,originX,originY); 

を計算してのsetTransformで回転を設定することができます

var scale = ? 
var originX = ? 
var originY = ? 
var rotation = ? 
ctx.setTransform(scale,0,0,scale,originX,originY); 
ctx.rotate(rotation); 

や翻訳、スケール、および回転を設定する最も簡単な方法デフォルトの変換

ctx.setTransform(1,0,0,1,0,0); // restore default transform 

setTransformのすべての値は、π xelsとset transformは、レンダラーがピクセルを作成する場所と形状を基本的に記述します。0,

パンとズームを平滑化します。

この答えは、マウスを使用してマウスを使用してsetTransform（保存の復元を使用する必要はありません）で画像を拡大/縮小する実例を示しています。さらに、ズームとパンをスムーズにする方法を示します。Pan and Zoom