1

我正在尝试使用使用 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})
4

2 回答 2

7

好的，

对于任何查看此问题的人来说，先前的答案都是一个红鲱鱼。我只是花了半天时间在 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 源代码的时间......

于 2013-07-23T08:25:58.600 回答
0

有一种解决方法，但这涉及到编辑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 将有更多的代码更改，我不包括在这里。

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

于 2013-04-27T12:08:35.353 回答