5

ラファエルがドロップシャドウの使用をサポートしているかどうかは誰にもわかりません。作成したオブジェクトのドロップシャドウを作成しようとしています。これが私が持っているコードですが、ドロップシャドウを追加する方法がわかりません。マネージャーが私に非常に不満を感じている場合は、私を助けてください。

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

5 に答える 5

7

.glow()-methodは、ある程度使用できます。

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/

それは線に対してのみ機能するように見えますが、実際には影を埋めません。

于 2012-06-29T13:40:29.070 に答える
1

Raphaeljs自体にはそのような機能はありませんが、プラグインが役立つ可能性があります。また、単純な形状の場合、効果は2回レンダリングすることでシミュレートできると思います。最初は部分的に透明で少しオフセットされた黒で（影を模倣するため）、次に形状自体をその上にレンダリングします。

于 2012-06-29T13:24:33.587 に答える
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();
};
于 2012-12-21T19:27:50.103 に答える
0

私はこの種のものを処理するための拡張機能を書きました。それは本当に使いやすいです：

circle.shadow();

あなたがやりたいことをするでしょう。また、これはSVGフィルター効果の実装であるため（glow()そうではありません）、アニメーションなどで機能します。

プロジェクトページはここにあります：http：//chrismichaelscott.github.io/fraphael/。

于 2013-07-23T17:22:24.770 に答える
0

もう1つの非常に優れた解決策は、clone()関数を使用することです。複雑なで動作するため、これは優れた代替手段pathsです。そして、それは本当に影のように見えます。

デモをチェックしてください：

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();
于 2013-07-23T18:33:08.403 に答える