html 캔버스의 배율 조정

Question

에는 m x n 캔버스에 그려지는 점 집합을 스케일 한 다음 p x q 캔버스에 해당하는 점 집합을 다시 그리는 방법이 있습니다. p <m 및 q < n? 나는 좌표를 스케일하는 방법이 옵션이되어야한다는 것을 알고 있지만 이것을하기위한 다른 방법이 있습니까?

Answer 1

는 스케일 팩터 (들)을 결정하고 이에 따라 각 지점 승산 등이 간단하지가 미리

감사? 두 캔버스가 높이/너비 비율을 공유한다고 가정하면 축척 비율은 p/m이며 각 점의 좌표를 곱하여 새 캔버스에 매핑 할 수 있습니다. 비율이 동일하지 않으면

, 당신은을 확장 할 수 q/n을 서로 원 포인트의 비율을 유지하기 위해 p/m 또는 q/n의 작은 요소를 사용하거나 x 축 크기를 조절하는 데 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 
         }; 
        });