2

我正在使用 AS3 (Flash)读取 SVG 文件并显示它们。问题是正确显示线性/径向渐变。

以下是SVG 中从Red到Blue的简单线性渐变示例。

<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>

我已经能够从渐变中读取颜色（stop 的样式），以及它们在渐变中的间距（stop 的偏移量）。

好的，所以现在我有了一个很好的渐变，颜色正确，它们之间的空间量也恰到好处，但没有旋转或缩放，而且它的位置不正确！.

答案是将矩阵输入到 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. 翻译 x -- 尝试了第一个梯度点的 X，也尝试了 0，结果不正确！
  5. 平移 y -- 尝试了第一个梯度点的 Y，也尝试了 0，但结果不正确！

我可以使用哪些 SVG 数据为 Flash 生成渐变矩阵？

（看看上面的 SVG 片段，这就是我描述渐变的所有数据）

4

2 回答 2

1

如何使用 2 个渐变点绘制线性渐变

  1. x1,y1 和 x2,y2是屏幕坐标空间上的 2 个点，渐变将从那里绘制到。
  2. 使用SVG 提供的变换矩阵来偏移 x1,y1 和 x2,y2 点。-- gradientTransform="矩阵(a,b,c,d,e,f)
  3. 绘制从 x1,y1 到 x2,y2 的渐变。

IE

x1, y1, x2, y2 表示坐标系中的值，该值是由于 在渐变元素的时间为引用渐变的元素（通过“填充”或“描边”属性）采用当前用户坐标系而产生的引用，然后应用属性 gradientTransform 指定的变换。

通过W3C 文档。

于 2008-12-06T11:30:56.613 回答
0

SVG渲染引擎！

也许这里有一些可以提供帮助的答案。

于 2008-12-05T17:22:16.717 回答