将线条变成戒指是图形程序中的简单任务,如GIMP:
Filter ⇒ Distorts ⇒ Polar Coordinates http://adamhaskell.net/img/transform.png
所以我做出了以下几点:
>上述算法将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变换中表示它.
任何人可以帮助我最后一步吗?
解决方法
我从来没有使用CSS变换矩阵,但我想你想要的是不可能的.
使用变换矩阵进行线性变换.线性变换始终将直线映射到直线或0. Take a look at Wikipedia for more information.
使用变换矩阵进行线性变换.线性变换始终将直线映射到直线或0. Take a look at Wikipedia for more information.
因此,使用矩阵将直线映射到圆是不可能的.