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) 
}