最近在使用PHP gblib生成分享图片的过程中,使用了imagefilledellipse 画圆环用来显示进度,发现锯齿特别严重;
遂google,发现了pChart2这个开源图表库,其demo效果极佳,几乎看不出来锯齿,但这是一个商业图表,所以我开启苦逼之路,阅读下源码,看看是怎么做到了,追根溯源 终于发现了,下面是使用后的效果图
哈哈,效果还是很明显的,独乐乐不如众乐乐,下面就分享一下实现方法;
其实现的核心代码仅仅8行,删除一些有的没的,就是下面一坨
$Xi = floor($X); $Yi = floor($Y); if( $Xi == $X && $Yi == $Y){ $this->drawAlphaPixel($X,$Y,array('Alpha'=>$Alpha,'R'=>$R,'G'=>$G,'B'=>$B)); }else{ $Alpha1 = (1 - ($X - $Xi)) * (1 - ($Y - $Yi)) * $Alpha; $this->drawAlphaPixel($Xi,$Yi,array('Alpha'=>$Alpha1,'R'=>$R,'G'=>$G,'B'=>$B)); $Alpha2 = ($X - $Xi) * (1 - ($Y - $Yi)) * $Alpha; $this->drawAlphaPixel($Xi+1,$Yi,array('Alpha'=>$Alpha2,'R'=>$R,'G'=>$G,'B'=>$B)); $Alpha3 = (1 - ($X - $Xi)) * ($Y - $Yi) * $Alpha; $this->drawAlphaPixel($Xi,$Yi+1,array('Alpha'=>$Alpha3,'R'=>$R,'G'=>$G,'B'=>$B)); $Alpha4 = ($X - $Xi) * ($Y - $Yi) * $Alpha; $this->drawAlphaPixel($Xi+1,$Yi+1,array('Alpha'=>$Alpha4,'R'=>$R,'G'=>$G,'B'=>$B); }
道理正如你第一眼就想到的那样,画四个点对像素点进行补差;(drawAlphaPixel就是imagesetpixel的一个封装)
假设$X = 1.6;$Y=1.2;我这里将其放大一百倍,效果图
图中圆形代表一个像素点(当然像素点一般都是正方形的,这里是为了直观),颜色最浓的($X,$Y)为圆心的像素点,可以看到明显的颜色透明度差别,越是接近($X,$Y)的颜色越浓,这样渐变的过程就混淆了锯齿,像“光晕”一样(咳咳,不知道这样解释合不合理)
代码中画的四个点以此可以对应到图中Z排布1,2,3,4圆上,并没有很高端大气上档次的部分(其实这也是效率较低的一种方法),但确实可以解决问题;
最后,
根据pChart2 我做了一个mini版的simpleChart(遵循apache license 2) 还在不断完善中,目前仅仅实现了基本的绘图API为了方便使用,方法名和参数都继承了pChart2的血统,并进行了一些优化,但功能就简单很多;上面的图片都是用这个做的;
代码托管在 https://github.com/xiilei/simpleChart