HTML5キャンバスで画像を拡大する

Question

キャンバスに描画したい画像を表すオブジェクトがいくつかあります。各オブジェクトにはX、Y、Scaleプロパティと、キャンバスオブジェクトを渡すレンダリングメソッドがあります。キャンバスタグは各オブジェクトのレンダリングメソッドに渡され、キャンバスタグはすべてキャンバスにレンダリングする必要があります。

私が問題にしているのは、スケーリングがキャンバスの原点であり、イメージの原点ではないということです。これを修正するために、私は次のことを試してみた：

canvas.translate(-this.X, -this.Y); 
canvas.scale(this.Scale, this.Scale); 
canvas.translate(this.X, this.Y); 

上記のコードに問題があなただけの1本の翻訳と元の位置にオブジェクトを移動することになっている3行目を持つことができるように見えるということですdrawImageを呼び出すときの翻訳になります。私が3行目を削除すると、正しい拡大縮小元が得られますが、イメージは0,0に移動され、正しい位置にレンダリングされません。

このタイプのスケーリングを行う適切な方法は何ですか？

Answer 1

試してください：あなたはimagensの幅と高さを得た場合

canvas.translate(this.X, this.Y); 
canvas.scale(this.Scale, this.Scale); 
canvas.translate(-this.X, -this.Y); 

しかし、これをやって、覚えておいて、あなたは、単純なドンますので、ctxt.drawImage(this.image, this.X, this.Y, this.Width*this.Scale, this.Height*this.Scale);を行うことができctxt.save(); sおよびctxt.restore();秒の多くを行う必要がありますコンテキスト・ステート・スタックを混乱させる必要はありません。

編集：

変換は原点には影響しません。彼らはreverse orderに申請しなければなりません。このメソッドは、変換スタックに行列を積み重ねるための単なるショートカットであることを覚えておいてください。