0
254
ViewsCómo colocar un segmento en el medio
El código debajo dibuja un segmento si inserta un número de segmento. Esto funciona bien. Ahora quiero dibujar el segmento así siempre:
He intentado cambiar el "90" en la matriz $start pero esto no resuelve mi problema. Así que estoy perdido ahora. Agradezco cualquier ayuda.
<?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); }Actualmente dibuja esto:
2 answers
Answer question0
La ruta SVG es la misma en el lienzo:
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">0
Supongo que está creando un gráfico circular.
En lugar de crear un lado del servidor con PHP, también puede dejar que SVG haga todo el trabajo del lado del cliente con pathLength
Con valores de segmento: blue:10 , gold:20 , red:30 eso hace: pathLength="60"
y solo tiene que calcular la brecha entre stroke-dasharray (segundo valor = 60 - value )
y valor acumulativo stroke-dashoffset : 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>o
puede prescindir de crear SVG usted mismo y usar un moderno componente web de JavaScript vainilla :
Ver Dev.to post: https://dev.to/dannyengelman/what-web-technologies-are-required-to-draw-a-pie-chart-in-2021-spoiler-alert-a-standard-web- componente-hará-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>