CSS3中的极坐标变换？

Question

在图形程序（如 GIMP）中，将一条线变成一个环是一项简单的任务：

_{（来源：adamhaskell.net）}

我正在尝试确定是否可以在 CSS 中产生相同的效果。

所以我想出了以下内容：

• 上述算法将x映射到r和y映射到θ
• 为此，x 被缩放到[0,w/2] 的范围，w 是图像的宽度
• 另外，y 被缩放到[0,2π] 的范围
• 要将极坐标转换回笛卡尔坐标：xc = rp*cos(θp) 和 yc = rp*sin(θp)
• 然后翻译结果，使原点位于图像的中心。
• 所以我们有：

 

x' = (x/2)*cos(y/h*2π) + w/2;  
y' = (x/2)*sin(y/h*2π) + h/2;

这一切都很好，但我怎样才能在 CSS 中产生这样的转换呢？大概没有一个关键字是有用的，所以它必须是矩阵变换。好吧，我不知道如何从上面的两个方程构建一个矩阵，更不用说如何在 CSS 变换中表示它了。

谁能帮我完成这最后一步？

Answer 1

我从未使用过 CSS 变换矩阵，但我认为您想要的结果是不可能。 使用变换矩阵，您可以进行线性变换。线性变换总是将直线映射到直线或 0。Take a look at Wikipedia for more information。

因此不可能使用矩阵将直线映射到圆。

Answer 2

至少你可以制作 2 条对称的三阶贝塞尔曲线 使用

Y(t) = (t^3,t^2,t,1) * M * (P0,P1,P2,P3)

t - 时间

P0 - P3 控制点坐标。这个矢量必须是垂直的。我不知道如何在这个编辑器中制作垂直矢量。

Y(t) - 曲线坐标

M - 4*4 矩阵 第 1 行 (-1,3,-3,1) 第 2 行 (3,-6,-3,0) 第 3 行 (-3,3,0,0) 第 4 行 ( 1,0,0,0)

现在您只需要一个从您的线坐标定义控制点的函数。