Как создать градиентную заливку на внутреннем крае объекта с помощью Рафаэля?

У меня есть динамически сгенерированный график, который иллюстрирует диапазон элементов, которые поместятся в контейнер, относительно ширины и толщины элемента. Я пытаюсь показать, что элементы, расположенные ближе к краю "диапазона подгонки", могут быть не такими хорошими, как те, что ближе к середине графика. Для этого я хотел бы заполнить свою форму зеленым цветом, который имеет градиент, переходящий в желтый по краям. Эта желтая область должна иметь равномерную толщину по всему внутреннему краю, так как проиллюстрировано на рисунке ниже. Как я могу сделать это с Рафаэлем? Я знаю, как сделать сплошную заливку; градиент-это то, где у меня возникают трудности. Заранее спасибо за вашу помощь!

Пример Градиента

3 2
javascript svg raphael

3 ответа:

Теоретически это можно сделать, разрезав Граф на четыре треугольника.

Разрежьте график на четыре прямоугольника

Затем каждый треугольник можно заполнить градиентом, который в основном является вашим сплошным цветом, но на одном конце он превращается в ваш краевой цвет. Установив правильный угол наклона градиента, вы можете сделать так, чтобы он выглядел так, как будто только края на графике имеют другой цвет.

График с ребрами другого цвета

Я создал прямоугольник выше, используя следующий код.

var slice1 = paper.path("M200 200L100 100L300 100").attr({
    "fill": "90-#0f0:70-#ff0:95",
});

var slice2 = paper.path("M200 200L300 100L300 300").attr({
    "fill": "0-#0f0:70-#ff0:95",
});

var slice3 = paper.path("M200 200L300 300L100 300").attr({
    "fill": "270-#0f0:70-#ff0:95",
});

var slice4 = paper.path("M200 200L100 300L100 100").attr({
    "fill": "180-#0f0:70-#ff0:95",
});

Ваш случай будет немного но все гораздо сложнее. Вам нужно будет сначала найти середину графика, чтобы иметь возможность разрезать его на треугольники. Затем вам нужно найти угол для каждого из градиентов.

2

Вечер,

Это не так просто, как это выглядит, как это должно быть. Вероятно, из-за проблемы с тем, как реализовать его в VML.

Лучшее, что я смог сделать, это использовать немного больший клон вашего целевого объекта позади оригинала, а затем использовать градиентную заливку на нем.

Я привел пример в этой скрипке

Надеюсь, это поможет.

0

Вы можете использовать радиальный градиент на перегибающемся эллипсе, но это оставит довольно большой угол желтого цвета. Чтобы найти центр вашего объекта используйте старый добрый getBBox ()

0