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。

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

Answer 1

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

来实现此功能

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

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

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

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

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

1 个答案: