Question

我正在寻找一种在raphael路径上只实现内部发光或阴影的方法。不幸的是，你只能在椭圆或圆上做径向渐变。

一个想法可能是创建一系列略小的路径并适合原始路径，然后给它们不同的笔触颜色，但我不知道如何接近它。一些函数接受路径并根据它们的位置减去或增加数值......无论如何，如果有人有任何想法，或者可能是另一个javascript库，那就太棒了。

Answer 1

好的，这是你如何实现这一目标的。我认为这很简单。我知道很难从原始手动创建阴影路径。但是有一个叫做scale()函数的技巧。如何获得内部阴影或内部发光效果的步骤：

创建路径
将其克隆到另一条路径
将克隆路径的比例（）设置为0.9 *原始
然后隐藏克隆路径，但在其上应用glow（）函数

代码：

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);

拉斐尔内心发光？

2 个答案: