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專(zhuān)利在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è)功能的例子代碼:
<imgsrc="grid.php" />
現(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算法專(zhuān)利這一法律問(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; $i<11; $i++){ imageline($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; $i<10; $i++){ imageline($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)建類(lèi)似股指示意圖那樣的復(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; $i<10; $i++){ imagefilledrectangle($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
|