Deutsch
Deutsch
Im PHP ist ImageFilledarc eine sehr praktische Funktion, die häufig zum Zeichnen von Lüfterformen oder Bögen mit Füllfarben verwendet wird. Damit können wir den Zeichnungseffekt von Bogen -Fortschrittsbalken leicht erreichen. Wenn dieser Fortschrittsbalken auf interaktive dynamische Weise angezeigt werden kann, ist die Benutzererfahrung besser und der visuelle Effekt kühler.
In diesem Artikel wird im Detail erläutert, wie ImageFilledarc verwendet wird, um einen interaktiven Bogen -Fortschrittsbalken zu erstellen und visuelle Effekte für dynamische Fortschritte zu erzielen.
Die Syntax der imageFilledarc -Funktion lautet wie folgt:
imagefilledarc(
resource $image,
int $cx,
int $cy,
int $width,
int $height,
int $start,
int $end,
int $color,
int $style
): bool
$ Bild : Canvas -Ressource.
$ cx , $ cy : Die Koordinaten des ARC Center Point.
$ width , $ Höhe : Die Breite und Höhe des Bogen -Ellipse.
$ start , $ end : Der Startwinkel und der Endwinkel (Einheit beträgt Grad, 0 Grad, die auf die 3 -Uhr -Richtung und positiv gegen den Uhrzeigersinn hinweisen).
$ Farbe : Farbe füllen.
$ style : Zeichenstil, im Allgemeinen img_arc_pie , um die Lüfterform zu zeichnen.
Das folgende Codebeispiel zeichnet eine ARC -Fortschrittsbalken, vorausgesetzt, der Fortschritt beträgt 75%.
<?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);
// Zeichnen Sie einen grauen Bodenbogen，Repräsentiert den Gesamtfortschritt
imagefilledarc($image, $width/2, $height/2, 150, 150, 0, 360, $gray_color, IMG_ARC_PIE);
// Dynamischer Fortschritt 75%
$progress = 75;
$end_angle = ($progress / 100) * 360;
// Zeichnen Sie einen farbigen Fortschrittsbogen
imagefilledarc($image, $width/2, $height/2, 150, 150, 0, $end_angle, $bar_color, IMG_ARC_PIE);
imagepng($image);
imagedestroy($image);
?>
PHP ist eine serverseitige Sprache und kann die Interaktion und die dynamischen Änderungen des Clients nicht direkt steuern. Wir können jedoch Parameter übergeben, um den Benutzer einzugeben oder den Front-End den Fortschrittswert zu übergeben und dann das PHP-Skript erneut zu fordern, um das Bild des entsprechenden Fortschritts auszugeben.
Beispielsweise übergibt die Front-End-Seite die Fortschrittsparameter über Ajax oder Form:
http://m66.net/progress.php?value=60
Das PHP -Skript empfängt den Wertparameter und generiert dann die entsprechende Fortschrittsleiste.
<?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);
?>
Verwenden Sie dann in HTML JavaScript, um das Bild regelmäßig zu aktualisieren, um einen dynamischen Fortschrittsbalkeneffekt zu bilden:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Interaktive ARC -Fortschrittsbalken Demonstration</title>
</head>
<body>
<img id="arcProgress" src="http://m66.net/progress.php?value=0" alt="Fortschrittsbalken" />
<br/>
<button onclick="startProgress()">Fortschritt beginnen</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>
Fügen Sie Mitte Text hinzu : Verwenden Sie Imagestring oder ImagettFtext, um prozentuale Zahlen in der Mitte der Fortschrittsleiste anzuzeigen.
Multi-Farben-Gradient : Kombinieren Sie mehrere arc-förmige Segmente, um einen Gradienteneffekt zu erzielen.
Ringstil : Zeichnen Sie zwei Bögen, eines als unterer Ring und der andere als Fortschrittsring, und lassen Sie den weißen Raum in der Mitte, um einen Ring zu bilden.
Front-End-Canvas : Verwenden Sie PHP, um Daten zu generieren, und Front-End, um glattere Animationen zu erreichen.
Durch die in diesem Artikel eingeführten Methoden in Kombination mit der Zeichnungsfunktion von ImageFilledarc und einfachen Parametern ist es einfach, interaktive ARC -Fortschrittsbalken mit praktischen Funktionen und guten visuellen Effekten zu erstellen, die für Hintergrundberichte, Aufgabenaufforderungen auf Aufgaben und andere Szenarien geeignet sind.
Ich hoffe, Sie können diese Idee verwenden, um eine coole Progress -Bar zu erstellen! Ich wünsche Ihnen eine glückliche Codierung!
