RaphaelJS 与 rgba 渐变填充

Question

我正在尝试使用使用 rgba 颜色的 RaphaelJS 创建渐变填充。换句话说，我希望起点和终点都具有一定程度的透明度。例如，20% 黑色到 0% 黑色。这是怎么做到的？

这个小提琴是我期望的，但正如你所见，底部的黑色是完全不透明的。 http://jsfiddle.net/4aPj2/

r.circle(50,50,50).attr({fill:'90-rgba(0,0,0,0)-rgba(0,0,0,0.2)',opacity:0})

Answer 1

好的，

对于任何查看此问题的人来说，上一个答案都是一个红鲱鱼。我只是花了半天时间在 raphaeljs 源代码中挖掘。不是这么简单。因此，Raphaeljs 实际上已经对此有一些内置支持，并且您尝试像上面那样修改的任何内容都将不起作用，因为内置支持稍后会覆盖它。 Raphaeljs 目前拥有的支持允许您使用 opacity 属性和 fill-opacity 设置最终色标的透明度，例如：

r.circle(50,50,50).attr({fill:'90-#000000-#0000ff',opacity:0})

将在现实世界中转换为中心的第一个色标（黑色）为 100% 不透明度，最后一个色标（蓝色）为 0% 的不透明度的圆圈。另一个例子：

r.circle(50,50,50).attr({fill:'90-#000000-#ffffff',opacity:0.5})

将产生一个真实世界的圆圈，中心为 100% 不透明度的黑色，在最后一站的圆圈外围为 50% 的白色不透明度。

Raphaeljs 目前没有方法来支持两种颜色停止上的不同不透明度，但如果您迫切需要这样做，您需要修改的源代码行将在此处：

$(stops[stops.length - 1], {"stop-opacity": value});

在当前版本的 Raphaeljs (2.1.0) 中位于 6265。 我希望这可以帮助某人避免我刚刚花费的调试 RaphealJS 源代码的时间......

Answer 2

有一个解决方法，但这涉及编辑raphael.js

找到代码块：

el.appendChild($("stop", {
    offset: dots[i].offset ? dots[i].offset : i ? "100%" : "0%",
        "stop-color": dots[i].color || "#fff"
}));

并使用以下方法替换它：

el.appendChild($("stop", {
    offset: dots[i].offset ? dots[i].offset : i ? "100%" : "0%",
        "stop-color": dots[i].color || "#fff",
        "stop-opacity": R.is(dots[i].opacity, "undefined") ? 1 : dots[i].opacity
}));

更新：后来发现我不小心错过了补丁中的一行更改。

接下来，在函数R._parseDots中找到以下行

par[2] && (dot.offset = par[2] + "%");

替换成

dot.opacity = dot.color.opacity;
par[2] && (dot.offset = par[2] + "%");

通过上面的代码，您可以轻松地使用myRect.attr("fill", "90-rgba(255,0,0,0.25)-rgba(0,255,0,0.75)-rgba(0,0,255,0.25)"); 之类的东西，但请注意，该解决方案是针对 SVG 输出的，VML 不支持这一点。 VML 仅支持在 0% 位置的渐变上的单个不透明度，以及在 100% 位置的最后一个不透明度可选的第二个不透明度。还有一些 VML 的代码更改，我不包括在这里。

代码可以在fiddle http://jsfiddle.net/shamasis/SYdJW/中看到