Question

大家好我想尝试使用Set使用Element.animate（）一次旋转几个对象但它旋转每个元素而不是整个集合我需要整套

请帮助我，我对raphael非常新，只需几个小时阅读文档和尝试功能

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

Answer 1

选项1：使用Raphael的sets功能 - 将所有元素添加到一组中，然后告诉Raphael旋转该组。有关详细信息，请参阅http://raphaeljs.com/reference.html#Paper.set。

这实际上不会旋转整个Raphael元素，但如果图像的所有元素都是该集合的一部分，它看起来就像是这样。

选项2：使用标准CSS旋转元素或HTML容器。这可能实际上是最简单的选项，但是它有缺点，它在旧版浏览器（尤其是旧版本的IE）中不起作用。有解决方法（例如CSS Sandpaper），但如果您已经使用Raphael来帮助IE兼容性，那么您可能也不想使用其他脚本。

拉斐尔 - 旋转整个集合而不是每个对象

1 个答案: