PHP有一個令人驚訝的能力——你可以利用它的伺服器端指令碼建立動態圖形。這項功能的基礎是GD庫,它是由Thomas Boutell設計的ANSI C庫,這個庫支援除.GIF檔案之外的絕大多數常見圖形檔案格式(不過該庫的設計者確保當LZW專利在2004年7月7日到期後就立即添加.GIF支援)。
PHP4.3以及它的更高版本整合了GD庫。如果你使用的是老版本的PHP,你需要手工安裝圖形支援。這兒有許多與之有關的資訊。
折線圖
為了示範如何用PHP建立動態圖形,我們建立一些自訂圖形。第一個例子是畫在網格上的折線圖,A所示。
圖A
500) this.width=500' align='center' hspace='10' vspace='10'>
我們把這個頁面叫著grid.php(相關附件:清單A)。為了調用Web頁動態產生的圖形,你只需要訪問這個PHP頁,它將該圖形傳遞到瀏覽器。IMG元素可以很好的完成這項工作。下面是實現這個功能的例子代碼:
498)this.width=498;' onmousewheel = 'javascript:return big(this)'src="grid.php" />
現在,我們開始編寫用於建立圖形的代碼。下面是grid.php中原始碼片斷:
//添加圖形的值
$graphValues=array(0,80,23,11,190,245,50,80,111,240,55);
首先,我們定義圖形的值。在這個例子中,圖形值直接寫到代碼中的一個數組中,不過你可以很容易改寫代碼,讓代碼從XML檔案、表格或者資料庫中擷取這些值。這些值的範圍從0到250(以象素為單位的圖形尺寸)。這些值將決定每個網格上線段的初始象素位置。如果你想使用數值0和100(用百分比表示),你只需把這些值乘以2.5來決定網格上的象素位置。
然後,我們發送一個PNG頭並定義映像的高度和寬度:
// Define .PNG image
header("Content-type: image/png");
$imgWidth=250;
$imgHeight=250;
我們發送一個圖形頭來“欺騙”瀏覽器,使它認為我們的PHP頁面是一幅真正的映像,這樣它才可以正確顯示在螢幕上。伺服器將以位元據流的形式把程式產生的資訊發送到瀏覽器。
PNG(Portable Network Graphic,攜帶型網路圖形)標準是一種無損的圖形格式,它由於GIF的 LZW演算法專利這一法律問題而在1995年提出來的。
現在,我們例化繪圖物件並定義我們在圖形中用到的顏色:
//建立映像、定義顏色
$image=imagecreate($imgWidth, $imgHeight);
$colorWhite=imagecolorallocate($image, 255, 255, 255);
$colorGrey=imagecolorallocate($image, 192, 192, 192);
$colorBlue=imagecolorallocate($image, 0, 0, 255);
我們設定白色背景,灰色畫框以及藍色折線。你可以通過建立新變數並賦不同的RGB值來輕鬆的修改或者添加顏色。
我們可以用imageline函數來建立灰色畫框,每次調用這個函數就畫一條線:
//建立映像周圍的框
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象素座標。Imageline函數中的每一對值指定了映像的起點和終點。
為了實現網格線,我們在x座標軸和y座標軸上每隔25個象素畫一條灰線:
//建立網格
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)表示網格的左上方,位置(250,250)表示右下角。每個座標軸等分為10格,每格寬度是25個象素,即250個象素(圖形的尺寸)。
為了建立折線圖,我們只需迴圈的取出數組中的座標值,按座標畫出每條線段的起點和終點:
//建立折線圖
for ($i=0; $i<10; $i++){
imageline($image, $i*25, (250-$graphValues[$i]), ($i+1)*25, (250-$graphValues[$i+1]), $colorBlue);
}
PHP將會自動在起點和終點之間填充藍線。在這個簡單的例子中只有10個值,但是擴充這個技術非常容易,如建立類似股指那樣的複雜圖形等等。
最後,我們需要把這個映像輸出到瀏覽器並清空伺服器中儲存映像的記憶體空間:
//輸出圖形並清楚記憶體中的映像
imagepng($image);
imagedestroy($image);
?>
長條圖
把上面用於建立折線圖的基本程式修改後用於建立長條圖(B所示)。
圖B
500) this.width=500' align='center' hspace='10' vspace='10'>
(相關附件:清單B)這段程式與我們上面用來畫折線圖的代碼略有不同。Imagefilledrectangle函數建立兩種直方塊——深色的直方塊表示$graphValues數組中儲存的值,而淺色直方塊則用於填充深色方塊之間的空隙:
//建立長條圖
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的負荷
當你在伺服器端建立這些圖形時,你需要仔細考慮這個問題:CPU負荷。如果你在Web端有太多這樣的動態圖片產生任務,你可能會發現導致效能下降。
更複雜的用法
本文所列舉的例子僅僅是個起點。如果你想得到有關PHP圖形庫的更多資訊,請查看PHP手冊上的的圖形函數網頁。
英文版地址:
http://www.bkjia.com/PHPjc/446939.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/446939.htmlTechArticlePHP有一個令人驚訝的能力——你可以利用它的伺服器端指令碼建立動態圖形。這項功能的基礎是GD庫,它是由Thomas Boutell設計的ANSI C庫,這個庫...