Расчет SVG ar c пути по кругу - PullRequest
Новая
       48

Расчет SVG ar c пути по кругу

1 голос
/ 28 мая 2020

Я пытаюсь нарисовать объекты SVG, похожие на диаграмму p ie, с использованием элемента пути SVG. Ранее я использовал пример из этого сообщения stackoverflow для создания пути SVG ar c. Но почему-то два моих ar c, которые должны быть частью одного круга, не образуют полный круг. вот пример кода, который я использовал для создания дуг на окружности. 

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>

1 Ответ

1 голос
/ 29 мая 2020

Я переписал describeArc, а также сбросил st = {'x':80,'y':80}; вместо перемещения каждого ar c. Если вам действительно нужно переводить, поместите 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>
...