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目前的支持允许您使用不透明度属性和填充不透明度设置最终颜色停止的透明度，例如：

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，还有一些代码更改，我不在此处。

可以在小提琴http://jsfiddle.net/shamasis/SYdJW/

中看到代码

RaphaelJS与rgba渐变填充

2 个答案: