Raphael.js градиент в штрихе - PullRequest
Новая
       0

Raphael.js градиент в штрихе

2 голосов
/ 24 ноября 2011

Я создал собственный атрибут для рисования линии, соединяющей 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};
};

Теперь я хотел бы добавить градиент. Таким образом, у вас будет градиент от синего в точке 1 или красный в точке 2, чтобы сделать изображение более плавным. Это возможно для объектов в Raphael.js, см., Например, http://raphaeljs.com/ichart.html, и уже есть ответы на stackoverflow, которые отвечают, как (http://jsfiddle.net/L92Ch/538/), однако добавить градиенты в штрихах (без заливки) кажется невозможным в Raphael .js.

У кого-нибудь есть решения этой проблемы?

Ответы [ 3 ]

1 голос
/ 10 июля 2012

В качестве обновления к ответу Райкамала вы можете применить градиент к обводке, а не заполнять ее.http://jsfiddle.net/yVfhy/

0 голосов
/ 25 ноября 2011

если я правильно понимаю ваш вопрос - вы пытаетесь создать градиентную заливку внутри замкнутого контура.

Я выбрал несколько случайных путей и залил градиент (от красного до синего), который напоминаетВнутренняя арка, как на вашем изображении.

Код: http://jsfiddle.net/qp3xf/

спасибо

0 голосов
/ 25 ноября 2011

Герт,

Очевидный выбор, поскольку Рафаэль не может делать градиентные штрихи (насколько я знаю), это подделать его.Я бы создал прямоугольник правильных размеров и повернул, перевел его на место.

Вот пример из скрипки, которую вы упомянули выше.

Очевидно, вы ограничены прямыми, а не кривыми.

...