Fatal编程技术网

Javascript 拉斐尔阴影效应

javascript

Javascript 拉斐尔阴影效应,javascript,raphael,shadow,Javascript,Raphael,Shadow,有人知道拉斐尔是否支持使用阴影吗。我正在尝试为我创建的对象创建阴影。这是我的代码，但我不知道如何添加阴影。如果可以的话，请帮助我。我的经理对我非常失望 <html> <head><title></title> <script src="raphael-min.js"></script> <script src="jquery-1.7.2.js"></script> </head> <

有人知道拉斐尔是否支持使用阴影吗。我正在尝试为我创建的对象创建阴影。这是我的代码，但我不知道如何添加阴影。如果可以的话，请帮助我。我的经理对我非常失望

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


//所有javascript都在这里
var r=新拉斐尔（“在这里画拉斐尔”），
//把盒子放在哪里
位置='左'，
//做我们的粉红色长方形
rect=r.rect（20,20,50,50）.attr（{“fill”：“#fbb”}）；
Raphaeljs本身没有这样的功能，但可能会有所帮助。此外，对于简单的形状，我认为可以通过渲染两次来模拟效果，首先是黑色，带有部分透明度和一点偏移（模拟阴影），然后是形状本身

在某种程度上可以使用-方法：

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 
});​
请在此处查看它的实际操作：

虽然它似乎只适用于线条，但实际上并没有填充阴影。

老问题，但我更喜欢在它下面绘制对象的克隆，每个克隆从上一个移除一个像素，以获得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();
}; 

Raphael.el.depth=函数（z，阴影）{
z=（类型z！=“未定义”）？z:5；
阴影=（阴影类型！=“未定义”）？阴影：“#999”；
对于（var c=0；c
我写了一个扩展来处理这种事情。它非常容易使用：

circle.shadow();
我会做你想做的。此外，它是SVG过滤效果的一个实现（而不是
glow（）
），因此它可以用于动画等

项目页面在这里：。

另一个非常好的解决方案是使用
clone（）
函数。这是一个很好的选择，因为它可以处理复杂的
路径。它看起来真的像一个影子

查看：


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



插件是其他人构建的函数，我可以通过将其包含在头部来使用它吗？这一个很奇怪，但这些家伙似乎已经找到了如何使用它的好方法，只需将fill属性设置为任意值（无所谓，任何非falsy的都可以），然后你的glow（）-生成的阴影被填充-@rodneyrehm，太好了，很高兴知道，谢谢！将更新答案。You's link给了我一个404…是的，JSFIDLE最近遇到了很多问题。正确链接：