javascript - Canvas 图的动态缩放

Question

我正在开发一个 Canvas JS 应用程序以方便绘图，这是一个个人项目。

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

例如，用户输入一组点，这些点可以是任意数字。我不能总是将每个点绘制成 1:1 比例的图表。想象一下 600x600 的 Canvas 以及 (1000,1000) 和 (1,1) 的值。您必须进行一些缩放/修改才能决定这些点应放置在图表上的位置。

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

Answer 1

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

此 mapRange 函数允许您将 1000x1000 值缩放/映射到 600x600 Canvas

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

}