Question

我正在使用canvas的图形类（在javascript中）。这仅用于实验/学习目的。目前，图表根据画布设置的任何高度和宽度正确缩放。这不是问题，基本上我正在做的是绘制正确的坐标[伪代码]。

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

够简单。我得到一个比率，然后乘以画布宽度将其绘制在正确的像素上。

然而，问题是提出一个等式，该等式会导致x的最小值在图的x坐标处驻留在0，并且最大值在图的最大点处（它已经是是因为我当前的等式中的1：1比率）。目前x的最小值（在示例中为10），在x坐标中位于75px，因为1：4的比率乘以画布的宽度。

tldr / summary：我需要制作一个图表，其中最小值绘制在图表的开头（0,0），最大值绘制到最终的

Answer 1

只需遍历你的观点并记录你发现的内容（抱歉，我不能用JavaScript进行算法编程。伪Python更容易）：

minimum = [infinity, infinity, -1]
maximum = [-infinity, -infinity, -1]

for point in points:
  if point.x > maximum.x and point.y > maximum.y:
    maximum = [point.x, point.y, point.index]

  if point.x < minimum.x and point.y < minimum.y:
    minimum = [point.x, point.y, point.index]

if maximum.index == -1:
  print 'No point is a maximum, so the points all lie in a horizontal line.'

  maximum = [points[0].x, points[0].y, 0]
  minimum = [points[0].x, points[0].y, 0]

Answer 2

首先尝试计算每像素宽度的值。

e.g。

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

至少我认为那会工作......

Answer 3

我不确定我是否正确理解了您的问题。如果是这样，这就是等式：

position x = (point[i][0] - min x) * canvas width / (max x - min x)

这种方式当point[i][0]最小（min x）时，您的值为0.0.，当它为最大值（max x）时，值为canvas width，正在增长线性。

Answer 4

您需要将范围[min_x，max_x]线性映射到[0，width]。点x = point[i][0]映射到

position(x) = width/(max_x - min_x) * (x - min_x).

图的数学方程

4 个答案: