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

【问题标题】：Raphael 2.0 - how to correctly set the rotation pointRaphael 2.0 - 如何正确设置旋转点
【发布时间】：2011-12-15 10:20:20
【问题描述】：

我不明白如何在某个点旋转我的对象。这是我的 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。

我为它做了谷歌并找到了一些条目，但问题似乎是翻译不好的旧版本，因为很多东西被改变或被弃用。

【问题讨论】：

标签： javascript rotation raphael point

【解决方案1】：

您正确设置了旋转中心，但还有其他一些事情正在发生，这会导致一些混乱。我可以通过将动画目标更改为：

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

我认为按照您的方式，动画在进行旋转的同时逐渐消除了先前的平移。这种添加允许它累积转换。另外，请注意，我必须将“r”切换为“R”。我不太清楚这个例子中的小“r”在做什么。

无论如何，这是一个有效的demo。

顺便说一句，我还注释掉了一些似乎没有做任何事情的轮换。

【讨论】：