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

Question

假设我有一个点列表，它有自己的值：

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

图形上，类似于 this（考虑以像素为单位的值）：

现在，假设我需要根据第一个点的 "raising" 倾斜每个点，同时保持最后一个点不变。即，将 "up" 索引 0 处的点移动到 0 并将最后一个点保留在 80:

point index 0 = 0
point index 4 = 80

在心理上，我相应地看到了中间的点skewing/stretching。例如将线 stretch/rotate 移向 0。我需要中间点的新值列表，并保留每个点的 X 值。

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

可能使用 SVG（和其他系统）中的旋转和平移等内置方法，这将很容易实现，但我想知道数学，所以我可以在上下文中应用它没有内置方法。

即SVG and/or Javascript 这里应该只是应用数学的工具。

Answer 1

scale 和 skew 是不同的算法。以防万一：如果你的点 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 得到 factor = 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)

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

How to skew values due to a fixed pivot and a moving point?

javascript

algorithm

math

svg

skew