Français
Français
Dans PHP, ImageFildArc est une fonction très pratique, souvent utilisée pour dessiner des formes de ventilateur ou des arcs avec des couleurs de remplissage. Avec lui, nous pouvons facilement réaliser l'effet de dessin des barres de progrès de l'arc. Si cette barre de progrès peut être affichée de manière dynamique interactive, l'expérience utilisateur sera meilleure et l'effet visuel sera plus frais.
Cet article expliquera en détail comment utiliser ImageFildArc pour créer une barre de progrès d'arc interactive et réaliser des effets visuels de progression dynamique.
La syntaxe de la fonction ImageFildArc est la suivante:
imagefilledarc(
resource $image,
int $cx,
int $cy,
int $width,
int $height,
int $start,
int $end,
int $color,
int $style
): bool
$ Image : Ressource Canvas.
$ CX , $ CY : Les coordonnées du point central de l'ARC.
$ Largeur , $ Hauteur : La largeur et la hauteur de l'ellipse d'arc.
$ start , $ fin : l'angle de départ et l'angle d'extrémité (l'unité est degrés, 0 degrés pointant vers la direction de 3 heures et dans le sens antihoraire positif).
$ Couleur : Couleur de remplissage.
$ style : style de dessin, utilisez généralement IMG_ARC_PIE pour dessiner la forme du ventilateur.
L'exemple de code suivant attire une barre de progression de l'arc, en supposant que la progression est de 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);
// Dessiner un arc de fond gris，Représente la progression globale
imagefilledarc($image, $width/2, $height/2, 150, 150, 0, 360, $gray_color, IMG_ARC_PIE);
// Progrès dynamique 75%
$progress = 75;
$end_angle = ($progress / 100) * 360;
// Dessiner un arc de progrès coloré
imagefilledarc($image, $width/2, $height/2, 150, 150, 0, $end_angle, $bar_color, IMG_ARC_PIE);
imagepng($image);
imagedestroy($image);
?>
PHP est un langage côté serveur et ne peut pas contrôler directement l'interaction et les changements dynamiques du client. Cependant, nous pouvons transmettre des paramètres pour permettre à l'utilisateur de pénétrer ou la valeur frontale transmet la valeur de progression, puis re-requer le script PHP pour sortir l'image de la progression correspondante.
Par exemple, la page frontale transmet les paramètres de progression via Ajax ou Form:
http://m66.net/progress.php?value=60
Le script PHP reçoit le paramètre de valeur puis génère la barre de progression correspondante.
<?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);
?>
Ensuite, dans HTML, utilisez JavaScript pour actualiser régulièrement l'image pour former un effet de barre de progression dynamique:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Démonstration de barre de progression de l'arc interactif</title>
</head>
<body>
<img id="arcProgress" src="http://m66.net/progress.php?value=0" alt="Barre de progression" />
<br/>
<button onclick="startProgress()">Commencer à progresser</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>
Ajoutez du texte central : utilisez Imagestring ou ImageTetTFText pour afficher les nombres de pourcentage au centre de la barre de progression.
Gradient multicolore : combinez plusieurs segments en forme d'arc pour créer un effet de gradient.
Style de la bague : dessinez deux arcs, l'un comme anneau inférieur et l'autre comme anneau de progression, laissant l'espace blanc au milieu pour former une bague.
Canvas frontal : utilisez PHP pour générer des données et frontal pour réaliser des animations plus lisses.
Grâce aux méthodes introduites dans cet article, combinées avec la fonction de dessin de ImageFildArc et des paramètres simples, il est facile de créer des barres de progrès d'arc interactives avec des fonctions pratiques et de bons effets visuels, qui conviennent aux rapports de fond, aux invites de progrès des tâches et à d'autres scénarios.
J'espère que vous pourrez utiliser cette idée pour créer une barre de progression cool! Je vous souhaite un codage heureux!
