时间戳

首页 > 解决方案 > 由于固定的枢轴和移动点，如何倾斜值？

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

问题描述

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

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

从图形上看，是这样的（考虑以像素为单位的值）：

在此处输入图像描述

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

point index 0 = 0
point index 4 = 80

在精神上，我看到中间的点相应地倾斜/伸展。例如取线并向0拉伸/旋转。我需要中间点的新值列表，保持每个点的X值。

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

可能使用内置方法作为旋转和翻译SVG（和其他系统）这将很容易实现，但我想知道数学，所以我可以在没有内置方法的情况下应用它。

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

标签： javascriptalgorithmmathsvgskew

解决方案

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)

推荐阅读