Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

255
Vistas
How to place segment in the middle

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:

enter image description here

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:

enter image description here

over 4 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

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">

over 4 years ago · Santiago Trujillo Denunciar

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>

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

<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>

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda