PHP GD 繪製圓形/橢圓完整指南：imageellipse、imagefilledellipse 與圓形應用實戰

前言

圓形與橢圓是 UI 設計、數據視覺化、幾何繪圖中極高頻的基礎圖元。PHP GD 提供 imageellipse() (空心邊框) 和 imagefilledellipse() (實心填滿) 兩大核心函數，參數統一為**圓心座標 + 寬高**。本文將深入解析參數幾何意義、圓/橢圓判定、實心/空心選擇、圓角矩形/環形圖/標記點等實戰組合模式，並補充 GD 繪圖四步法與圖片格式選型建議。

核心函數簽名與參數幾何模型

// 空心橢圓/圓邊框 (1px 線寬)
bool imageellipse (
    resource $image,
    int $cx, int $cy,        // **圓心** 座標
    int $width, int $height, // **水平直徑、垂直直徑** (非半徑！)
    int $color
);

// 實心填滿橢圓/圓
bool imagefilledellipse (
    resource $image,
    int $cx, int $cy,        // **圓心** 座標
    int $width, int $height, // **水平直徑、垂直直徑**
    int $color
);

關鍵幾何定義 (易錯點)

• 參數是「直徑」而非「半徑」：$width = 水平總寬度，$height = 垂直總高度。半徑 = $width/2。
• 座標是「圓心」而非「左上角」：不同於 imagerectangle 的左上/右下角，橢圓函數以**中心點**定位。
• 包絡矩形：左上角 ($cx - $width/2, $cy - $height/2)，右下角 ($cx + $width/2, $cy + $height/2)。
• 正圓判定：$width === $height 時為正圓。

基礎代碼範例

<?php
// 1. 四步法：創建畫布 → 繪製 → 輸出 → 銷毀
$im = imagecreatetruecolor(400, 300); // 步驟1: 創建真彩色畫布 (推薦)
$white = imagecolorallocate($im, 255,255,255);
$red = imagecolorallocate($im, 255,0,0);
$blue = imagecolorallocate($im, 0,0,255);
$green = imagecolorallocate($im, 0,200,0);
imagefill($im, 0, 0, $white); // 白底

// 2. 繪製圖形 (步驟2)
// 正圓：圓心(100,100) 直徑80 (半徑40)
imageellipse($im, 100, 100, 80, 80, $red);       // 空心紅圓
imagefilledellipse($im, 100, 200, 80, 80, $blue); // 實心藍圓

// 橢圓：圓心(300,150) 寬120 高60
imageellipse($im, 300, 150, 120, 60, $green);     // 空心綠橢圓
imagefilledellipse($im, 300, 250, 120, 60, $green); // 實心綠橢圓

// 3. 輸出圖片 (步驟3)
header('Content-Type: image/png');
imagepng($im); // 輸出到瀏覽器

// 4. 銷毀釋放記憶體 (步驟4)
imagedestroy($im);
?>

GD 繪圖四步法標準流程 (最佳實踐)

1. 創建畫布：imagecreatetruecolor($w, $h) (真彩色，1677萬色，支援 Alpha)
   ⚠️ 棄用 imagecreate() (調色盤模式，僅 256 色，不支援透明度漸變)。
2. 繪製圖形：分配顏色 imagecolorallocate[alpha] → 呼叫繪圖函數。
   建議：先畫背景 imagefill，再畫前景，利用疊加順序實現遮擋。
3. 輸出圖片：header('Content-Type: image/...') → imagepng/jpeg/gif/webp()。
   可選第二參數檔案路徑直接存檔：imagepng($im, 'out.png')。
4. 銷毀資源：imagedestroy($im)。**必須調用**，否則長時間運行腳本會記憶體洩漏 (每張圖佔用 ~寬×高×4 字節)。

三大主流圖片格式選型指南

建議：
• 圖表、UI、透明背景 → **PNG** (或 WebP)
• 照片、背景大圖 → **JPEG** (quality 80-90)
• 動圖 → **GIF** / **WebP**
• 現代項目全站遷移 **WebP** (瀏覽器支援率 > 96%)

進階組合實戰模式

1. 環形圖 / 甜甜圈圖 (疊加挖空法)

