画布图的动态缩放

Question

我正在使用画布JS应用程序来促进图形化，它是一个个人项目。

我目前遇到问题的一个问题是缩放变量以便直观显示。

例如，用户输入一组点，这些点可以是任意数字。我不能总是按比例1：1比例图。想象一下600x600的画布和（1000,1000）和（1,1）的值。你必须做一些缩放/修改来决定这些点应放在图表上的哪个位置。

如何动态缩放这样的数字并将它们放在合理的位置？有没有解决这个问题的常用方法？

Answer 1

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

此mapRange功能可让您将1000x1000值缩放/映射到600x600画布

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

}