Блог

Главная - Вопросы по программированию - Как разместить сегмент посередине

Как разместить сегмент посередине

#php #svg #segment

Вопрос:

Код внизу рисует сегмент, если вы вставляете номер сегмента. Это прекрасно работает. Теперь я хочу нарисовать сегмент так всегда:

введите описание изображения здесь

Я попытался изменить «90» в $start массиве, но это не решает мою проблему. Так что теперь я заблудился. Я ценю любую помощь.

 <?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);
}

В настоящее время он рисует это:

введите описание изображения здесь

Комментарии:

1. Итак, в отличие от этого, что он рисует в настоящее время? Это было неясно из вашего описания.

2. Я отредактировал сообщение

Ответ №1:

SVG-путь такой же на холсте:

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

Ответ №2:

Я предполагаю, что вы создаете круговую диаграмму.

Вместо того, чтобы создавать одну серверную часть с помощью PHP, вы также можете позволить SVG выполнять всю работу на стороне клиента с помощью pathLength

Со значениями среза: синий:10 , золотой:20 , красный:30, что делает: pathLength="60"

и вам нужно только рассчитать stroke-dasharray разрыв (второе значение = 60 - value )
и 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>

или

вы можете обойтись без самостоятельного создания SVG и использовать современный веб-компонент vanilla JavaScript:

См. Dev.to сообщение: 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>

Метки: