首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 網頁程式設計 >> PHP 程式設計 >> PHP 綜合知識

PHP GD imagearc 繪製弧線/橢圓弧完整指南:參數幾何意義與座標系視覺化

     編輯:PHP 綜合知識

前言

imagearc() 是 PHP GD 庫中繪製**橢圓弧線** (含圓弧) 的基礎函數。理解其參數的幾何意義——特別是**角度座標系**與**橢圓包絡盒**——是正確繪製弧線、扇形邊框、進度環、笑臉等圖形的關鍵。本文將通過幾何圖解與代碼實驗,徹底講透參數含義。

函數簽名與參數詳解

bool imagearc (
    resource $image,
    int $cx, int $cy,        // 橢圓**圓心**座標
    int $width, int $height, // 橢圓**寬度、高度** (即包絡矩形尺寸)
    int $start, int $end,    // 起始、結束**角度** (度數)
    int $color               // 線條顏色
);

核心幾何模型:包絡矩形與角度定義

1. 包絡矩形

函數**不直接接受半徑**,而是接受**寬度** 和**高度**。這定義了一個**以 ($cx, $cy) 為中心**的矩形區域,橢圓完美內切於此矩形。

  • 矩形左上角:($cx - $width/2, $cy - $height/2)
  • 矩形右下角:($cx + $width/2, $cy + $height/2)
  • 若 $width === $height → 正圓,半徑 r = $width/2

2. GD 角度座標系 (關鍵!)

**非標準數學座標系**,請牢記:

  • 0 度:位於 **3 點鐘方向** (正 X 軸,圓心水平向右射線)
  • 正方向:順時針 (Clockwise)
  • 90 度:6 點鐘方向 (正 Y 軸,向下)
  • 180 度:9 點鐘方向 (負 X 軸)
  • 270 度:12 點鐘方向 (負 Y 軸,向上)
  • 360 度:回到 3 點鐘方向 (閉合圓)

數學座標系轉換公式:
$gdAngle = 90 - $mathAngle (數學制:0°在上,逆時針)
$gdAngle = 360 - $mathAngle + 90 (等效)

3. 角度範圍與跨越 0° 處理

  • $start < $end:順時針從 start 畫到 end (標準)
  • $start > $end:GD 內部會自動處理跨越 360° (如 300° 到 60° 相當於 300° 到 420°)
  • 繪製完整圓:$start=0, $end=360 (或 imageellipse() 更簡潔)

視覺化驗證代碼:角度座標系實測

<?php
$im = imagecreatetruecolor(500, 400);
$white = imagecolorallocate($im, 255,255,255);
$black = imagecolorallocate($im, 0,0,0);
$red = imagecolorallocate($im, 255,0,0);
$blue = imagecolorallocate($im, 0,0,255);
imagefill($im, 0, 0, $white);

$cx = 250; $cy = 200; $w = 300; $h = 200; // 橢圓

// 1. 畫包絡矩形 (虛線效果)
imagerectangle($im, $cx-$w/2, $cy-$h/2, $cx+$w/2, $cy+$h/2, $black);

// 2. 畫座標軸
imageline($im, $cx, 0, $cx, 400, $black); // Y軸
imageline($im, 0, $cy, 500, $cy, $black); // X軸
imagestring($im, 3, $cx+5, $cy-20, "0° (3點鐘)", $black);
imagestring($im, 3, $cx-40, $cy+$h/2+5, "90° (6點鐘)", $black);
imagestring($im, 3, $cx-$w/2-50, $cy-5, "180° (9點鐘)", $black);
imagestring($im, 3, $cx+5, $cy-$h/2-20, "270° (12點鐘)", $black);

// 3. 繪製關鍵弧線驗證
// 紅色:0° 到 90° (右下象限)
imagearc($im, $cx, $cy, $w, $h, 0, 90, $red);
// 藍色:90° 到 180° (左下象限)
imagearc($im, $cx, $cy, $w, $h, 90, 180, $blue);
// 綠色:180° 到 270° (左上象限)
$green = imagecolorallocate($im, 0,200,0);
imagearc($im, $cx, $cy, $w, $h, 180, 270, $green);
// 橙色:270° 到 360° (右上象限)
$orange = imagecolorallocate($im, 255,165,0);
imagearc($im, $cx, $cy, $w, $h, 270, 360, $orange);

