Рафаэль внутреннее свечение?

Question

Я ищу способ добиться только внутреннего свечения или тени на пути raphael. К сожалению, вы можете делать только радиальные градиенты на эллипсе или круге.

Одна из идей может заключаться в том, чтобы создать ряд путей, которые немного меньше и вписываются в исходный путь, а затем придать им разные цвета штрихов, но я понятия не имею, как я к этому подхожу. Некоторая функция, которая берет путь и вычитает или добавляет значения в числа, в зависимости от того, где они находятся ... Во всяком случае, если у кого-нибудь есть идеи или, возможно, другая библиотека javascript, которая делает это, это было бы здорово.

Answer 1

Хорошо здесь, как вы можете достичь этого. Я думаю, это довольно просто. Я знаю, что трудно вручную создать теневой путь из вашего оригинала. Но есть трюк, называемый функцией scale(). Шаги к тому, как вы можете получить внутреннюю тень или внутренний эффект свечения:

1. Создать свой путь
2. клонировать его на другой путь
3. Установите шкалу() клонированного пути быть 0,9 * оригинальный
4. Тогда скрыть клонированный путь, но применить свечение() функцию на нем

код:

var paper = Raphael("notepad", 500, 500); 

var path = paper.path("M 50 200 L 120 100 200 190 80 250z"); 
var shadow = path.clone().scale(0.9).hide(); 


shadow.glow(); 
path.attr({stroke: "darkred"}); 

Посмотрите на DEMO, это не идеально, но с незначительными изменениями, вы можете получить то, что хотите.

Также в качестве примечания:
glow() функция имеет такие атрибуты, как offsetx, offsety, opacity ... Изменение этих атрибутов даст вам нужный тень/блеск.

ОБНОВЛЕНО КОДhttp://jsfiddle.net/jUTFm/41/

Answer 2

Посмотрите here. Вы можете попробовать оживить ширину пути и постепенно затемнить цвет, чтобы дать какой-то светящийся эффект.

проверка из нижней части

brain = paper.add(brain); 

    brain.attr('stroke', '#ff0'); 

    brain.transform('s 0.5, 0.5 0 0'); 

    glow = brain.glow({ 
    color: '#ff0', 
    width: 5 
    }); 

    anim = Raphael.animation({ 
    "stroke-width": 15, 
    opacity: 1 
    }, 500); 


    anim = anim.repeat(Infinity); 
    glow.animate(anim);