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.
<?php
function segment_circle($segments, $size = 200) {
$radius = $size / 2;
$segment_arc = 360 / $segments;
$generate_arc = function($start_angle, $end_angle) use ($radius) {
$start = [
'x' => $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'
]);
};
?>
<svg width="<?php echo $size ?>" height="200" viewBox="0 0 <?php echo $size ?> <?php echo $size ?>" xmlns="http://www.w3.org/2000/svg">
<?php for ($i = 0; $i < 1; $i++): ?>
<?php
$start_angle = $segment_arc * $i;
$end_angle = $segment_arc * ($i + 1);
?>
<path fill="#FFFFFF" stroke="#000" stroke-width="1" d="<?php echo $generate_arc($start_angle, $end_angle) ?>" />
<?php endfor ?>
</svg>
<?php
}
echo segment_circle($getSegment);
}
Currently it draws this:
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);
<canvas id='canvas'></canvas>
<input type="number" min="1.1" max="12" value="6" step="0.1" onchange="segmentCircle(this.value)" style="position:fixed;top:0;right:0">
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

<style>
svg {
width:180px;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path stroke-dasharray="10 50" stroke-dashoffset="10" stroke="blue"
pathLength="60"
stroke-width="50" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0" fill="none"></path>
<path stroke-dasharray="20 40" stroke-dashoffset="30" stroke="gold"
pathLength="60"
stroke-width="50" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0" fill="none"></path>
<path stroke-dasharray="30 30" stroke-dashoffset="60" stroke="red"
pathLength="60"
stroke-width="50" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0" fill="none"></path>
</svg>
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
<pie-chart>
<slice size="90" stroke="green">HTML</slice>
<slice size="1" stroke="red">JavaScript</slice>
<slice size="9" stroke="blue">CSS</slice>
</pie-chart>
