计算圆上的 SVG 圆弧路径答案

【问题标题】：Calculating SVG arc path on circle计算圆上的 SVG 圆弧路径
【发布时间】：2020-09-16 02:49:20
【问题描述】：

我正在尝试使用 SVG 路径元素绘制类似于饼图的 SVG 对象。我之前使用过stackoverflow post 中的示例来生成 SVG 弧形路径。但不知何故，我的两条弧线应该是同一个圆的一部分，并没有形成一个完整的圆。这是我用来在圆上生成圆弧的代码示例。

var draw = SVG('drawing').size(300, 130)

var radi = 20;
var st = {'x':0,'y':0};

var pie1Arc = this.describeArc(this.st.x,this.st.y,this.radi,0,42) 
var pie1 = draw.path('M 0 0 '+ pie1Arc)
pie1.fill('none')
pie1.stroke({ color: '#f06', width: 3, linecap: 'round', linejoin: 'round' })
pie1.move(80,80)


var pie2Arc = this.describeArc(this.st.x,this.st.y,this.radi,42,360) 
var pie2 = draw.path('M 0 0 '+ pie2Arc)
pie2.fill('none')
pie2.stroke({ color: '#f06', width: 3, linecap: 'round', linejoin: 'round' })
pie2.move(80,80)

    
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;       
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.5.0/svg.min.js"></script>
<div id="drawing"></div>

【问题讨论】：

标签： javascript svg svg.js

【解决方案1】：

我重写了describeArc 并重置了st = {'x':80,'y':80};，而不是移动每个弧。如果您确实需要翻译，请将 2 条弧线放在一个组中并翻译该组。

var draw = SVG('drawing').size(300, 130)

var radi = 20;
var st = {'x':80,'y':80};

var pie1Arc = this.describeArc(this.st.x,this.st.y,this.radi,0,42) 
var pie1 = draw.path(pie1Arc)
pie1.fill('none')
pie1.stroke({ color: '#f06', width: 3, linecap: 'round', linejoin: 'round' })



var pie2Arc = this.describeArc(this.st.x,this.st.y,this.radi,42,360) 
var pie2 = draw.path(pie2Arc)
pie2.fill('none')
pie2.stroke({ color: '#f06', width: 3, linecap: 'round', linejoin: 'round' })


    
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

    var d = `M${start.x},${start.y}A${radius}, ${radius}, 0, ${largeArcFlag}, 0, ${end.x}, ${end.y}`;
    

    return d;       
}

svg{border:solid}

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.5.0/svg.min.js"></script>
<div id="drawing"></div>

【讨论】：