1

私は raphael.js に非常に多くの問題を抱えています。誰かが私を助けてくれることを願っています。

最初の問題:なぜ彼らは私に 2 つの異なる道を描かないのですか? 同じキャンバス/divにあるからですか？ 解決！

    function animateLine(canvas, divName, time, durzeit, colorNumber, pathString) {
    $('#' + divName).ready(

    function () {
        var line = canvas.path(pathString).attr({
            stroke: colorNumber
        });
        var length = line.getTotalLength();

        $('path[fill*="none"]').hide().delay(time).animate({
            to: 1
        }, {
            duration: durzeit,
            step: function (pos, fx) {
                var offset = length * fx.pos;
                var subpath = line.getSubpath(0, offset);
                canvas.clear();
                canvas.path(subpath).attr({
                    'stroke-width': 1,
                    stroke: colorNumber
                });

            },
        });
    }, function () {
        $('path[fill*="none"]').glow();
    });
};

var canvas = Raphael('canvas', 400, 400);

animateLine(canvas, "canvas", "1000", "2000", "#03ae8c", "m87.118,11.764c2.236,7.58,7.497,14.165,9.474,22.045c2.957,11.786,3.704,24.38,2.293,36.434c-1.808,15.449-6.275,29.477-10.602,44.306c-5.588,19.152-6.986,38.342-2.33,57.733c2.296,9.562,7.805,20.21,15.25,26.768c7.399,6.517,16.052,11.587,23.489,18.181c7.456,6.61,9.146,21.192,8.788,30.781c-0.196,5.247-2.378,8.792-4.234,13.449c-1.405,3.526-3.309,6.689-4.824,10.113c-0.353,0.797-0.681,1.17-0.725,2.137");

animateLine(canvas, "canvas", "1000", "4000", "#ff0072", 
            "m214.552,10.879c1.197,1.98-7.28,12.149-8.41,14.51c-5.543,11.586-6.496,22.61-5.73,35.377c1.028,17.148,12.397,31.641,21.652,45.415c13.984,20.811,26.343,43.782,27.046,69.358c0.339,12.338,0.575,25.059-0.037,37.387c-0.522,10.504-4.778,17.693-8.019,27.26c-1.225,3.618-1.75,7.167-4.138,9.959c-3.883,4.54-9.488,9.212-15.544,10.005c-3.437,0.45-9.848,1.725-13.016-0.599");

キャンバスをきれいにしません。すべてのパスが表示されます。関数 canvas.clean() を削除しようとしました。しかし、それはピクセル化されたパスを示しています。それは最善の解決策ではありません...

2番目の問題：グロー効果が欲しいだけですが、うまくいきません。

    }, function () {
        $('path[fill*="none"]').glow();
    });

10 以上の異なるパスを「描画」/アニメーション化します。それらは異なる時間に開始する必要があり、グロー効果が重要です。しかし、何も機能しません。2 日からこのコードに取り組んでいます。このコードに別の方法でアプローチする必要がありますか?

編集:他の問題....なぜ彼らは私の最初のパスを1回、2番目のパスを2回描画するのですか? T_T

ここでJSFIDDLE

4

1 に答える 1

0

それには別の解決策があります。私が作成したデモを見てください。

また、コード：

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.95).hide();


shadow.glow({width: 8,color: 'orange'});
path.attr({stroke: "black", "stroke-width": 2});

明らかに、グローの色をscale()変更したり、 および を変更しglow()たりoffsetxできoffsetyます。おそらくあなたscale()の場合は使用する必要はありませんが、影効果を作成したい場合に便利です。

これが役に立つことを願っています。

于 2013-06-20T19:13:34.030 に答える