Question

我有一个仪表指针，我需要在末尾添加一个箭头，我能够做到，唯一的问题不是一个集合，当指针旋转时我的箭头没有跟随它的位置任何想法的家伙我知道这是一个新手问题。

这是脚本

    $(function(){
        var r = Raphael("gauge", 200, 200);
        var g = r.gauge(0, 180);

        g.bg(r.circle(100, 100, 100).attr({fill:'','stroke-width': '0'}), [100, 100]);

        g.pointer(r.rect(0, 0, 90, 8).attr({fill: '#fff', 'stroke-width': '0'}), [90, 4]);

        g.arrow(r.path('M 15,20 0,10 15,0 z').attr({fill: '#fff', 'stroke-width': '0'}).translate(0, 90), [0, 20]);



        setInterval(function(){
            var percent = Math.floor(Math.random()*100);
            g.move(percent);
        }, 3000);
    });

您可以在http://jsfiddle.net/creativestudio/VH3fR/10/

预览

Answer 1

查看工作小提琴（快速修复）：http://jsfiddle.net/VH3fR/13/

我不知道这是否是最佳解决方案，我所做的不是创建一条路径＆amp;翻译它，我已经在所需位置直接创建了路径。

行为的原因是，如果你查看move方法的源代码，它需要指针＆amp;在指针上应用用于旋转的transform方法，该方法将覆盖您调用的translate方法。

替代解决方案

http://jsfiddle.net/VH3fR/14/

在这里，我删除了矩形＆amp;使用路径直接构建箭头。

使用raphael js和动画一起创建一组路径

1 个答案:

替代解决方案