2

使用 Raphael，我注意到如果我尝试在使用 0.9 和 0.2 作为径向焦点的圆上应用径向填充，则无法绘制径向填充。

paper.circle(50,300,20).attr({"fill":"r(0.5,0.1)#f00-000"});
paper.circle(100,300,20).attr({"fill":"r(0.9,0.2)#f00-000"}); // <-- fails
paper.circle(150,300,20).attr({"fill":"r(0.9,0.3)#f00-000"});

我在这里设置了一个小提琴，并做了一个 10x10 的网格，并且 (0.9,0.2) 是唯一失败的。

我想了解为什么。 http://jsfiddle.net/ENMry/2/

4

1 回答 1

1

这不是 Raphael 库的问题，但很可能是 JS SVG 渲染的问题。您可以在没有 Raphael 库的情况下仅使用 JavaScript 和 SVG 标记重复相同的问题。请参阅jsBin 中的示例

我将您的示例更改为具有 11x11 网格（从 0.0 到 1.0）的更大圆圈，并在顶部单独放置一行以显示焦点如何移动。请参阅jsBin 中的示例。

使用浏览器控制台（Chrome 中的 ctrl+shift+J），您可以检查 DOM 元素。为我们的白色元素（第一行中的第二个）设置了以下标记：

<radialGradient id="2r_0.1_0.2__f00-_000" fx="0.1" fy="0.2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
    <stop offset="0%" stop-color="#ff0000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></stop>
    <stop offset="100%" stop-color="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></stop>
</radialGradient>

<circle cx="175" cy="50" r="30" fill="url(#2r_0.1_0.2__f00-_000)" stroke="#000" opacity="1" fill-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1; fill-opacity: 1;">
</circle>

这个MDN Gradients 教程解释了径向渐变的工作原理。

如果我正确理解径向渐变是用 5 个数据和stop标记定义的：

  • 辐射点在哪里：例如cx="0.25" cy="0.25" r="0.25"。它们定义位置和渐变结束的位置。如果未设置cx并且cy位于元素cx=0, cy=0的中间（与值 0.5 或 50% 相同；表示左上角），r则为 1 或 100%。在我们的例子中，辐射从圆的中间开始，在圆的边缘结束。
  • stop标记定义了哪些颜色应该在某个位置。
  • 焦点（焦点）在哪里：在我们的例子fx="0.1" fy="0.2"中。标准说：fx并fy定义径向渐变的焦点。将绘制渐变，使 0% 渐变色标映射到 (fx, fy)。

如果你想象一个围绕圆的矩形，fx="0.1" fy="0.2"它位于左上角的某个地方。本教程说：如果焦点移到前面描述的圆之外，就不可能正确渲染渐变，因此将假定点在圆的边缘。如果根本没有给出焦点，则假定它与中心点位于同一位置。

顶行的第一个圆圈有fx="0.0" fy="0.2"并且不在辐射圈之外。所以点设置在边缘：左边，中间。

“有问题的”白色圆圈有fx="0.1" fy="0.2"，这个点正好在（辐射）圆圈的边缘。并且渲染以某种方式失败。对于fx="0.9" fy="0.2",fx="0.2" fy="0.1"和 也是如此fx="0.2" fy="0.9"。

按照同样的逻辑，我们应该有另外 4 个白色圆圈：

fx="0.8" fy="0.1"
fx="0.8" fy="0.9"
fx="0.1" fy="0.8"
fx="0.9" fy="0.8"

但它们被正确渲染。

如果你画一个圆圈和一个网格，你可以很容易地看到所有那些“有问题的”点。

所以，我不知道这是一些舍入问题还是其他问题。无论如何，这可能是一个错误。我发现一个与径向渲染有关，但并不完全相同。

顺便说一句，FireFox 和 IE10 渲染它没有问题。

注意：我提交了一个问题322487

于 2013-11-22T11:03:51.093 回答