2

こんにちはみんな Element.animate() を使用して Set で一度にいくつかのオブジェクトを回転させようとしていますが、セット全体ではなく各要素を回転させ、セット全体が必要です

助けてください私はラファエルに非常に慣れていないだけで、ドキュメントを読んで機能を試すのに数時間かかります

            var archtype = Raphael("canvas", 600, 600);

            archtype.customAttributes.arc = function (xloc, yloc, value, total, R) {
                var alpha = 360 / total * value,
                a = (90 - alpha) * Math.PI / 180,
                x = xloc + R * Math.cos(a),
                y = yloc - R * Math.sin(a),
                path;
                if (total == value) {
                    path = [["M", xloc, yloc - R],["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]];
                } else {
                    path = [["M", xloc, yloc - R],["A", R, R, 0, +(alpha > 180), 1, x, y]];
                }
                return {
                    path: path
                };
            };

            var circleSet=archtype.set();

            var arc_red0 = archtype.path().attr({
               "stroke": "#f00",
               "stroke-width": 30,
               arc: [300, 300, 30, 360, 250]
            });
            circleSet.push(arc_red0);

            var arc_red1 = archtype.path().attr({
               "stroke": "#f00",
               "stroke-width": 30,
               arc: [300, 300, 20, 360, 250],
               "transform": "r50,300,300"
            });
            circleSet.push(arc_red1);

            var arc_red2 = archtype.path().attr({
               "stroke": "#f00",
               "stroke-width": 30,
               arc: [300, 300, 80, 360, 250],
               "transform": "r90,300,300"
            });
            circleSet.push(arc_red2);

            var arc_red3 = archtype.path().attr({
               "stroke": "#f00",
               "stroke-width": 30,
               arc: [300, 300, 60, 360, 250],
               "transform": "r190,300,300"
            });
            circleSet.push(arc_red3);

            var arc_red4 = archtype.path().attr({
               "stroke": "#f00",
               "stroke-width": 30,
               arc: [300, 300, 70, 360, 250],
               "transform": "r270,300,300"
            });
            circleSet.push(arc_red4);

            var $angle=0;

            (function (){
                circleSet.animate({transform:"r"+$angle+",300,300"},200);
                $angle++;

                init = false;
                setTimeout(arguments.callee, 60);
            })();
4

1 に答える 1

1

オプション 1: Raphael のsets機能を使用する -- すべての要素をセットに追加してから、Raphael にセットを回転するように指示します。詳細については、 http://raphaeljs.com/reference.html#Paper.setを参照してください。

これは実際に Raphael 要素全体を回転させるわけではありませんが、画像のすべての要素がセットの一部である場合、そうしているように見えます。

オプション 2: 標準の CSS を使用して、要素またはその HTML コンテナーを回転させます。これは実際には最も簡単なオプションかもしれませんが、古いブラウザー (特に古いバージョンの IE) では機能しないという欠点があります。これには回避策があります ( CSS Sandpaper など) が、すでに Raphael を使用して IE との互換性を確保している場合は、別のスクリプトも使用する必要がない場合があります。

于 2013-03-25T11:07:27.253 に答える