// 4. 標註圓心
imagefilledellipse($im, $cx, $cy, 6, 6, $black);

header('Content-Type: image/png');
imagepng($im);
imagedestroy($im);
?>

實戰案例:繪製進度環 / 仪表盤

<?php
function drawProgressRing($progress = 0.65) { // 0.0 - 1.0
    $size = 300;
    $im = imagecreatetruecolor($size, $size);
    
    // 透明背景
    imagealphablending($im, false);
    $transparent = imagecolorallocatealpha($im, 0,0,0, 127);
    imagefill($im, 0, 0, $transparent);
    imagesavealpha($im, true);
    
    $cx = $cy = $size/2;
    $outerR = 130; // 外環半徑
    $innerR = 100; // 內環半徑 (環寬 30px)
    $lineW = $outerR - $innerR;
    
    $bgColor = imagecolorallocatealpha($im, 200,200,200, 30); // 背景環灰色半透明
    $fgColor = imagecolorallocatealpha($im, 41, 128, 185, 0); // 前景藍色不透明
    
    // 1. 畫背景環 (完整圓環) - 使用兩個填滿橢圓疊加挖空
    imagefilledellipse($im, $cx, $cy, $outerR*2, $outerR*2, $bgColor);
    imagefilledellipse($im, $cx, $cy, $innerR*2, $innerR*2, $transparent); // 挖空
    
    // 2. 畫進度弧 (使用 imagearc 畫粗線較難控制寬度,實際建議用 imagefilledarc 疊加)
    // 此處演示 imagearc 畫細線弧
    $startAngle = -90; // 從 12 點鐘開始
    $endAngle = $startAngle + $progress * 360;
    
    // 為畫粗弧線,可疊加多條細線 (簡易做法)
    for ($i = 0; $i < $lineW; $i++) {
        $r = $innerR + $i;
        imagearc($im, $cx, $cy, $r*2, $r*2, $startAngle, $endAngle, $fgColor);
    }
    
    // 3. 繪製百分比文字 (需 imagettftext)
    // ...
    
    header('Content-Type: image/png');
    imagepng($im);
    imagedestroy($im);
}
drawProgressRing(0.75);
?>

imagearc vs imageellipse vs imagefilledarc

函數功能輸出典型用途
imagearc畫**橢圓弧線** (線條)1像素寬線條 (無填滿)進度環細線、幾何圖形邊框、笑臉嘴巴
imageellipse畫**完整橢圓/圓周**閉合線條圓形邊框、標記圓點
imagefilledarc畫**填滿扇形/弦形**實心區域圓餅圖、實心進度環 (疊加)、實心扇區
imagefilledellipse畫**填滿橢圓/圓**實心圓盤實心圓、環形圖挖空遮罩

常見錯誤與調試技巧

  1. 弧線不顯示/位置錯:檢查 $cx, $cy 是否為圓心 (而非左上角)。imagearc 參數是**圓心**,imagerectangle 才是左上/右下角。
  2. 角度方向反/位置對不上:確認 GD 角度制 (0°右、順時針)。用 var_dump($start, $end) 印出角度值。
  3. 橢圓變扁/變長:$width 對應水平直徑,$height 對應垂直直徑。別搞反。
  4. 線條太細/有斷點:GD 繪製粗線支援有限。需粗線弧形請用 imagefilledarc 疊加實現 (外環減內環)。
  5. 透明背景失效:必須 imagealphablending(false) + imagesavealpha(true) + 分配 imagecolorallocatealpha(..., 127)。

總結

imagearc() 核心在於理解**包絡矩形定義橢圓**與 **GD 獨特角度座標系 (0°右、順時針)**。掌握這兩點,配合 imageellipse()、imagefilledarc()、imagefilledellipse(),即可構建進度環、儀表盤、幾何繪圖、圖表邊框等豐富視覺元件。記住:需粗線/填滿弧形時,首選 imagefilledarc 疊加法,避免手動疊加細線的效能與鋸齒問題。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved