扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
在PHP中,有一些简单的图像函数是可以直接使用的,但大多数要处理的图像,都需要在编译PHP时加上GD库。除了安装GD库之外,在PHP中还可能需要其他的库,这可以根据需要支持哪些图像格式而定。GD库可以网上免费下载,不同的GD版本支持的图像格式不完全一样,最新的GD库版本支持GIF、JPEG、PNG、WBMP、XBM等格式的图像文件,此外还支持一些如FreeType、Type 1等字体库。通过GD库中的函数可以完成各种点、线、几何图形、文本及颜色的操作和处理,也可以创建或读取多种格式的图像文件。
专注于为中小企业提供网站设计、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业城北免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了成百上千企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
在PHP中,通过GD库处理图像的操作,都是先在内存中处理,操作完成以后再以文件流的方式,输出到浏览器或保存在服务器的磁盘中。创建一个图像应该完成如下所示的4个基本步骤。
(1)创建画布:所有的绘图设计都需要在一个背景图片上完成,而画布实际上就是在内存中开辟的一块临时区域,用于存储图像的信息。以后的图像操作都将基于这个背景画布,该画布的管理就类似于我们在画画时使用的画布。
(2)绘制图像:画布创建完成以后,就可以通过这个画布资源,使用各种画像函数设置图像的颜色、填充画布、画点、线段、各种几何图形,以及向图像中添加文本等。
(3)输出图像:完成整个图像的绘制以后,需要将图像以某种格式保存到服务器指定的文件中,或将图像直接输出到浏览器上显示给用户。但在图像输出之前,一定要使用header()函数发送Content-type通知浏览器,这次发送的是图片不是文本。
(4)释放资源:图像被输出以后,画布中的内容也不再有用。出于节约系统资源的考虑,需要及时清除画布占用的所有内存资源。
php中用GD绘制折线图,代码如下:
Class Chart{
private $image; // 定义图像
private $title; // 定义标题
private $ydata; // 定义Y轴数据
private $xdata; // 定义X轴数据
private $seriesName; // 定义每个系列数据的名称
private $color; // 定义条形图颜色
private $bgcolor; // 定义图片背景颜色
private $width; // 定义图片的宽
private $height; // 定义图片的长
/*
* 构造函数
* String title 图片标题
* Array xdata 索引数组,X轴数据
* Array ydata 索引数组,数字数组,Y轴数据
* Array series_name 索引数组,数据系列名称
*/
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');
}
/*
* 公有方法,设置条形图的颜色
* Array color 颜色数组,元素取值为'#DC'这种形式
*/
function setBarColor($color){
$this-color = $color;
}
/*
* 绘制折线图
*/
public function paintLineChart() {
$ydataNum = $this-arrayNum($this-ydata); // 取得数据分组的个数
$max = $this-arrayMax($this-ydata); // 取得所有呈现数据的最大值
$max = ($max )? $max : ;
$multi = $max/; // 如果最大数据是大于的则进行缩小处理
$barHeightMulti = .; // 条形高缩放的比例
$lineWidth = ;
$chartLeft = (+strlen($max))*; // 设置图片左边的margin
$lineY = ; // 初始化条形图的Y的坐标
// 设置图片的宽、高
//$this-width = $lineWidth*count($this-xdata) + $chartLeft - $lineWidth/.;
$margin = ; // 小矩形描述右边margin
$recWidth = ; // 小矩形的宽
$recHeight = ; // 小矩形的高
$space = ; // 小矩形与条形图的间距
$tmpWidth = ;
// 设置图片的宽、高
$lineChartWidth = $lineWidth*count($this-xdata) + $chartLeft - $lineWidth/. ;
// 两个系列数据以上的加上小矩形的宽
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,,,); // 图片的背景颜色
// 设置条形图的颜色
$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);
}
// 设置线段的颜色、字体的颜色、字体的路径
$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 == ) {
// 一个系列数据时
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 ) {
// 多个系列的数据时
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]);
}
// 两个系列数据以上时绘制小矩形及之后文字说明
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 );
}
/*
* 私有方法,当数组为二元数组时,统计数组的长度
* Array arr 要做统计的数组
*/
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;
}
/*
* 私有方法,计算数组的深度
* Array arr 数组
*/
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 数字数组
*/
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;
}
/*
* 私有方法,求数组的平均值
* Array arr 数字数组
*/
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);
}
/*
* 私有方法,求数组中元素长度最大的值
* Array arr 字符串数组,必须是汉字
*/
private function arrayLengthMax($arr) {
$length = ;
foreach($arr as $val) {
$length = strlen($val) $length ? strlen($val) : $length;
}
return $length/;
}
// 析构函数
function __destruct(){
imagedestroy($this-image);
}
}
测试代码如下:
$xdata = array('测试一','测试二','测试三','测试四','测试五','测试六','测试七','测试八','测试九');
$ydata = array(array(,,,,,,,,),array(,,,,,,,,));
$color = array();
$seriesName = array("七月","八月");
$title = "测试数据";
$Img = new Chart($title,$xdata,$ydata,$seriesName);
$Img-paintLineChart();
效果图如下:
到此代码结束。
下面给大家介绍php中GD库的一些简单使用
今天了解了一些GD库的简单使用,现在稍微做一下总结!
GD库是什么?,graphic device,图像工具库,gd库是php处理图形的扩展库,gd库提供了一系列用来处理图片的API,使用GD库可以处理图片,或者生成图片。 在网站上 GD库通常用来生成缩略图或者用来对图片加水印或者对网站数据生成报表。
php并不局限于输出HTML文本。php通过使用GD扩展库还能用来动态输出图像,例如文字按钮、验证码、数据统计图等。哈可以轻松地编辑图像,力图处理缩略图和为图片添加水印等,具有强大的图像处理能力。
首先我们来说下GD库,绘制个简单图形的一些步骤:
1、首先是创建画布,此处我们利用imagecreatetruecolor函数,也可以利用imagecreate,区别在于前者创建了一个真彩图像,后者创建了一个基于调色板的图像
$img=imagecreatetruecolor(100,100),其中有两个参数分别对应,我们创建的图像的宽和高
2、设置一些必要的"染料盒"
其实就是定义一些之后会用到的填充颜色,此处我们统一定义在这个位置,此处我们利用imagecolorallocate函数
$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、填充区域颜色,可以简单的理解为填充图片的背景颜色,利用imagefill函数
imagefill($img,0,0,$white),此处的0 0表示从坐标x y处开始填充背景色
4、绘制图形,例如绘制饼状图,所需要的是imagefilledarc函数
imagefilledarc()的参数相对来说较多,形如imagefilledarc($img,50,$i,100,50,0,45,$red,IMG_ARC_PIE);
其中分别表示以red颜色字img图像上绘制一个以50,$i为起点,以0 45角度这个范围内绘制弧线
5、期间我们还可以添加一些说明问题,比如水平的添加一个字符串,利用 imagestring($img,1,20,40,"hello,world!",$red),表示在img图片中以20 40为坐标,写上一个红色的hello,world!字样
6、就是讲图像输出
首先要告之浏览器要以何种图片格式输出,例如以png输出,则使用header("Content-type:image/png");
其次 将图片输出到浏览器中,imagepng($img);
最后,销毁图片,即释放该图片存储所占用的内存 imagedestroy(img);,
ajax的方法你没有弄清楚吧
script language="javascript"
$("#button").click(function(){
$.ajax({
url:"click.php",
success:function(obj){
alert(obj);
}
})
});
/script
你看一下 alert的是什么东东 。
经研究表明,人类大脑对视觉信息的处理优于对文本的处理。因此,数据可视化是使用图表、图形和设计元素把数据进行可视化,把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段。数据可视化可以使人们更有效率地完成某些任务,我们可以理解为三点优势:
美观展示: 用数据展示企业特色,大会展台,媒体现场展示等
数据驱动:实时查看业务概况、监控预警、驱动内部快速响应
发掘价值:可视化数据呈现后,带来的视觉感受会帮助人发现新的因素
在 图扑软件(Hightopo,以下简称 HT )技术支持下,数据可视化除了“可视”,还有可交流、可互动的特点。设计带来的不仅是瞬息处理海量数据搭配酷炫的可视化样式所引起的视觉震撼,更应注重为业务需求服务,设计出符合不同行业需求的个性定制可视化,利于企业做出正确的商业决策,以有根据的数据呈现而帮助企业进行更科学的判断而避免决策的失误。
先确定图表类型,下一步要进入到布局具体的信息位置,确立交互稿的步骤。确立交互稿的第一步就是要确定大屏的尺寸。客户的大屏尺寸不用会影响到整体的布局和效果,设计的时候也要考虑下是否有拼接大屏接缝的问题,尽量以拼接屏尺寸来确立栅格化布局。
尺寸确立后,接下来要对设计稿进行布局和页面的划分。布局这里我们就要参考第一项的业务需求优先级来布局画面分割面积。核心业务指标安排在中间位置、占较大面积;其余的指标按优先级依次在核心指标周围展开。一般把有关联的指标让其相邻或靠近,把图表类型相近的指标放一起,这样能减少观者认知上的负担并提高信息传递的效率。视觉上要尽量规避文字罗列或图表罗列,注意方圆图表的面积比例问题等,也是布局期间需要注意的事项。
设计风格的确定主要以下几点来确定:
设计风格的选择切勿追求效果炫酷而不符合业务需求,选择最合适的而不是选择最绚烂的尤为重要。因为设计中涉及的范围比较广,我们在后两章节单独着重讲解。下面展示部分我们做的不同行业对应的不同构图布局与元素的应用案例:
图扑软件(Hightopo)
发动机的可视化以突出发电机产品为主,周围 UI 以大圆角形式设计,使视觉由四周向中间包围,集中于中心。
图扑软件(Hightopo)
挖掘机的可视化采用了大地色进行设计,采用了色彩共情的原理,结合简洁的线性UI,使大屏在接地气的同时不失高端雅致的效果。
图扑软件(Hightopo)
医院的可视化设计以冷白色为主,突出医院给人的干净,严肃的感觉,仿佛能闻到消毒水的气味。以模型展示为主,按钮样式也采用了以面为主的设计配合大面积色块分布为主的模型设计。
图扑软件(Hightopo)
地铁站的可视化以写实风格为主,再现了真实地铁站的样貌,以及身临其境的动画交互体验。
图扑软件(Hightopo)
农业可视化案例尝试了 low poly 风格,以简洁插画风与略抽象画的模型浓缩了农业的运作场景,色调以贴近植物的绿色为主,设计出可爱的动画风格可视化效果。
同时在设计时因为使用的设备不同,大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境,这里的很多问题只有设计稿投到大屏上才能够被发现,所以这一步在样图沟通确认环节非常重要,有时候需要开发出demo,反复测试多次来修改协调最终上屏效果。在测试时从设计上可以重点注重以下几点:
之前确立的布局在放入设计内容后是否依然合适
确立的图表类型带入数据后是否仍然客观准确
根据关键元素、色彩、结构、质感打造出的页面风格是否基本传达出了预期的氛围和感受
已有的样式、数据内容、动效等在开发实现方面是否存在问题
大屏是否存在色差、文字内容是否清晰可见、页面是否存在变形拉伸等现象
效率问题。因为php是脚本解释语言,其特点在于易上手和部署,但在处理需要大量cpu的操作时(图片就是)就力不从心了,如果写成php扩展的话效率会提升,但还是没直接执行C/C++的程序快
不好实现多线程。这个就不用多说了,和语言定位有关,虽然可以异步调用,但毕竟不是强项。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流