function drawRing($im, $cx, $cy, $outerR, $innerR, $color) {
    // 1. 畫大實心圓
    imagefilledellipse($im, $cx, $cy, $outerR*2, $outerR*2, $color);
    // 2. 畫小實心圓 (背景色) 挖空中心
    $bg = imagecolorallocate($im, 255,255,255); // 假設白底
    imagefilledellipse($im, $cx, $cy, $innerR*2, $innerR*2, $bg);
    // 進階：透明背景需用 imagecolorallocatealpha + alphablending
}

2. 圓角矩形 (四扇形 + 兩矩形 組合法)

function drawRoundRect($im, $x1, $y1, $x2, $y2, $r, $color, $filled = true) {
    $func = $filled ? 'imagefilledellipse' : 'imageellipse';
    $func2 = $filled ? 'imagefilledrectangle' : 'imagerectangle';
    $d = $r * 2;
    // 四個角 (用 filledellipse 畫 1/4 圓，實際用 filledarc 更精確)
    // 此處簡化：四個圓角用 filledarc (PIE模式)
    if ($filled) {
        imagefilledarc($im, $x1+$r, $y1+$r, $d, $d, 180, 270, $color, IMG_ARC_PIE);
        imagefilledarc($im, $x2-$r, $y1+$r, $d, $d, 270, 360, $color, IMG_ARC_PIE);
        imagefilledarc($im, $x2-$r, $y2-$r, $d, $d, 0, 90, $color, IMG_ARC_PIE);
        imagefilledarc($im, $x1+$r, $y2-$r, $d, $d, 90, 180, $color, IMG_ARC_PIE);
        // 中間填滿
        imagefilledrectangle($im, $x1+$r, $y1, $x2-$r, $y2, $color);
        imagefilledrectangle($im, $x1, $y1+$r, $x2, $y2-$r, $color);
    } else {
        // 空心圓角矩形較複雜，建議用 imagepolygon 或多線段組合
    }
}

3. 圓形標記點 / 氣泡圖 / 散點圖節點

function drawBubble($im, $x, $y, $radius, $color, $borderColor = null, $label = '') {
    // 實心主體
    imagefilledellipse($im, $x, $y, $radius*2, $radius*2, $color);
    // 邊框 (可選)
    if ($borderColor) imageellipse($im, $x, $y, $radius*2, $radius*2, $borderColor);
    // 標籤文字 (需 imagettftext)
    if ($label) {
        // 計算文字位置置中...
        imagettftext($im, 10, 0, $x - $tw/2, $y + $th/2, $borderColor ?: $color, $font, $label);
    }
}

4. 同心圓 / 靶心 / 雷達圖背景

function drawConcentric($im, $cx, $cy, $maxR, $steps, $colors) {
    for ($i = 0; $i < $steps; $i++) {
        $r = $maxR * (1 - $i/$steps);
        $color = $colors[$i % count($colors)];
        imageellipse($im, $cx, $cy, $r*2, $r*2, $color); // 空心同心圓
        // 或 filledellipse 實心同心圓 (由外向內畫)
    }
}

常見錯誤與調試清單

1. 參數傳半徑而非直徑：導致圖形只有預期 1/4 大小。口訣：參數是直徑，寬高是直徑。
2. 座標傳左上角而非圓心：圖形位置偏移。口訣：橢圓函數收圓心。
3. 實心/空心函數搞混：imageellipse 只有邊框，imagefilledellipse 才填滿。
4. 顏色分配失敗：未用 imagecreatetruecolor，調色盤滿 256 色。永遠用 truecolor。
5. 透明背景失效：需 imagealphablending(false) + imagesavealpha(true) + imagecolorallocatealpha(..., 127) + imagefill 透明色。
6. 記憶體未釋放：漏寫 imagedestroy($im)。長腳本必崩。

總結

imageellipse() / imagefilledellipse() 以**圓心定位、直徑定尺**為核心參數模型，是 GD 圓形繪製的雙子星。掌握四步法流程、格式選型策略、疊加組合思維 (環形=大實心減小實心、圓角矩形=四扇形+兩矩形)，即可應對圓形標記、氣泡圖、環形進度、圓角卡片、同心圓雷達等 90% 圓形相關場景。記住核心口訣：真彩色、圓心定位、直徑參數、四步法、必銷毀。