拉斐尔投影效果

Question

拉斐尔投影效果

5

有人知道 Raphael 是否支持使用阴影吗？我正在尝试为我创建的一个对象创建一个阴影。这是我拥有的代码，但我不知道如何添加阴影。如果您能帮助我，那就太好了，我的经理对我非常失望。

<html>
<head><title></title>
<script src="raphael-min.js"></script>
<script src="jquery-1.7.2.js"></script>
</head>

<body>

<div id="draw-here-raphael" style="height: 200px; width: 400px;">
</div>

<script type="text/javascript">
//all your javascript goes here

var r = new Raphael("draw-here-raphael"),

    // Store where the box is
    position = 'left',

    // Make our pink rectangle
    rect = r.rect(20, 20, 50, 50).attr({"fill": "#fbb"});

</script>

</body>
</html>

- John Doe

5个回答

1

Raphaeljs本身没有这样的功能，但插件可能会有所帮助。此外，对于简单的形状，我认为可以通过渲染两次来模拟效果，首先用部分透明度和一点偏移（以模拟阴影）用黑色渲染，然后再用形状本身覆盖它。

- Qnan

插件是别人构建的函数，我可以通过在头部包含它来使用它吗？ - John Doe

1

这个有点奇怪，但是这些人似乎已经弄清楚如何使用它了。这里 - Qnan

1

虽然这是一个老问题，但我更喜欢绘制该对象的克隆版本，每个版本都比前一个少一个像素，以达到3D效果。

Raphael.el.depth = function(z, shade) {
    z = (typeof z !== "undefined") ? z : 5;
    shade = (typeof shade !== "undefined") ? shade : '#999';
    for (var c = 0; c < z; c += 1) {
        var s = this.clone().attr({ 'fill': shade }).transform("t" + (c + 1) + "," + (c + 1));
    }
    this.toFront();
};

- Chris Wilson

0

我写了一个处理这种事情的扩展。它非常容易使用：

circle.shadow();

这将实现您想要的功能。此外，它是SVG滤镜效果的实现（glow()不是），因此它可以与动画等一起使用。

项目页面在这里：http://chrismichaelscott.github.io/fraphael/。

- chrismichaelscott

0

另一个非常好的解决方案是使用clone()函数。这是一个很好的替代方案，因为它可以处理复杂的路径。而且它看起来真的像一个阴影。

查看DEMO：

var r = new Raphael(10,10, 500, 500);
var p = r.path("M100,300 L100,100 C100,100 250,100 250,300z");
p.attr({fill: 'yellow'});

p2 = p.clone();
p2.attr({fill:'gray', stroke:'none'}).transform('t7,5');

p.toFront();

- Brian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Supr · Accepted Answer

可以在一定程度上使用.glow()方法来实现相关 IT 技术:

var circle = paper.circle(100,100,50);
var path = paper.path('m200,50 l100,0 l100,100 l0,100 z');

circle.glow();

path.attr({
    fill: 'blue'
});
path.glow({
    color: '#444',
    offsety: 20 
});

在这里可以看到它的实际效果：http://jsfiddle.net/sveinatle/gkayG/7/

~~然而，它似乎只适用于线条，无法填充阴影。~~