日本語
日本語
PHPでは、 ImageFilledArcは非常に実用的な機能であり、多くの場合、充填色のファンの形やアークを描くために使用されます。それにより、ARC Progress Barsの描画効果を簡単に実現できます。この進行状況バーをインタラクティブな動的な方法で表示できる場合、ユーザーエクスペリエンスが向上し、視覚効果がよりクールになります。
この記事では、 ImageFildarcを使用してインタラクティブなARC Progress Barを作成し、動的な進行状況の視覚効果を実現する方法について詳しく説明します。
ImageFilledArc関数の構文は次のとおりです。
imagefilledarc(
resource $image,
int $cx,
int $cy,
int $width,
int $height,
int $start,
int $end,
int $color,
int $style
): bool
$画像：Canvasリソース。
$ cx 、 $ cy ：アーク中心点の座標。
$ width 、 $ height ：アーク楕円の幅と高さ。
$ start 、 $ end ：開始角度と末端角度（ユニットは3時方向を指す0度、および反時計回り）。
$カラー：色の塗りつぶし。
$スタイル：描画スタイル、通常はIMG_ARC_PIEを使用してファンの形を描画します。
次のコード例では、進行状況が75％であると仮定して、ARC Progress Barを描画します。
<?php
header("Content-Type: image/png");
$width = 200;
$height = 200;
$image = imagecreatetruecolor($width, $height);
$bg_color = imagecolorallocate($image, 255, 255, 255);
$bar_color = imagecolorallocate($image, 50, 150, 250);
$gray_color = imagecolorallocate($image, 230, 230, 230);
imagefill($image, 0, 0, $bg_color);
// 灰色の底弧を描きます，全体的な進捗を表します
imagefilledarc($image, $width/2, $height/2, 150, 150, 0, 360, $gray_color, IMG_ARC_PIE);
// 動的進歩 75%
$progress = 75;
$end_angle = ($progress / 100) * 360;
// 色付きの進行状況アークを描きます
imagefilledarc($image, $width/2, $height/2, 150, 150, 0, $end_angle, $bar_color, IMG_ARC_PIE);
imagepng($image);
imagedestroy($image);
?>
PHPはサーバー側の言語であり、クライアントの相互作用と動的な変更を直接制御することはできません。ただし、パラメーターを渡してユーザーが入力するか、フロントエンドが進行状況値を渡し、PHPスクリプトを再リケストして対応する進行状況の画像を出力できます。
たとえば、フロントエンドページは、ajaxまたはフォームを介して進行状況パラメーターを渡します。
http://m66.net/progress.php?value=60
PHPスクリプトは値パラメーターを受信し、対応するプログレスバーを生成します。
<?php
// progress.php
$value = isset($_GET['value']) ? intval($_GET['value']) : 0;
if ($value < 0) $value = 0;
if ($value > 100) $value = 100;
header("Content-Type: image/png");
$width = 200;
$height = 200;
$image = imagecreatetruecolor($width, $height);
$bg_color = imagecolorallocate($image, 255, 255, 255);
$bar_color = imagecolorallocate($image, 50, 150, 250);
$gray_color = imagecolorallocate($image, 230, 230, 230);
imagefill($image, 0, 0, $bg_color);
imagefilledarc($image, $width/2, $height/2, 150, 150, 0, 360, $gray_color, IMG_ARC_PIE);
$end_angle = ($value / 100) * 360;
imagefilledarc($image, $width/2, $height/2, 150, 150, 0, $end_angle, $bar_color, IMG_ARC_PIE);
imagepng($image);
imagedestroy($image);
?>
次に、HTMLでJavaScriptを使用して画像を定期的に更新して、動的な進捗バー効果を形成します。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>インタラクティブなアーク進捗バーデモンストレーション</title>
</head>
<body>
<img id="arcProgress" src="http://m66.net/progress.php?value=0" alt="進捗バー" />
<br/>
<button onclick="startProgress()">進捗を開始します</button>
<script>
let progress = 0;
let timer;
function startProgress() {
if (timer) clearInterval(timer);
progress = 0;
timer = setInterval(() => {
if (progress > 100) {
clearInterval(timer);
return;
}
document.getElementById('arcProgress').src = `http://m66.net/progress.php?value=${progress}&t=${Date.now()}`;
progress += 2;
}, 100);
}
</script>
</body>
</html>
センターテキストの追加： ImageStringまたはImagettftextを使用して、Progress Barの中心にパーセンテージ数を表示します。
マルチカラー勾配：複数のアーク型セグメントを組み合わせて、勾配効果を作成します。
リングスタイル：2つの弧を描きます。1つは底部リングとして、もう1つは進行状況リングとして描き、中央に空白を残してリングを形成します。
フロントエンドキャンバス：PHPを使用してデータを生成し、フロントエンドでスムーズなアニメーションを実現します。
この記事で導入された方法を使用して、 ImageFilledArcおよびシンプルなパラメーターの描画関数と組み合わせて、背景レポート、タスク進行のプロンプト、その他のシナリオに適した実用的な機能と優れた視覚効果を備えたインタラクティブなARC進捗バーを簡単に作成できます。
このアイデアを使用して、クールな進行状況バーを作成できることを願っています！幸せなコーディングをお祈りします！
