원 안에있는 SVG 호 영역

Question

SVG에서 그런 것을 얻고 싶습니다. 지금까지 서클을 만들었지 만 주변에 검은 색 영역을 올바르게 배치하려고합니다.

• start_angle :

  하는 API입니다 네 개의 값을 반환 첫 번째 각도는

• end_angle (라디안으로 보이는) : 최종 각도
• inner_radius (라디안으로 보이는) : 작은 반경
• outer_radius : 더 큰 반경 여기

내가 원하는 무엇을 계획이다 0 나는 자바 스크립트와 SVG를 만들고있어 1,236,

그래서 내 코드는 다음과 같이이다.

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