根据x距离增加线高

Question

我有4行，并且想根据x距离将高度增加5像素。如果x距离具有相同的值，这很简单，但是在我的情况下，它可以不同。 例如，如果x距离是如此：

line.x: 50, 80, 110, 130
line.y: 20, 20, 20, 20

我能做

line.x: 50, 80, 110, 130
line.height: 20, 25, 30, 35

但是，当x距离如此时，我该如何进行数学运算：

line.x: 50, 80, 95, 130

编辑：这是一个示例图像：

Answer 1

我认为您想要的直线方程在line.x[0]和line.x[3]之间上升15个单位。如果是这样，则应该可以进行以下操作：

let line_x = [50,80,95,130];
let m = 15/(line_x[3]-line_x[0]);
line_y = line_x.map(x => m*(x-line_x[0]) + 20);
console.log(line_y);
//[ 20, 25.625, 28.4375, 35 ]

用简化的表示法，关键步骤是将y计算为y = m(x-x[0]) + 20，其中m = 15/(x[3]-x[0])（这是简单的slope = rise/run计算）。

Answer 2

下面是一个示例，该示例允许您根据需要更改角度，同时默认使用当前的“上方4像素，下方5像素”方法。如果您不希望它直接与x绑定，也可以在所有结果中添加一个恒定的“开始高度”（即，在x = 0时，它的高度也不必也为0）

function lineHeight(x, tareX = 0, initialHeight = 0, run = 4, rise = 5) {
  return (x - tareX) / run * rise + initialHeight;
}

const lines = [
  {
    x: 50,
  },
  {
    x: 80,
  },
  {
    x: 110,
  },
  {
    x: 130,
  },
];

lines.forEach(line => line.height = lineHeight(line.x, 50, 20));
console.log(lines);