javascript - HTMLキャンバス上のポイントのスケーリング

Question

amxn Canvasで描画されたポイントのセットをスケーリングしてから、apxqキャンバスで同等のポイントのセットを再描画する方法はありますか？ここで、p<mおよびq<nですか？座標をスケーリングする方法はオプションであるべきだと知っていますが、これを行うための他の方法はありますか？

前もって感謝します

Answer 1

これは、スケールファクターを決定し、それに応じて各ポイントを乗算するのと同じくらい簡単ではありませんか？2つのキャンバスが高さ/幅の比率を共有していると仮定すると、倍率はp/mであり、各ポイントの座標を乗算して新しいキャンバスにマップできます。

比率が同じでない場合は、の小さい方の係数を使用するか、元のポイントの相互の比率を維持するか、x軸とy軸をスケーリングするために使用p/mできます。q/np/mq/n

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
                       }; 
                   });