13

線をリングに変えることは、GIMPなどのグラフィックプログラムでは簡単な作業です。

フィルタ⇒歪み⇒極座標
(出典:adamhaskell.net

CSSで同じ効果を生み出すことが可能かどうかを調べようとしています。

だから私は次のことを考えました:

  • 上記のアルゴリズムは、にマップさxrます。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でこのような変換を作成するにはどうすればよいですか?おそらく、どのキーワードも役に立たないので、行列変換である必要があります。さて、私は上記の2つの方程式から行列を作成する方法、ましてやCSS変換でそれを表現する方法がわかりません。

誰かがこの最後のステップで私を助けることができますか?

4

2 に答える 2

5

私はCSS変換行列を使ったことがありませんが、あなたが望むことは不可能だと思います。変換行列を使用して、線形変換を実行します。線形変換は常に直線を直線または0にマッピングします。詳細については、ウィキペディアを参照してください

したがって、行列を使用して直線を円にマッピングすることは不可能です。

于 2012-04-14T12:04:57.330 に答える
-2

少なくとも、2つの対称な3次ベジェ曲線を使用して作成できます。

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)

これで、ライン座標から制御点を定義する関数のみが必要になります。

于 2012-04-14T12:26:02.407 に答える