使用Raphael JS，部分填充一個圓圈

我試圖用一種顏色填充圓的一部分。例如，有2/3個紅色和1/3空白的圓圈。使用Raphael JS，部分填充一個圓圈

Raphael JS文檔沒有多大幫助。解決這個問題的最好方法是什麼？

一些例子可以在下面的圖片中可以看出：

enter image description here

var paper = new Raphael(document.getElementById('shape_container'), 400, 100); 
var circle = paper.circle(50, 50, 30); 
circle.attr (
     { 
      fill: '#F00' 
     } 
    );

通過上面的代碼，我可以畫一個圓全紅.. 我找不到任何方式如何填寫2/3紅色..

來源

2012-06-13 Alperen Kavun

嗨，歡迎SO！請嘗試閱讀我們的[常見問題]（http://stackoverflow.com/faq）。這個問題有點不完整。你究竟試過了什麼？ *爲什麼*你不能做你想做的事？ –

我試圖添加一個截圖，但它沒有讓我cauz一個新成員。無論如何，我可以繪製矩形或圓形，並且可以用我想要的顏色填充它們。但事情是我想填充特定的比例，比方說3/8，一個形狀。此外，我是拉菲爾新手，我試着閱讀拉菲爾的參考資料，但我仍然不知道該怎麼做。我希望我的問題現在更清楚。 –

對，我已經編輯你的問題更清楚一點。你仍然應該附上一些代碼來告訴我們你已經嘗試了什麼;你所做的研究。 –

歡迎，Alperen。我相信你真正想要的是一條弧形路徑而不是一個圓圈。看看這個：

function arcpath(canvas, x, y, r, ratio) 
{ 
    if (ratio >= 1.0) return canvas.circle(x, y, r); 
    var degrees = 360 * ratio; // we use this to determine whether to use the large-sweep-flag or not 
    var radians = (Math.PI * 2 * ratio) - Math.PI/2; // this is actually the angle of the terminal point on the circle's circumference -- up is Math.PI/2, so we need to subtract that out. 
    var pathparts = 
    [ 
     "M" + x + "," + y, 
     "v" + (0 - r), 
     "A" + r + "," + r + " " + degrees + " " + (degrees >= 180 ? "1" : "0") + " 1 " + (x + (r * Math.cos(radians))) + "," + (y + (r * Math.sin(radians))), 
     "z" 
    ]; 

    return canvas.path(pathparts); 
} 

var partial_circle = arcpath(canvas, 250, 350, 100, 0.75).attr({ fill: mapit_red, stroke: mapit_black });

在arcpath函數的幾何形狀是相當簡單的（雖然我不得不尋找用於large-sweep-flag參考，這是斷然非顯而易見性）。我相信這可以大大優化，但這是一個功能的第一步。

來源

2012-06-13 17:17:14

這工作得很好，非常感謝 –

我爲此寫了一個RaphaelJS自定義屬性。它可以是動畫，所以你可以控制切片的旋轉/大小，並創建甜甜圈或部分甜甜圈形狀。

paper.customAttributes.filledArc = function(e,t,n,r,i,s){var o=360;if(o==i){i-=.001}i+=s;var u=(90-s)*Math.PI/180,a=e+n*Math.cos(u),f=t-n*Math.sin(u),l=e+(n-r)*Math.cos(u),c=t-(n-r)*Math.sin(u);var h=(90-i)*Math.PI/180,p=e+n*Math.cos(h),d=t-n*Math.sin(h),v=e+(n-r)*Math.cos(h),m=t-(n-r)*Math.sin(h);return{path:[["M",l,c],["L",a,f],["A",n,n,0,+(i>180+s),1,p,d],["L",v,m],["A",n-r,n-r,1,+(i>180+s),0,l,c]]}}

然後：

paper.path().attr({ 
    filledArc: [x,y,radius,width,degrees,rotation] 
    fill: mapit_red, 
    stroke: mapit_black 
});

來源

2013-08-27 14:24:55

使用Raphael JS，部分填充一個圓圈

回答

相關問題