Raphael 2.0 - 如何正确设置旋转点

Question

我不明白如何在某一点旋转我的对象.这是我的javascript

            // create needle 
            var rsr = Raphael('rsr', '320', '240'); 
            var needle = rsr.path("m 156.74443,870.84631 -2.26177,119.38851 
            4.38851,0 z"); needle.attr({id: 'needle',parent: 'layer1',fill: 
            '#ff6600',stroke: '#000000',"stroke-width": '0.61',"stroke-linecap":
            'butt',"stroke-linejoin": 'miter',"stroke-miterlimit": '4',"stroke- 
            opacity": '1',"stroke-dasharray": 'none'}); 

            needle.rotate(0); 
            needle.transform("t0,-812.36218").data('id', 'needle'); 

            // get needle bounding box 
            var needleBox = needle.getBBox(); 

            // calculate rotation point (bottom middle)
            var x_rotate_point = needleBox.x + (needleBox.width/2); 
            var y_rotate_point = needleBox.y + needleBox.height; 

            // rotate needle
            needle.attr({rotation: 0}).animate({transform:"r45,"+x_rotate_point 
            +","+y_rotate_point}, 6000); 

            // Creates circle at rotation point 
            var circle = rsr.circle(x_rotate_point, y_rotate_point, 10); 
            circle.attr("fill", "#f00"); 
            circle.attr("stroke", "#fff"); 

我创建了一个虚拟圆圈,以检查我的中心点的坐标是否正确,但是它不会围绕该点旋转: - /

当我在不同的框架中创建仪表时似乎总是走的路,但这种逻辑似乎并没有很好地转化为Raphael 2.0.

我为它做了google并找到了一些条目,但问题似乎是旧版本不能很好地翻译因为很多东西被改变或被弃用了.

Answer 1

您正在正确设置旋转中心,但还有其他一些事情会导致一些混乱.我可以通过将动画目标更改为:

{transform: needle.attr("transform") + "R45,"+x_rotate_point+","+y_rotate_point}

我想你的方式,动画逐渐删除以前的翻译,同时也进行旋转.这种添加允许它累积变换.另外,请注意我必须将'r'切换为'R'.在这个例子中,我不太清楚小'r'在做什么.

无论如何,这是一个工作演示.

顺便说一句,我还评论了一些似乎没有做任何事情的轮换.