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

【问题标题】：How to skew values due to a fixed pivot and a moving point?由于固定的枢轴和移动点，如何倾斜值？
【发布时间】：2018-08-21 15:15:04
【问题描述】：

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

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 应该只是应用数学的工具。

【问题讨论】：

这不只是围绕端点的路径的线性缩放吗？除非你想要一个不均匀的效果，例如指数衰减位移？
@meowgoesthedog：可能是这样。考虑到移动点（第一个）和固定点（最后一个），不确定如何应用线性缩放。你能给我举个例子吗？例如： 50 处的两个中间值不会应用相同的值。一个会比另一个更“高”（因为转换后路径变得更加倾斜）。不知道你是否明白我的意思:)
我不明白您为什么将“移动”方面视为一个问题 - 为什么不能在每次移动点时简单地重新应用缩放？
假设 i) 固定端点是 (ex, ey)，ii) 移动端点从 (mx, my) 开始并移动到 (mx, mY)，iii) 路径上的任意点从 (px, py) 开始。缩放后的新 Y 坐标由 pY = py + (mY - my) * (px - ex) / (mx - ex) 给出。
我不知道，这只是简单的数学运算。我猜它类似于线性插值。

标签： javascript algorithm math svg skew

【解决方案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)

【讨论】：

这几乎就是@meowgoesthedog 向我建议的“线性插值”。这是一个有效的小提琴：jsfiddle.net/jr5a2snu 结果是相同的（如果您的公式看起来不同，请考虑）。那么skew是线性插值吗？
比例函数在数学上等价于他的。 - SVG 和CSS 中有skewX() 和skewY() 变换函数；数学术语是shear mapping。
不。他的公式给了我你的“偏斜”结果，而不是比例结果。
糟糕，我明白了。我被他早期关于“skaling”的cmets欺骗了。
对我随意使用的术语表示歉意 - 我不知道这两种转换之间的区别。