如何使用raphael js添加額外路徑箭頭到指針路徑

Question

如何使用raphael js添加額外路徑箭頭到指針路徑？我一直試圖添加它沒有運氣。

這是

<script type="text/javascript"> 

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


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

     g.pointer(r.rect(0, 0, 100, 10).attr({fill: '#fff', 'stroke-width': '0'}), [100, 5]); 

//  g.Arrowshape(r.triangle(300, 0, 100).attr({fill:'#193442','stroke-width': '0'}), [100, 100]); 

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

</script> 

我創建了一個http://jsfiddle.net/creativestudio/VH3fR/3/

Answer 1

我能夠做到這一點，這是更新的腳本。

$(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.path('M 80,96 15,96 15,90 0,100 15,110 15,104 80,104 100,104 100,96 z').attr({fill: '#fff', 'stroke-width': '0'}).transform(""), [0, 0]); 

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

這裏是更新的jsfiddle http://jsfiddle.net/creativestudio/VH3fR/11/

Answer 2

的JavaScript這裏有兩種選擇：一種是使用Raphael.Set指針路徑和箭頭組合，另一種是用更一般的path（）替換指針的rect（）並在那裏繪製箭頭。一個箭頭的代碼可能是這樣的：

paper.path("M{0},{1}L{2},{3}L{4},{5}M{2},{3}L{4},{6}", a.x, a.y, b.x, b.y, b.x - length, b.y - width, b.y + width); 

其中a和b的出發點和落腳點，並length和width描述箭頭。請注意，這一個必須是「撫摸」，而不是「填充」，但它也很容易得到一個堅實的箭頭。