創(chuàng)建|動(dòng)態(tài)|圖形

PHP有一個(gè)令人驚訝的能力——你可以利用它的服務(wù)器端腳本創(chuàng)建動(dòng)態(tài)圖形。這項(xiàng)功能的基礎(chǔ)是GD庫(kù)，它是由Thomas Boutell設(shè)計(jì)的ANSI C庫(kù)，這個(gè)庫(kù)支持除.GIF文件之外的絕大多數(shù)常見(jiàn)圖形文件格式（不過(guò)該庫(kù)的設(shè)計(jì)者許諾當(dāng)LZW專利在2004年7月7日到期后就立即添加.GIF支持）。

PHP4.3以及它的更高版本集成了GD庫(kù)。如果你使用的是老版本的PHP，你需要手工安裝圖形支持。這兒有許多與之有關(guān)的信息。


折線圖
為了演示如何用PHP創(chuàng)建動(dòng)態(tài)圖形，我們建立一些自定義圖形。第一個(gè)例子是畫(huà)在網(wǎng)格上的折線圖，如圖A所示。

圖A




我們把這個(gè)頁(yè)面叫著grid.php（相關(guān)附件：清單A）。為了調(diào)用Web頁(yè)動(dòng)態(tài)產(chǎn)生的圖形，你只需要訪問(wèn)這個(gè)PHP頁(yè)，它將該圖形傳遞到瀏覽器。IMG元素可以很好的完成這項(xiàng)工作。下面是實(shí)現(xiàn)這個(gè)功能的例子代碼：



現(xiàn)在，我們開(kāi)始編寫(xiě)用于創(chuàng)建圖形的代碼。下面是grid.php中源代碼片斷：

//添加圖形的值
$graphValues=array(0,80,23,11,190,245,50,80,111,240,55);


首先，我們定義圖形的值。在這個(gè)例子中，圖形值直接寫(xiě)到代碼中的一個(gè)數(shù)組中，不過(guò)你可以很容易改寫(xiě)代碼，讓代碼從XML文件、表格或者數(shù)據(jù)庫(kù)中獲取這些值。這些值的范圍從0到250（以象素為單位的圖形尺寸）。這些值將決定每個(gè)網(wǎng)格上線段的初始象素位置。如果你想使用數(shù)值0和100（用百分比表示），你只需把這些值乘以2.5來(lái)決定網(wǎng)格上的象素位置。

然后，我們發(fā)送一個(gè)PNG頭并定義圖像的高度和寬度：
// Define .PNG image
header("Content-type: image/png");
$imgWidth=250;
$imgHeight=250;


我們發(fā)送一個(gè)圖形頭來(lái)“欺騙”瀏覽器，使它認(rèn)為我們的PHP頁(yè)面是一幅真正的圖像，這樣它才可以正確顯示在屏幕上。服務(wù)器將以二進(jìn)制數(shù)據(jù)流的形式把程序產(chǎn)生的信息發(fā)送到瀏覽器。


PNG（Portable Network Graphic，便攜式網(wǎng)路圖形）標(biāo)準(zhǔn)是一種無(wú)損的圖形格式，它由于GIF的 LZW算法專利這一法律問(wèn)題而在1995年提出來(lái)的。


現(xiàn)在，我們例化圖形對(duì)象并定義我們?cè)趫D形中用到的顏色：

//創(chuàng)建圖像、定義顏色
$image=imagecreate($imgWidth, $imgHeight);
$colorWhite=imagecolorallocate($image, 255, 255, 255);
$colorGrey=imagecolorallocate($image, 192, 192, 192);
$colorBlue=imagecolorallocate($image, 0, 0, 255);


我們?cè)O(shè)置白色背景，灰色畫(huà)框以及藍(lán)色折線。你可以通過(guò)創(chuàng)建新變量并賦不同的RGB值來(lái)輕松的修改或者添加顏色。

