한국어
한국어
PHP에서 ImageFilledArc 는 매우 실용적인 기능으로, 종종 채우기 색상으로 팬 모양이나 아크를 그리는 데 사용됩니다. 그것으로, 우리는 아크 진행 막대의 드로잉 효과를 쉽게 달성 할 수 있습니다. 이 진행률 표시 줄을 대화식 동적 방식으로 표시 할 수 있다면 사용자 경험이 더 좋고 시각적 효과가 더 시원해질 것입니다.
이 기사에서는 ImageFilleDARC를 사용하여 대화식 아크 진행 막대를 생성하고 동적 진행 상황 시각 효과를 달성하는 방법을 자세히 설명합니다.
ImageFilledArc 함수의 구문은 다음과 같습니다.
imagefilledarc(
resource $image,
int $cx,
int $cy,
int $width,
int $height,
int $start,
int $end,
int $color,
int $style
): bool
$ 이미지 : 캔버스 리소스.
$ cx , $ cy : 아크 센터 포인트의 좌표.
너비 , $ 높이 : 아크 타원의 너비와 높이.
$ start , $ end : 시작 각 및 끝 각도 (단위는도, 3시 방향을 가리키는 0도, 반 시계 방향으로 양의 양).
$ color : 색상을 채우십시오.
$ 스타일 : 그리기 스타일, 일반적으로 img_arc_pie를 사용하여 팬 모양을 그립니다.
다음 코드 예제는 진행 상황이 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);
// 회색 바닥 아크를 그립니다，전체 진행 상황을 나타냅니다
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를 사용하여 진행률 표시 줄의 중앙에 백분율 숫자를 표시하십시오.
다색 구배 : 여러 아크 형 세그먼트를 결합하여 구배 효과를 만듭니다.
링 스타일 : 하나는 바닥 링으로, 다른 하나는 진행 링으로, 중간에 공백을 남겨 링을 형성합니다.
프론트 엔드 캔버스 : PHP를 사용하여 데이터를 생성하고 더 부드러운 애니메이션을 달성하기 위해 프론트 엔드.
이 기사에 도입 된 방법을 통해 ImageFilleDARC 및 간단한 매개 변수의 드로잉 기능과 결합하여 실제 기능과 우수한 시각 효과를 갖춘 대화식 아크 진행 막대를 쉽게 만들 수 있으며, 이는 백그라운드 보고서, 작업 진행 프롬프트 및 기타 시나리오에 적합합니다.
이 아이디어를 사용하여 멋진 진행률 바를 만들 수 있기를 바랍니다! 나는 당신에게 행복한 코딩을 기원합니다!
