SVG圓弧區

Question

我想在SVG中得到類似的東西。 到目前爲止，我已經創造了這個圈子，但我想正確定位周圍的黑色區域。

的API返回四個值：

• start_angle：第一角度（看起來是一個弧度）
• end_angle：最終角度（看起來是一個弧度）
• inner_radius：較小的半徑
• outer_radius：更大的半徑

這裏是我想要的方案：

我做了SVG的JavaScript，所以我的代碼是這樣的：

var myArc = document.createElementNS('http://www.w3.org/2000/svg', 'path'); 
    myArc.setAttribute('fill', 'black'); 
    myArc.setAttribute('d', 'M-'+outer_radius+',32A'+outer_radius+','+outer_radius+' 0 0,1 -'+outer_radius+',-32L-'+inner_radius+',-30A'+inner_radius+','+inner_radius+' 0 0,0 -'+inner_radius+',30Z');// TODO 
    arcs.appendChild(myArc); 

這可以繪製一個區域，但我不知道是什麼值放在 我已經試圖確定使用點，但它不起作用：

var pointA = [outer_radius * Math.cos(start_angle * 180/Math.PI), outer_radius * Math.sin(start_angle * 180/Math.PI)]; 
var pointB = [outer_radius * Math.cos(end_angle * 180/Math.PI), outer_radius * Math.sin(end_angle * 180/Math.PI)]; 
var pointC = [inner_radius * Math.cos(end_angle * 180/Math.PI), inner_radius * Math.sin(end_angle * 180/Math.PI)]; 
var pointD = [inner_radius * Math.cos(start_angle * 180/Math.PI), inner_radius * Math.sin(start_angle * 180/Math.PI)]; 

你能幫我解決這個問題嗎？

感謝您的幫助。

Answer 1

我假設你可以定義中心點。如果是這樣，請嘗試以下（它使用度）並繪製兩個獨立的弧，內部和外部。但是你可以得到每個的開始和結束點。的路徑被繪製在4個部分：

1）外側圓弧

2）之間的橋樑開始外，並開始內弧

3）內側圓弧

4）內圓弧端到外弧結束

注：填寫規則= EVENODD的路徑

編輯：新增ArcSweep

function drawInnerOuterArcs() 
{ 
    var centerX=200 
    var centerY=200 
    var innerRadius=120 
    var outerRadius=160 
    var startAngle=310 //--degrees 
    var endAngle=30 //--degrees 
    var ArcSweep = endAngle - startAngle <= 180 ? "0" : "1"; 

    function polarToCartesian(centerX, centerY,radiusX, radiusY, angleInDegrees) 
    { 
     var angleInRadians = (angleInDegrees-90) * Math.PI/180.0; 
     return { 
     x: centerX + (radiusX * Math.cos(angleInRadians)), 
     y: centerY + (radiusY * Math.sin(angleInRadians)) 
     }; 
    } 
    //---outer points--- 
    var StartPnt1 = polarToCartesian(centerX, centerY, outerRadius, outerRadius, startAngle); 
    var EndPnt1 = polarToCartesian(centerX, centerY, outerRadius, outerRadius, endAngle); 

    //---outer arc: begin path--- 
    var d1 = [ 
    "M", StartPnt1.x, StartPnt1.y, 
    "A", outerRadius, outerRadius, 0,ArcSweep, 1, EndPnt1.x, EndPnt1.y 
    ].join(" "); 

    //---inner points--- 
    var StartPnt2 = polarToCartesian(centerX, centerY, innerRadius, innerRadius, startAngle); 
    var EndPnt2 = polarToCartesian(centerX, centerY, innerRadius, innerRadius, endAngle); 

    //---start bridge-- 
    d1+="M"+ StartPnt1.x+" "+StartPnt1.y+"L"+StartPnt2.x+" "+StartPnt2.y 

    //---inner arc--- 
    var d2 = [ 
    "A", innerRadius, innerRadius, 0,ArcSweep,1, EndPnt2.x, EndPnt2.y 
    ].join(" "); 

    //--end bridge-- 
    d2 +="L"+EndPnt1.x+" "+EndPnt1.y 

    //---arc fill-rule="evenodd" 
    myArc.setAttribute("d",d1+d2) 
}