How to place segment in the middle

Question

The code underneath draws a segment if you insert a segment number. This works fine. Now I want to draw the segment like this always:

I have tried to change the "90" in the $start array but this doesn't solve my problem. So I'm lost now. I appreciate any help.

 $radius + ($radius * cos( ($end_angle - 90) * pi() / 180 )),
                'y' => $radius + ($radius * sin( ( $end_angle - 90) * pi() / 180 ))
            ];

            $end = [
                'x' => $radius + ($radius * cos( ($start_angle - 90) * pi() / 180 )),
                'y' => $radius + ($radius * sin( ($start_angle - 90) * pi() / 180 ))
            ];

            $arc = $end_angle - $start_angle <= 180 ? '0' : '1';

            return implode( ' ', [
                // Move to
                'M', $start[ 'x' ], $start[ 'y' ],
                // Bogen zeichnen
                'A', $radius, $radius, 0, $arc, 0, $end[ 'x' ], $end[ 'y' ],
                // Line to / Close Path
                'L', $radius, $radius, 'Z'
            ]);
        };

        ?>


Currently it draws this:

user_12656388 · Answer

SVG-path is the same in canvas:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

function segmentCircle(segment, diameter = 200){
    let w = canvas.width = diameter + 20;
    let h = canvas.height = diameter + 20;
    ctx.clearRect(0,0,w,h);
    let radius = diameter/2;
    let largeArc = (segment > 2) ? 0 : 1;
    
    let pathString = `M ${w/2} ${h/2} `; // center
    
    let arcStartX = radius * Math.sin((Math.PI)/segment); //half of the angle
    let arcStartY = radius * Math.cos((Math.PI)/segment);
    
    pathString += `L ${w/2 - arcStartX} ${h/2 - arcStartY} `; // from center to left start point of the arc
    pathString += `A ${radius} ${radius} 0 ${largeArc} 1 ${w/2 + arcStartX} ${h/2 - arcStartY} z`; // to right point of the arc
    
    ctx.stroke(new Path2D(pathString));
}

segmentCircle(document.querySelector('input').value);

user_2520800 · Answer

I presume you are creating a pie-chart.

Instead of creating one server-side with PHP, you can also let SVG do all the work client-side with pathLength

With slice values: blue:10 , gold:20 , red:30 that makes: pathLength="60"

and you only have to calculate the stroke-dasharray gap (second value = 60 - value)
and stroke-dashoffset accumulative value : 10 , 30 , 60

or

you can do without creating SVG yourself, and use a modern vanilla JavaScript Web Component:

See Dev.to post: https://dev.to/dannyengelman/what-web-technologies-are-required-to-draw-a-pie-chart-in-2021-spoiler-alert-a-standard-web-component-will-do-1j56


  HTML
  JavaScript
  CSS

How to place segment in the middle

2 Answers

or