2

AS3 (Flash) を使用してSVG ファイルを読み取り、表示しています。問題は、線形/放射状グラデーションを正しく表示しています。

以下は、 SVG での赤から青への単純な線形グラデーションの例です。

<linearGradient id="GRADIENT_1" gradientUnits="userSpaceOnUse"
x1="107.3938" y1="515.5684" x2="105.2488" y2="428.8614"
gradientTransform="matrix(0.9988 0.0485 0.0485 -0.9988 0.8489 711.6634)">

    <stop  offset="0" style="stop-color:red"/>
    <stop  offset="1" style="stop-color:blue"/>

</linearGradient>

グラデーション (ストップのスタイル) からの色と、グラデーション (ストップのオフセット) の間隔を読み取ることができました。

さて、これで、適切な色と適切な量のスペースを備えた素敵なグラデーションができましたが、回転やスケールはなく、位置がずれています! .

答えは、 Matrixを Flash のグラデーション関数にフィードすることです。

方法 1: 提供されたマトリックスを使用する

SVG によって提供されるマトリックス、gradientTransform="matrix(a,b,c,d,e,f)"は事実上役に立たないように見えます。そのマトリックスを Flash のbeginGradientFill() 関数にフィードすると、シェイプ上に引き伸ばされたグラデーションが表示されるためです。塗りつぶしのように、グラデーションの中心の色だけが表示されます。

方法 2: 2 つのグラデーション ポイントを使用してマトリックスを生成する

  • x1、y1タグは、グラデーションが始まる画面上のポイントである可能性があります。
  • x2、y2タグは、グラデーションが終了する画面上のポイントである可能性があります。

「2 つのグラデーション ポイント」と言うとき、私は x1、y1 と x2、y2 を指しています。これらは主に、形状のどこでグラデーションの開始と終了を行うかを示しています。

グラデーションで使用するマトリックスを作成するMatrix.createGradientBox()関数がありますが、パラメーターはSVG が提供するものとは大きく異なります。それは欲しい：

  1. 幅--- ここでは 2 つのグラデーション ポイント間の相対距離を使用します (X 軸)
  2. 高さ --- ここでは 2 つのグラデーション ポイント (Y 軸) 間の相対距離を使用しましたが、間違った結果が得られました --- ここでも2 つのグラデーション ポイント間の距離を使用しようとしましたが、幅に何を入力すればよいかわかりませんでした!
  3. 回転角度-- 2 つのグラデーション ポイントの角度 (ラジアン単位) を使用したため、結果が正しくありません!
  4. Translation x -- 最初のグラデーション ポイントの X を試し、0 も試しましたが、結果が正しくありません!
  5. Translation y -- 最初のグラデーション ポイントの Y を試し、0 も試しましたが、結果が正しくありません!

Flash のグラデーション マトリックスを生成するために使用できる SVG データは何ですか?

(上記の SVG スニペットを見てください。これがグラデーションを説明するすべてのデータです)

4

2 に答える 2

1

2つのグラデーションポイントを使用して線形グラデーションを描画する方法

  1. x1、y1およびx2、y2は、グラデーションが描画される画面座標空間上の2つのポイントです。
  2. SVGが提供する変換行列を使用して、x1、y1およびx2、y2ポイントをオフセットします。--gradientTransform = "matrix（a、b、c、d、e、f）
  3. x1、y1からx2、y2へのグラデーションを描画します。

すなわち

x1、y1、x2、y2は 、グラデーション要素が参照され、属性gradientTransformで指定された変換を適用します。

W3Cドキュメント経由。

于 2008-12-06T11:30:56.613 に答える
0

SVG レンダリング エンジン!

たぶん、ここに役立つ答えがいくつかあります。

于 2008-12-05T17:22:16.717 に答える