javascript - 拉斐尔内发光？

Question

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

一个想法可能是创建一系列稍微小一些并适合原始路径的路径，然后给它们不同的笔触颜色，但我不知道如何处理。一些函数根据它们的位置来获取路径并减去或增加数字的值......无论如何，如果有人有任何想法，或者可能是另一个这样做的 javascript 库，那就太好了。

Answer 1

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

1. 创建你的路径
2. 将其克隆到另一个路径
3. 设置克隆路径的 scale() 为 0.9*original
4. 然后隐藏克隆的路径，但在其上应用 gloom() 函数

编码：

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

看这里。您可以尝试为路径的宽度设置动画并逐渐使颜色变暗以产生某种发光效果。

检查底部

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