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

Question

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

Answer 1

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

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

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

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",
});

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

Answer 2

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

Answer 3

Вечер,

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

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

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

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