axure实现粗略饼状图

今天画原型的时候想展现一个饼状图,axure6.5.0没有自带的,导入的外部库也没有。想起来几天前看过的一个视频培训:http://v.youku.com/v_show/id_XMjUxMjYyNjE2.html,里面在61:50左右讲到一个切割图片的用法,既然图片可以切割,那可以切割圆形图片成饼状图。

          先画圆饼。axure里面没有现成的圆形图案,圆形是矩形-椭圆-正圆变来的。先拖动一个矩形,然后右键->;edit button shape->select shape->Ellipse,然后拖动椭圆为粗略的正圆。切割图片的用法是针对图片的,所以要将拖出来的圆饼转换为图片,右键->paste special->paste as image,这样就可以切割了。(有时候,直接点击paste as image时不起作用,可以先选中图形ctrl+C,然后paste as image,最后ctrl+V)在复制出的圆饼图片上右键->edit image->slice image,从圆心位置切割,一个圆饼就被切成四分均等的饼状。但是这样做出来的圆饼没什么效果,背景是白色的,切出来的饼也是白色的,要想改变饼的背景色貌似只能导入图片,但是图片一般都是矩形的,扇形图片而且切到正好匹配我们画出来的圆饼比较难找。所以为了各块饼有颜色,在开始原饼还未被转化成图的时候就要填充好颜色,为了最后拼凑地准确,最好将一个圆饼复制几次,填充上不同的颜色,比如像下边这样:

然后切割图片,最后拼凑如下图:



 这样做出来的饼状图被分的太整齐了,都是直角图,主要是axure里面不能画斜线,wireframe里面只有水平和垂直两种   线,但是看到placeholder后想到一个”投机“的办法:拖placeholder出来,将里面的四条斜线切图出来:
 

然后拼凑如下图:


 

 只是这个颜色分不出来。

       以上没什么含量,纯属拼凑,如有好的方法,欢迎指点!

猜你喜欢

转载自123diansi-163-com.iteye.com/blog/1743776
今日推荐