在PHP中,有一些簡單的圖像函數(shù)是可以直接使用的,但大多數(shù)要處理的圖像,都需要在編譯PHP時加上GD庫。除了安裝GD庫之外,在PHP中還可能需要其他的庫,這可以根據(jù)需要支持哪些圖像格式而定。GD庫可以網(wǎng)上免費下載,不同的GD版本支持的圖像格式不完全一樣,最新的GD庫版本支持GIF、JPEG、PNG、WBMP、XBM等格式的圖像文件,此外還支持一些如FreeType、Type 1等字體庫。通過GD庫中的函數(shù)可以完成各種點、線、幾何圖形、文本及顏色的操作和處理,也可以創(chuàng)建或讀取多種格式的圖像文件。
專注于為中小企業(yè)提供網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)城北免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動了成百上千企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。
在PHP中,通過GD庫處理圖像的操作,都是先在內(nèi)存中處理,操作完成以后再以文件流的方式,輸出到瀏覽器或保存在服務(wù)器的磁盤中。創(chuàng)建一個圖像應(yīng)該完成如下所示的4個基本步驟。
(1)創(chuàng)建畫布:所有的繪圖設(shè)計都需要在一個背景圖片上完成,而畫布實際上就是在內(nèi)存中開辟的一塊臨時區(qū)域,用于存儲圖像的信息。以后的圖像操作都將基于這個背景畫布,該畫布的管理就類似于我們在畫畫時使用的畫布。
(2)繪制圖像:畫布創(chuàng)建完成以后,就可以通過這個畫布資源,使用各種畫像函數(shù)設(shè)置圖像的顏色、填充畫布、畫點、線段、各種幾何圖形,以及向圖像中添加文本等。
(3)輸出圖像:完成整個圖像的繪制以后,需要將圖像以某種格式保存到服務(wù)器指定的文件中,或?qū)D像直接輸出到瀏覽器上顯示給用戶。但在圖像輸出之前,一定要使用header()函數(shù)發(fā)送Content-type通知瀏覽器,這次發(fā)送的是圖片不是文本。
(4)釋放資源:圖像被輸出以后,畫布中的內(nèi)容也不再有用。出于節(jié)約系統(tǒng)資源的考慮,需要及時清除畫布占用的所有內(nèi)存資源。
php中用GD繪制折線圖,代碼如下:
Class Chart{
private $image; // 定義圖像
private $title; // 定義標題
private $ydata; // 定義Y軸數(shù)據(jù)
private $xdata; // 定義X軸數(shù)據(jù)
private $seriesName; // 定義每個系列數(shù)據(jù)的名稱
private $color; // 定義條形圖顏色
private $bgcolor; // 定義圖片背景顏色
private $width; // 定義圖片的寬
private $height; // 定義圖片的長
/*
* 構(gòu)造函數(shù)
* String title 圖片標題
* Array xdata 索引數(shù)組,X軸數(shù)據(jù)
* Array ydata 索引數(shù)組,數(shù)字數(shù)組,Y軸數(shù)據(jù)
* Array series_name 索引數(shù)組,數(shù)據(jù)系列名稱
*/
function __construct($title,$xdata,$ydata,$seriesName) {
$this-title = $title;
$this-xdata = $xdata;
$this-ydata = $ydata;
$this-seriesName = $seriesName;
$this-color = array('#DC', '#B', '#EDB', '#DDDF', '#CBE', '#E', '#FF', '#FFF', '#AFC');
}
/*
* 公有方法,設(shè)置條形圖的顏色
* Array color 顏色數(shù)組,元素取值為'#DC'這種形式
*/
function setBarColor($color){
$this-color = $color;
}
/*
* 繪制折線圖
*/
public function paintLineChart() {
$ydataNum = $this-arrayNum($this-ydata); // 取得數(shù)據(jù)分組的個數(shù)
$max = $this-arrayMax($this-ydata); // 取得所有呈現(xiàn)數(shù)據(jù)的最大值
$max = ($max )? $max : ;
$multi = $max/; // 如果最大數(shù)據(jù)是大于的則進行縮小處理
$barHeightMulti = .; // 條形高縮放的比例
$lineWidth = ;
$chartLeft = (+strlen($max))*; // 設(shè)置圖片左邊的margin
$lineY = ; // 初始化條形圖的Y的坐標
// 設(shè)置圖片的寬、高
//$this-width = $lineWidth*count($this-xdata) + $chartLeft - $lineWidth/.;
$margin = ; // 小矩形描述右邊margin
$recWidth = ; // 小矩形的寬
$recHeight = ; // 小矩形的高
$space = ; // 小矩形與條形圖的間距
$tmpWidth = ;
// 設(shè)置圖片的寬、高
$lineChartWidth = $lineWidth*count($this-xdata) + $chartLeft - $lineWidth/. ;
// 兩個系列數(shù)據(jù)以上的加上小矩形的寬
if($ydataNum ) {
$tmpWidth = $this-arrayLengthMax($this-seriesName)**/ + $space + $recWidth + + $margin;
}
$this-width = $lineChartWidth + $tmpWidth;
$this-height = ;
$this-image = imagecreatetruecolor($this-width ,$this-height); // 準備畫布
$this-bgcolor = imagecolorallocate($this-image,,,); // 圖片的背景顏色
// 設(shè)置條形圖的顏色
$color = array();
foreach($this-color as $col) {
$col = substr($col,,strlen($col)-);
$red = hexdec(substr($col,,));
$green = hexdec(substr($col,,));
$blue = hexdec(substr($col,,));
$color[] = imagecolorallocate($this-image ,$red, $green, $blue);
}
// 設(shè)置線段的顏色、字體的顏色、字體的路徑
$lineColor = imagecolorallocate($this-image ,xcc,xcc,xcc);
$fontColor = imagecolorallocate($this-image, x,xf,xf);
$fontPath = 'font/simsun.ttc';
imagefill($this-image,,,$this-bgcolor); // 繪畫背景
// 繪畫圖的分短線與左右邊線
for($i = ; $i ; $i++ ) {
imageline($this-image,$chartLeft-,$lineY-$barHeightMulti*$max//$multi*$i,$lineChartWidth,$lineY-$barHeightMulti*$max//$multi*$i,$lineColor);
imagestring($this-image,,,$lineY-$barHeightMulti*$max//$multi*$i-,floor($max/*$i),$fontColor);
}
imageline($this-image,$chartLeft-,,$chartLeft-,$lineY,$lineColor);
imageline($this-image,$lineChartWidth-,,$lineChartWidth-,$lineY,$lineColor);
$style = array($lineColor,$lineColor,$lineColor,$lineColor,$lineColor,$this-bgcolor,$this-bgcolor,$this-bgcolor,$this-bgcolor,$this-bgcolor);
imagesetstyle($this-image,$style);
// 繪制折線圖的分隔線(虛線)
foreach($this-xdata as $key = $val) {
$lineX = $chartLeft + + $lineWidth*$key;
imageline($this-image,$lineX,,$lineX,$lineY,IMG_COLOR_STYLED);
}
// 繪畫圖的折線
foreach($this-ydata as $key = $val) {
if($ydataNum == ) {
// 一個系列數(shù)據(jù)時
if($key == count($this-ydata) - ) break;
$lineX = $chartLeft + + $lineWidth*$key;
$lineY = $lineY-$barHeightMulti*($this-ydata[$key+])/$multi;
// 畫折線
if($key == count($this-ydata) - ) {
imagefilledellipse($this-image,$lineX+$lineWidth,$lineY,,,$color[]);
}
imageline($this-image,$lineX,$lineY-$barHeightMulti*$val/$multi,$lineX+$lineWidth,$lineY,$color[]);
imagefilledellipse($this-image,$lineX,$lineY-$barHeightMulti*$val/$multi,,,$color[]);
}elseif($ydataNum ) {
// 多個系列的數(shù)據(jù)時
foreach($val as $ckey = $cval) {
if($ckey == count($val) - ) break;
$lineX = $chartLeft + + $lineWidth*$ckey;
$lineY = $lineY-$barHeightMulti*($val[$ckey+])/$multi;
// 畫折線
if($ckey == count($val) - ) {
imagefilledellipse($this-image,$lineX+$lineWidth,$lineY,,,$color[$key%count($this-color)]);
}
imageline($this-image,$lineX,$lineY-$barHeightMulti*$cval/$multi,$lineX+$lineWidth,$lineY,$color[$key%count($this-color)]);
imagefilledellipse($this-image,$lineX,$lineY-$barHeightMulti*$cval/$multi,,,$color[$key%count($this-color)]);
}
}
}
// 繪畫條形圖的x坐標的值
foreach($this-xdata as $key = $val) {
$lineX = $chartLeft + $lineWidth*$key + $lineWidth/ - ;
imagettftext($this-image,,-,$lineX,$lineY+,$fontColor,$fontPath,$this-xdata[$key]);
}
// 兩個系列數(shù)據(jù)以上時繪制小矩形及之后文字說明
if($ydataNum ) {
$x = $lineChartWidth + $space;
$y = ;
foreach($this-seriesName as $key = $val) {
imagefilledrectangle($this-image,$x,$y,$x+$recWidth,$y+$recHeight,$color[$key%count($this-color)]);
imagettftext($this-image,,,$x+$recWidth+,$y+$recHeight-,$fontColor,$fontPath,$this-seriesName[$key]);
$y += $recHeight + ;
}
}
// 繪畫標題
$titleStart = ($this-width - .*strlen($this-title))/;
imagettftext($this-image,,,$titleStart,,$fontColor,$fontPath,$this-title);
// 輸出圖片
header("Content-Type:image/png");
imagepng ( $this-image );
}
/*
* 私有方法,當(dāng)數(shù)組為二元數(shù)組時,統(tǒng)計數(shù)組的長度
* Array arr 要做統(tǒng)計的數(shù)組
*/
private function arrayNum($arr) {
$num = ;
if(is_array($arr)) {
$num++;
for($i = ; $i count($arr); $i++){
if(is_array($arr[$i])) {
$num = count($arr);
break;
}
}
}
return $num;
}
/*
* 私有方法,計算數(shù)組的深度
* Array arr 數(shù)組
*/
private function arrayDepth($arr) {
$num = ;
if(is_array($arr)) {
$num++;
for($i = ; $i count($arr); $i++){
if(is_array($arr[$i])) {
$num += $this-arrayDepth($arr[$i]);
break;
}
}
}
return $num;
}
/*
* 私有方法,找到一組中的最大值
* Array arr 數(shù)字數(shù)組
*/
private function arrayMax($arr) {
$depth = $this-arrayDepth($arr);
$max = ;
if($depth == ) {
rsort($arr);
$max = $arr[];
}elseif($depth ) {
foreach($arr as $val) {
if(is_array($val)) {
if($this-arrayMax($val) $max) {
$max = $this-arrayMax($val);
}
}else{
if($val $max){
$max = $val;
}
}
}
}
return $max;
}
/*
* 私有方法,求數(shù)組的平均值
* Array arr 數(shù)字數(shù)組
*/
function arrayAver($arr) {
$aver = array();
foreach($arr as $val) {
if(is_array($val)) {
$aver = array_merge($aver,$val);
}else{
$aver[] = $val;
}
}
return array_sum($aver)/count($aver);
}
/*
* 私有方法,求數(shù)組中元素長度最大的值
* Array arr 字符串?dāng)?shù)組,必須是漢字
*/
private function arrayLengthMax($arr) {
$length = ;
foreach($arr as $val) {
$length = strlen($val) $length ? strlen($val) : $length;
}
return $length/;
}
// 析構(gòu)函數(shù)
function __destruct(){
imagedestroy($this-image);
}
}
測試代碼如下:
$xdata = array('測試一','測試二','測試三','測試四','測試五','測試六','測試七','測試八','測試九');
$ydata = array(array(,,,,,,,,),array(,,,,,,,,));
$color = array();
$seriesName = array("七月","八月");
$title = "測試數(shù)據(jù)";
$Img = new Chart($title,$xdata,$ydata,$seriesName);
$Img-paintLineChart();
效果圖如下:
到此代碼結(jié)束。
下面給大家介紹php中GD庫的一些簡單使用
今天了解了一些GD庫的簡單使用,現(xiàn)在稍微做一下總結(jié)!
GD庫是什么?,graphic device,圖像工具庫,gd庫是php處理圖形的擴展庫,gd庫提供了一系列用來處理圖片的API,使用GD庫可以處理圖片,或者生成圖片。 在網(wǎng)站上 GD庫通常用來生成縮略圖或者用來對圖片加水印或者對網(wǎng)站數(shù)據(jù)生成報表。
php并不局限于輸出HTML文本。php通過使用GD擴展庫還能用來動態(tài)輸出圖像,例如文字按鈕、驗證碼、數(shù)據(jù)統(tǒng)計圖等。哈可以輕松地編輯圖像,力圖處理縮略圖和為圖片添加水印等,具有強大的圖像處理能力。
首先我們來說下GD庫,繪制個簡單圖形的一些步驟:
1、首先是創(chuàng)建畫布,此處我們利用imagecreatetruecolor函數(shù),也可以利用imagecreate,區(qū)別在于前者創(chuàng)建了一個真彩圖像,后者創(chuàng)建了一個基于調(diào)色板的圖像
$img=imagecreatetruecolor(100,100),其中有兩個參數(shù)分別對應(yīng),我們創(chuàng)建的圖像的寬和高
2、設(shè)置一些必要的"染料盒"
其實就是定義一些之后會用到的填充顏色,此處我們統(tǒng)一定義在這個位置,此處我們利用imagecolorallocate函數(shù)
$white=imagecolorallocate($img,0xFF,0xFF,0xFF)或者可以使用RGB的顏色命名方式 如$white=imagecolorallocate($img,255,255,255);
$gray = imagecolorallocate($img, 0xC0, 0xC0, 0xC0);
$darkgray = imagecolorallocate($img, 0x90, 0x90, 0x90);
$navy = imagecolorallocate($img, 0x00, 0x00, 0x80);
$darknavy = imagecolorallocate($img, 0x00, 0x00, 0x50);
$red = imagecolorallocate($img, 0xFF, 0x00, 0x00);
$darkred = imagecolorallocate($img, 0x90, 0x00, 0x00);
$black=imagecolorallocate($img,0x00,0x00,0x00);
此處我們定義多一些所需要的顏色
3、填充區(qū)域顏色,可以簡單的理解為填充圖片的背景顏色,利用imagefill函數(shù)
imagefill($img,0,0,$white),此處的0 0表示從坐標x y處開始填充背景色
4、繪制圖形,例如繪制餅狀圖,所需要的是imagefilledarc函數(shù)
imagefilledarc()的參數(shù)相對來說較多,形如imagefilledarc($img,50,$i,100,50,0,45,$red,IMG_ARC_PIE);
其中分別表示以red顏色字img圖像上繪制一個以50,$i為起點,以0 45角度這個范圍內(nèi)繪制弧線
5、期間我們還可以添加一些說明問題,比如水平的添加一個字符串,利用 imagestring($img,1,20,40,"hello,world!",$red),表示在img圖片中以20 40為坐標,寫上一個紅色的hello,world!字樣
6、就是講圖像輸出
首先要告之瀏覽器要以何種圖片格式輸出,例如以png輸出,則使用header("Content-type:image/png");
其次 將圖片輸出到瀏覽器中,imagepng($img);
最后,銷毀圖片,即釋放該圖片存儲所占用的內(nèi)存 imagedestroy(img);,
ajax的方法你沒有弄清楚吧
script language="javascript"
$("#button").click(function(){
$.ajax({
url:"click.php",
success:function(obj){
alert(obj);
}
})
});
/script
你看一下 alert的是什么東東 。
經(jīng)研究表明,人類大腦對視覺信息的處理優(yōu)于對文本的處理。因此,數(shù)據(jù)可視化是使用圖表、圖形和設(shè)計元素把數(shù)據(jù)進行可視化,把相對復(fù)雜、抽象的數(shù)據(jù)通過可視的方式以人們更易理解的形式展示出來的一系列手段。數(shù)據(jù)可視化可以使人們更有效率地完成某些任務(wù),我們可以理解為三點優(yōu)勢:
美觀展示:?用數(shù)據(jù)展示企業(yè)特色,大會展臺,媒體現(xiàn)場展示等
數(shù)據(jù)驅(qū)動:實時查看業(yè)務(wù)概況、監(jiān)控預(yù)警、驅(qū)動內(nèi)部快速響應(yīng)
發(fā)掘價值:可視化數(shù)據(jù)呈現(xiàn)后,帶來的視覺感受會幫助人發(fā)現(xiàn)新的因素
在?圖撲軟件(Hightopo,以下簡稱 HT )技術(shù)支持下,數(shù)據(jù)可視化除了“可視”,還有可交流、可互動的特點。設(shè)計帶來的不僅是瞬息處理海量數(shù)據(jù)搭配酷炫的可視化樣式所引起的視覺震撼,更應(yīng)注重為業(yè)務(wù)需求服務(wù),設(shè)計出符合不同行業(yè)需求的個性定制可視化,利于企業(yè)做出正確的商業(yè)決策,以有根據(jù)的數(shù)據(jù)呈現(xiàn)而幫助企業(yè)進行更科學(xué)的判斷而避免決策的失誤。
先確定圖表類型,下一步要進入到布局具體的信息位置,確立交互稿的步驟。確立交互稿的第一步就是要確定大屏的尺寸??蛻舻拇笃脸叽绮挥脮绊懙秸w的布局和效果,設(shè)計的時候也要考慮下是否有拼接大屏接縫的問題,盡量以拼接屏尺寸來確立柵格化布局。
尺寸確立后,接下來要對設(shè)計稿進行布局和頁面的劃分。布局這里我們就要參考第一項的業(yè)務(wù)需求優(yōu)先級來布局畫面分割面積。核心業(yè)務(wù)指標安排在中間位置、占較大面積;其余的指標按優(yōu)先級依次在核心指標周圍展開。一般把有關(guān)聯(lián)的指標讓其相鄰或靠近,把圖表類型相近的指標放一起,這樣能減少觀者認知上的負擔(dān)并提高信息傳遞的效率。視覺上要盡量規(guī)避文字羅列或圖表羅列,注意方圓圖表的面積比例問題等,也是布局期間需要注意的事項。
設(shè)計風(fēng)格的確定主要以下幾點來確定:
設(shè)計風(fēng)格的選擇切勿追求效果炫酷而不符合業(yè)務(wù)需求,選擇最合適的而不是選擇最絢爛的尤為重要。因為設(shè)計中涉及的范圍比較廣,我們在后兩章節(jié)單獨著重講解。下面展示部分我們做的不同行業(yè)對應(yīng)的不同構(gòu)圖布局與元素的應(yīng)用案例:
圖撲軟件(Hightopo)
發(fā)動機的可視化以突出發(fā)電機產(chǎn)品為主,周圍 UI 以大圓角形式設(shè)計,使視覺由四周向中間包圍,集中于中心。
圖撲軟件(Hightopo)
挖掘機的可視化采用了大地色進行設(shè)計,采用了色彩共情的原理,結(jié)合簡潔的線性UI,使大屏在接地氣的同時不失高端雅致的效果。
圖撲軟件(Hightopo)
醫(yī)院的可視化設(shè)計以冷白色為主,突出醫(yī)院給人的干凈,嚴肅的感覺,仿佛能聞到消毒水的氣味。以模型展示為主,按鈕樣式也采用了以面為主的設(shè)計配合大面積色塊分布為主的模型設(shè)計。
圖撲軟件(Hightopo)
地鐵站的可視化以寫實風(fēng)格為主,再現(xiàn)了真實地鐵站的樣貌,以及身臨其境的動畫交互體驗。
圖撲軟件(Hightopo)
農(nóng)業(yè)可視化案例嘗試了 low poly 風(fēng)格,以簡潔插畫風(fēng)與略抽象畫的模型濃縮了農(nóng)業(yè)的運作場景,色調(diào)以貼近植物的綠色為主,設(shè)計出可愛的動畫風(fēng)格可視化效果。
同時在設(shè)計時因為使用的設(shè)備不同,大屏有它自己獨特的分辨率、屏幕組成、色彩顯示以及運行、展示環(huán)境,這里的很多問題只有設(shè)計稿投到大屏上才能夠被發(fā)現(xiàn),所以這一步在樣圖溝通確認環(huán)節(jié)非常重要,有時候需要開發(fā)出demo,反復(fù)測試多次來修改協(xié)調(diào)最終上屏效果。在測試時從設(shè)計上可以重點注重以下幾點:
之前確立的布局在放入設(shè)計內(nèi)容后是否依然合適
確立的圖表類型帶入數(shù)據(jù)后是否仍然客觀準確
根據(jù)關(guān)鍵元素、色彩、結(jié)構(gòu)、質(zhì)感打造出的頁面風(fēng)格是否基本傳達出了預(yù)期的氛圍和感受
已有的樣式、數(shù)據(jù)內(nèi)容、動效等在開發(fā)實現(xiàn)方面是否存在問題
大屏是否存在色差、文字內(nèi)容是否清晰可見、頁面是否存在變形拉伸等現(xiàn)象
效率問題。因為php是腳本解釋語言,其特點在于易上手和部署,但在處理需要大量cpu的操作時(圖片就是)就力不從心了,如果寫成php擴展的話效率會提升,但還是沒直接執(zhí)行C/C++的程序快
不好實現(xiàn)多線程。這個就不用多說了,和語言定位有關(guān),雖然可以異步調(diào)用,但畢竟不是強項。