我們可以用imageline函數(shù)來(lái)創(chuàng)建灰色畫(huà)框，每次調(diào)用這個(gè)函數(shù)就畫(huà)一條線：

//創(chuàng)建圖像周?chē)目?br>imageline($image, 0, 0, 0, 250, $colorGrey);
imageline($image, 0, 0, 250, 0, $colorGrey);
imageline($image, 249, 0, 249, 249, $colorGrey);
imageline($image, 0, 249, 249, 249, $colorGrey);


這里用到了二維的x/y象素坐標(biāo)。Imageline函數(shù)中的每一對(duì)值指定了圖像的起點(diǎn)和終點(diǎn)。

為了實(shí)現(xiàn)網(wǎng)格線，我們?cè)趚坐標(biāo)軸和y坐標(biāo)軸上每隔25個(gè)象素畫(huà)一條灰線：

//創(chuàng)建網(wǎng)格
for ($i=1; $iimageline($image, $i*25, 0, $i*25, 250, $colorGrey);
imageline($image, 0, $i*25, 250, $i*25, $colorGrey);
}


位置（0,0）表示網(wǎng)格的左上角，位置（250,250）表示右下角。每個(gè)坐標(biāo)軸等分為10格，每格寬度是25個(gè)象素，即250個(gè)象素（圖形的尺寸）。

為了創(chuàng)建折線圖，我們只需循環(huán)的取出數(shù)組中的坐標(biāo)值，按坐標(biāo)畫(huà)出每條線段的起點(diǎn)和終點(diǎn)：

//創(chuàng)建折線圖
for ($i=0; $iimageline($image, $i*25, (250-$graphValues[$i]), ($i+1)*25, (250-$graphValues[$i+1]), $colorBlue);
}


PHP將會(huì)自動(dòng)在起點(diǎn)和終點(diǎn)之間填充藍(lán)線。在這個(gè)簡(jiǎn)單的例子中只有10個(gè)值，但是擴(kuò)展這個(gè)技術(shù)非常容易，如創(chuàng)建類似股指示意圖那樣的復(fù)雜圖形等等。

最后，我們需要把這個(gè)圖像輸出到瀏覽器并清空服務(wù)器中保存圖像的內(nèi)存空間：
//輸出圖形并清楚內(nèi)存中的圖像
imagepng($image);
imagedestroy($image);
?>



直方圖
把上面用于創(chuàng)建折線圖的基本程序修改后用于創(chuàng)建直方圖（如圖B所示）。

圖B



（相關(guān)附件：清單B）這段程序與我們上面用來(lái)畫(huà)折線圖的代碼略有不同。Imagefilledrectangle函數(shù)創(chuàng)建兩種直方塊——深色的直方塊表示$graphValues數(shù)組中保存的值，而淺色直方塊則用于填充深色方塊之間的空隙：

//創(chuàng)建直方圖
for ($i=0; $iimagefilledrectangle($image, $i*25, (250-$graphValues[$i]), ($i+1)*25, 250, $colorDarkBlue);
imagefilledrectangle($image, ($i*25)+1, (250-$graphValues[$i])+1, (($i+1)*25)-5, 248, $colorLightBlue);
}


留心CPU的負(fù)荷
當(dāng)你在服務(wù)器端創(chuàng)建這些圖形時(shí)，你需要仔細(xì)考慮這個(gè)問(wèn)題：CPU負(fù)荷。如果你在Web端有太多這樣的動(dòng)態(tài)圖片產(chǎn)生任務(wù)，你可能會(huì)發(fā)現(xiàn)導(dǎo)致性能下降。

更復(fù)雜的用法
本文所列舉的例子僅僅是個(gè)起點(diǎn)。如果你想得到有關(guān)PHP圖形庫(kù)的更多信息，請(qǐng)查看PHP手冊(cè)上的的圖形函數(shù)網(wǎng)頁(yè)。

英文版地址：http://builder.com.com/5100-6371-5092227.html