在php中编码图形进度条(重叠问题) [英] Coding graphical progress bar in php (overlay issue)
问题描述
到目前为止，我的背景工作正常，并且%气泡漂浮在栏的顶部.使用PHP/GD函数，一切都能顺利进行.
So far I have the background working, and I have the % bubble floating on top of the bar working. Everything went smoothly using the PHP/GD functions.
但是我不知道如何添加黄色部分.我的意思是，我可以轻松叠加纯色.但是如何显示带有垂直条纹，渐变，圆形边框和内部阴影的进度条呢?
But I can't figure out how to add the yellow part. I mean, I could overlay solid color easily. But how would I go in showing that progress bar with vertical stripes, gradients, rounded border and inner shadows?
推荐答案
实际上，我发现了一个使用php，javascript和html的示例. /php-progress-bar-script"rel =" nofollow>此处，您还可以使用jquery实现此处.这是我在html和css 此处中制作的一个简单示例.
Actually, I found an example using php, javascript, and html here, you can also use the jquery implementation here. And here is a simple one I made in html and css here .
实际上，有一种方法.
Actually, there is a way.
PHP/GD
PHP代码
<?php
// set the type of data (Content-Type) to PNG image
header("Content-Type: image/png");
// extract GET global array
extract($_GET);
// set defaults
if(! isset($max)) $max = 100;
if(! isset($val)) $val = 100;
// this method prepare blank true color image with given width and height
$im = imagecreatetruecolor(400, 20);
// set background color (light-blue)
$c_bg = imagecolorallocate($im, 222, 236, 247);
// set foreground color (dark-blue)
$c_fg = imagecolorallocate($im, 27, 120, 179);
// calculate the width of bar indicator
$val_w = round(($val * 397) / $max);
// create a rectangle for background and append to the image
imagefilledrectangle($im, 0, 0, 400, 20, $c_bg);
// create a rectangle for the indicator and appent to the image
imagefilledrectangle($im, 2, 2, $val_w, 17, $c_fg);
// render the image as a PNG
imagepng($im);
// finally destroy image resources
imagedestroy($im);
?>
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PHP GD-Progress Bar</title>
</head>
<body>
<img src="progressbar.php?max=100&val=70" />
</body>
</html>
这篇关于在php中编码图形进度条(重叠问题)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
