由于固定的枢轴和移动点，如何使值偏斜？

Question

假设我列出了一些要点，这些要点都有自己的价值：

point index 0 = 0
point index 1 = 50
point index 2 = 50
point index 3 = 60
point index 4 = 80

从图形上讲，类似this（考虑像素值）：

现在，假设我需要根据第一个点的“升高”倾斜每个点，并保持最后一个点固定。也就是说，将索引0的点“向上”移动到0，最后一点保持在80：

point index 0 = 0
point index 4 = 80

从心理上讲，我看到中间的点一致地倾斜/伸展。例如，取直线并向0拉伸/旋转。我需要在中间列出这些点的新值，并保持每个点的X值。

您如何在数学上应用这种转换？哪个公式？线性插值？无法捕捉到算法...

可能使用内置方法（如SVG（和其他系统）中的旋转和平移）可以轻松实现，但我想知道数学原理，因此可以在没有上下文的情况下应用不是内置方法。

即SVG和/或Javascript此处只是应用数学的工具。

Answer 1

缩放和偏斜是不同的算法。以防万一：如果您的点index 0从50移到0，index 1点也应该从50移到0或移到9吗？

首先，让我们重写您的观点。毕竟，它们每个都有两个坐标：

index 0: (0, 50) // I suppose 0 for the y value was a typo on your part
index 1: (90, 50)
index 2: (140, 50)
index 3: (210, 60)
index 4: (500, 80)

scale变换功能从固定点的垂直部分伸出：

( x, y ) => ( x, y * factor  + shift )
            factor = (fixedY - movingYNew) / (fixedY - movingYOld)
            shift = fixedY * (1 - factor)

借助fixedY = 80, movingYOld = 50, movingYNew = 0可为您提供factor = 8/3, shift = -400/3和以下转换点：

index 0: (0, 50) => (0, 0)
index 1: (90, 50) => (0, 0)
index 2: (140, 50) => (0, 0)
index 3: (210, 60) => (0, 26.777)
index 4: (500, 80) => (0, 80)

skew变换功能在垂直方向上延伸，但取决于到固定点的水平距离

( x, y ) => ( x, x * skewFactor + y + shift )
            factor = (movingYOld - movingYNew) / (fixedX - movingX)
            shift = movingYNew - movingYOld

通过fixedY = 80, movingYOld = 50, movingYNew = 0，您可以得到因子= 1/10，shift = -50`和以下转换点：

index 0: (0, 50) => (0, 0)
index 1: (90, 50) => (0, 9)
index 2: (140, 50) => (0, 14)
index 3: (210, 60) => (0, 31)
index 4: (500, 80) => (0, 80)