如何将段放在中间

Posted 2023-03-28

【中文标题】如何将段放在中间

【英文标题】：How to place segment in the middle

【发布时间】：2021-10-25 16:37:02

【问题描述】：

如果您插入一个段编号，下面的代码将绘制一个段。这工作正常。现在我想总是这样画线段：

我试图更改$start 数组中的“90”，但这并不能解决我的问题。所以我现在迷路了。感谢您的帮助。

<?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   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- d="<?php echo $generate_arc($start_angle, $end_angle) ?>" />
            <?php endfor ?>
        </svg>
        <?php
    
    echo segment_circle($getSegment);
 

目前它是这样画的：

【问题讨论】：

那么，相比之下，它目前绘制的是什么？根据您的描述，这还不清楚。

我编辑了帖子

【参考方案1】：

SVG-path 在画布中是一样的：

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

使用切片值：blue:10、gold:20、red: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- 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- 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- d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0" fill="none"></path>
</svg>

或

您可以不用自己创建 SVG，而是使用现代 vanilla JavaScript Web 组件：

请参阅 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>