首页 文章

使用Flash显示SVG渐变？

提问于
浏览 次
2

我正在使用AS3（Flash）来实现 read SVG files 和 display . 问题是正确显示 linear/radial gradient.

以下是SVG中 Red 到 Blue 的简单 linear gradient 示例 .

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

我已经能够从渐变（停止的样式）读取 colors ，并通过渐变（停止的偏移）读取它们的 spacing .

好的，所以现在我的 right colors 和 right amount of space 之间有一个 nice gradient ，但是 NO rotation or scale 和它的 off position! .

答案是将a Matrix提供给Flash的渐变功能 .

方法1：使用提供的矩阵

SVG的 Matrix supplied ，gradientTransform="matrix(a,b,c,d,e,f)"看起来实际上没用，因为当你将 matrix 提供给Flash的beginGradientFill() function时，它会在形状上显示渐变 stretched ，因此只有渐变的中心颜色可见，就像实心填充一样 .

方法2：使用2个渐变点生成矩阵

  • x1, y1 标签可能是屏幕上 gradient begins at. 的点

  • x2, y2 标签，可能是 gradient ends. 屏幕上的点

当我说"2 gradient points"时，我指的是x1，y1和x2，y2，它们主要是在告诉你 where on the shape 是 gradient start & end.

Matrix.createGradientBox() function创建了一个用于渐变的矩阵，但参数是 very different than what SVG 给了我 . 它想要：

  • Width ---这里使用了2个渐变点之间的相对距离（X轴）

  • Height ---在这里使用了2个渐变点之间的相对距离（Y轴），但得到了不正确的结果---也尝试使用 distance between the 2 gradient points 这里，但我不知道填入Width的内容！

  • Rotation angle - 使用2个渐变点的角度（以弧度为单位），结果不正确！

  • Translation x - 尝试了第一个渐变点的X，也尝试了0，结果不正确！

  • Translation y - 尝试了第一个渐变点的Y，也尝试了0，结果不正确！

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

(Look at the SVG snippet above, 这是我描述渐变的所有数据）

flash svg linear-gradients gradients radial-gradients

2 回答

  • 0

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

    • x1,y1 and x2,y2 是 screen coordinate space 上的2个点，即要从中绘制渐变 .

    • 使用SVG提供的 transformation matrix 来 offset the x1,y1 and x2,y2 points. - gradientTransform =“矩阵（a，b，c，d，e，f）

    • 绘制从x1，y1到x2，y2的渐变 .

    即

    x1，y1，x2，y2表示坐标系中的值，这些值是通过在渐变元素时为引用渐变的元素（通过'fill'或'stroke'属性）获取当前用户坐标系而得到的被引用，然后应用属性gradientTransform指定的转换 .

    通过W3C Docs .

    回复于
  • 1

    SVG渲染引擎！

    也许有一些答案here可以提供帮助 .

    回复于

相关问题