Как рассчитать SVG Path для дуги (круга)

Question

Учитывая круг с центром в (200,200), радиус 25, как мне нарисовать дугу от 270 градусов до 135 градусов и ту, которая идет от 270 до 45 градусов?

0 градусов означает, что он находится справа от оси x (справа) (то есть это 3 часа по часовой стрелке) 270 градусов означает, что это 12-часовая позиция, а 90 означает, что это 6-часовая позиция

В общем, каков путь для дуги для части круга с

x, y, r, d1, d2, direction

смысл

center (x,y), radius r, degree_start, degree_end, direction

Answer 1

// putr following above class
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
    ].join(" ");

    return d;       
}

// put following in render
 <Svg width={150} height={150}>
            <Text style={{position:'absolute', top:50,left:60}}>24</Text> 
            <Text style={{position:'absolute', top:70,left:50}}>Rooms</Text> 
  <Path
d={showArc}
fill="transparent"
stroke="green"
strokeWidth="15"
/>
 <Path
d={showArc1}
fill="transparent"
stroke={Colors.lightOrange}
strokeWidth="15"
/>
<Path
d={showArc2}
fill="transparent"
stroke="gray"
strokeWidth="15"
/> 
</Svg>

Answer 2

вы можете использовать код JSFiddle, который я сделал для ответа выше:

https://jsfiddle.net/tyw6nfee/

все, что вам нужно сделать, это изменить код console.log последней строки и задать ему свой собственный параметр:

  console.log(describeArc(255,255,220,30,180));
  console.log(describeArc(CenterX,CenterY,Radius,startAngle,EndAngle))

Answer 3

Компонент ReactJS на основе выбранного ответа:

import React from 'react';

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

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

const describeSlice = (x, y, radius, startAngle, endAngle) => {

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

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

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

    return d;
};

const path = (degrees = 90, radius = 10) => {
    return describeSlice(0, 0, radius, 0, degrees) + 'Z';
};

export const Arc = (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
    <g transform="translate(150,150)" stroke="#000" strokeWidth="2">
        <path d={path(props.degrees, props.radius)} fill="#333"/>
    </g>

</svg>;

export default Arc;