我正在开发一个使用 Canvas 的图形类(在 javascript 中)。这仅用于实验/学习目的。目前，图表根据 Canvas 设置的高度和宽度正确缩放。这不是问题，这基本上就是我绘制正确坐标的方法[伪代码]。
point[0] = [10, 15]
point[1] = [20, 10]
point[2] = [30, 20]
point[3] = [40, 15]
canvas width = 300
max x = 40
so for any given point:
position x = ( point[i][0] / max x ) * canvas width
很简单。我得到一个比率，然后将其乘以 Canvas 宽度以将其绘制在正确的像素处。
然而，问题是提出一个方程，该方程会导致 x 的最小值位于图的 x 坐标上的 0 处，而最大值位于图的最大点处(它已经是因为我当前方程中的比例为 1:1)。当前 x 的最小值(示例中为 10)位于 x 坐标中的 75px，因为 1:4 的比例要乘以 Canvas 的宽度。
tldr/摘要: 我需要制作一个图表，其中最小值绘制在图表的开头(0,0)，最大值绘制在图表的末尾.
最佳答案
首先尝试计算每点像素宽度的值。
例如
widthPerPoint = canvasWidth / (maxX - minX)
然后你的位置可以通过减去最小值标准化为零:
position = widthPerPoint * (point[i][0] - minX)
第一个例子
widthPerPoint = 300 / (40 - 10) = 10
position = 10 * (point[i][0] - 10) = 10 * 0 = 0
对于其他人:
point[0] = [10, 15] -> 0
point[1] = [20, 10] -> 100
point[2] = [30, 20] -> 200
point[3] = [40, 15] -> 300
至少我认为这会起作用......
关于javascript - 图的数学方程，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7824378/