htmlキャンバス上のスケーリング点

Question

mxnキャンバスに描かれた点の集合をスケールし、px qキャンバスに相当する点の集合を再描画する方法です.p < mとq < n？私は、座標を拡大する方法はオプションでなければならないことを知っていますが、これを行うための他の方法がありますか？予め

Answer 1

で

おかげで、これはスケール係数（S）を決定し、それに応じて各点を乗算するように単純ではないですか？ 2つのキャンバスが高さ/幅の比を共有していると仮定すると、倍率はp/mとなり、各点の座標を掛けて新しいキャンバスにマッピングすることができます。

比率が同じでない場合は、お互いに元の点の比率を維持するためにp/m又はq/nの小さな係数を使用するか、原寸に比例してx軸とq/nをスケーリングするp/mを使用しますかy軸。

など。 （mapと仮定してサポートされているか、同等のを作成しました）：

var points = [{x:1,y:1}, {x:2,y:5}, {x:3,y:1}]; 
var scaleFactor = canvas2width/canvas1width; 
var scaledPoints = points.map(function(p) { 
         return { 
          x:p.x*scaleFactor, 
          y:p.y*scaleFactor 
         }; 
        });