Question

我制作了一个customAttribute来绘制一条连接圆圈中2个点的线（见http://dl.dropbox.com/u/3319121/problem.png上的图片）。

r.customAttributes.line = function (xloc, yloc, start, end, total, R) {
var alphas = 360 / total * start,
    alphae = 360 / total * end,
    as = (90 - alphas) * Math.PI / 180,
    ae = (90 - alphae) * Math.PI / 180,
    xs = xloc + R * Math.cos(as),
    ys = yloc - R * Math.sin(as),
    xe = xloc + R * Math.cos(ae),
    ye = yloc - R * Math.sin(ae),                       
    path;
path = [["M", xs, ys], ["Q", xloc, yloc, xe, ye]];
return {path: path};
};

现在我想添加一个渐变。因此，您将在第2点的第1点红色中获得蓝色渐变，以使视觉更加平滑。对于Raphael.js中的对象，这是可能的，例如参见http://raphaeljs.com/ichart.html，并且已经有回答如何（http://jsfiddle.net/L92Ch/538/）的stackoverflow上的答案，但是在笔画中添加渐变（没有填充）似乎在raphael.js中是不可能的。

有没有人能解决这个问题？

Answer 1

作为rajkamal答案的更新，您可以将渐变应用于笔划而不是填充笔划。 http://jsfiddle.net/yVfhy/

Answer 2

格特，

显而易见的选择，因为拉斐尔不能做渐变笔画（据我所知），就是伪造它。我创建一个正确尺寸的矩形并旋转，将其转换到位。

这是你上面提到的小提琴的example。

显然，你只限于直线，而不是曲线。

Answer 3

如果我对您的问题的理解是正确的 - 您正试图在封闭路径中创建渐变填充。

我已经采取了一些随机路径并填充了渐变（从红色到蓝色），类似于图像中的内拱。

代码：http://jsfiddle.net/qp3xf/

感谢

Raphael.js中风渐变

3 个答案: