画布图的动态缩放

Question

我正在制作一个画布JS应用程序以方便绘制图形，它是一个个人项目。

我现在遇到的一个问题是缩放要显示的变量。

例如，用户输入一组点，它们可以是任何数字。我不能总是以1：1的比例绘制每一点的图。想象一下600x600的画布和（1000,1000）和（1,1）的值。你将不得不做一些缩放/修改来决定这些点应该放在图表上的位置。

如何动态调整这样的数字，让他们坐在合理的地方？有解决这个问题的常用方法吗？

Answer 1

是的，您可以将源值“映射”到指定范围内。

这mapRange功能可以扩展/ 1000×1000的值映射到你的600×600的画布

// Given low,high values of the source(1000,1000) 
// Given low,hight values of the mapped numbers (600,600) 
// and given a value to map from the source to the destination range (value) 
// map the source value into a designated range 

function mapRange(value, sourceLow, sourceHigh, mappedLow, mappedHigh){ 

    return mappedLow + (mappedHigh - mappedLow) * 
      (value - sourceLow)/(sourceHigh - sourceLow); 

}