SVG圆弧区域

Posted 2023-02-27

【中文标题】SVG圆弧区域

【英文标题】：SVG arc zone in a circle

【发布时间】：2014-02-21 17:17:00

【问题描述】：

我想在 SVG 中获得类似的东西。 到目前为止，我已经制作了圆圈，但我想正确定位周围的黑色区域。

一个 API 返回四个值：

start_angle : 第一个角度（看起来是弧度） end_angle : 最终角度（看起来是弧度） inner_radius : 较小的半径 outer_radius : 更大的半径

这是我想要的方案：

我正在使用 javascript 制作 SVG，所以我的代码是这样的：

    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)];

你能帮我解决这个问题吗？

感谢您的帮助。

【参考方案1】：

我假设您可以定义中心点。如果是这样，请尝试以下操作（它使用度数）并绘制两条单独的弧线，内弧和外弧。但是你可以得到每个的起点和终点。路径分4部分绘制：

1) 外圆弧

2) 开始外弧和开始内弧之间的桥梁

3) 内弧

4) 内弧端到外弧端

注意：路径的 fill-rule=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)

【讨论】：

非常感谢。它完成了这项工作;)