这几天要做flex chart,看她们做的3d图很是漂亮,自己也做了个简单3d的拼图~
简单介绍下它的画法:首先确定一个起始点,然后开始 画柱体的上面部分,再画画柱体的前面,侧面,
当然了,画面的顺序你自己可以定,先画那个面都可以。
先放个效果图出来看看:
代码如下:首先是自定义的as组件(这里主要贴画法的部分):
// 画柱体的上面部分
matrix.createGradientBox(wi, xx, (270/180)*Math.PI, ox, oy);
g.beginGradientFill("linear",colors,alphas,ratios,matrix);
graphics.moveTo(ox,oy);
graphics.lineTo(ox+wi,oy);
graphics.lineTo(ox+wi-xx,oy+xx);
graphics.lineTo(ox-xx,oy+xx);
graphics.endFill();
// 画柱体的前面,
colors = [lighter,fillColor];
alphas = [1,1];
ratios = [0,127];
matrix.createGradientBox(wi, he, Math.PI/2, ox-xx, oy+xx);
g.beginGradientFill("linear",colors,alphas,ratios,matrix);
g.drawRect(ox-xx,oy+xx,wi,he);
g.endFill();
//画右侧面
colors = [fillColor,lighter];
alphas = [0.7,0.7];
ratios = [0,255];
matrix.createGradientBox(xx, he+xx, (270/180)*Math.PI, ox+wi-xx, oy+xx);
g.beginGradientFill("linear",colors,alphas,ratios,matrix);
g.moveTo(ox+wi-xx,oy+xx);
g.lineTo(ox+wi,oy);
g.lineTo(ox+wi,oy+he-xx);
g.lineTo(ox+wi-xx,oy+he+xx);
g.endFill();
说明一下, g.beginGradientFill("linear",colors,alphas,ratios,matrix);是线性变化填充,g.beginFill()代替
下面是mxml页面代码(主要):
<mx:Panel id="panel" verticalCenter="true" horizontalAlign="true" title="自定义3d柱状图"
width="80%" height="90%" alpha="1" paddingBottom="0"
paddingLeft="0" paddingTop="0" paddingRight="0">
<mx:ColumnChart id="cs" width="70%" height="80%">
<mx:horizontalAxis>
<mx:CategoryAxis id="haxis" categoryField="@name"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries maxWidth="20" yField="undo" maxColumnWidth="25" displayName="@name"
>
<mx:itemRenderer>
<mx:Component>
<local:RollOverBoxItemRenderer color="#8888E0" downColor="#8888E0" overColor="#8888E0"/>
</mx:Component>
</mx:itemRenderer
>
</mx:ColumnSeries>
</mx:series>
</mx:ColumnChart>
注意:红色的部分
源文件如下:
分享到:
相关推荐
FLEX画图之各种柱状图饼状图画法
flex纯手工绘制,具体样式可以看图片,有json文件格式说明 今后发的一切东西都free,希望能对您有所帮助
Flex 实例,flex拖拽形成柱状图,点击弹出图片窗口,柱状图用法
flex做的非常漂亮的3D饼图与3D柱状图,次例为本人积累精心研究所得,希望能给大家带来帮助,至于属性的作用请大家自己去探究,我就没有记录了,欢迎大家学习,交流!
多款风格的Flex的Demo、柱状图、饼图、折线图等,好不容易才找得到的,非常不错的Flex的使用demo!
Flex画饼状、柱状图资料参考,Asp.Net报表资料,Flex画3D柱状图
flex绘制的3d柱状体图形,我自己觉得正是我所需要的,希望大家都能用的上,记者给分啊!
通过几天的研究终于可以用arcgis for flex 在地图上显示柱状图 饼状图和折线图
flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图...
flex 柱状图 饼图 方便使用,导入项目就能使用,也有生成好的文件可以打开查看
包括了Flex柱状图动态效果和不同的颜色效果,其中包括demo源代码和柱状图的源代码,非常实用 运行的时候直接双击test.html即可看到漂亮的柱状图(Flex的ColumnChart)的动态效果
该flex应用程序演示了柱状图动态切换数据源 (event)"> 苹果" yField="apple" click="columnseries1_clickHandler(event)"/> 桔子" yField="orange" /> <!--梨" yField="pear"/>--> ...
flex做的柱状图,动态显示效果,只要修改xml的数值,即可改变柱状图的显示,
彩色 多种颜色 FLEX 柱状图 可牛逼了 就我这有
Flex3D效果图片浏览器,3D效果,旋转,很美
flex水平柱状图表展示源码
本文实例为大家分享了vue echarts实现横向柱状图的具体代码,供大家参考,具体内容如下 实现效果: 代码: <template> <div class="OverYearsPompany"> <div id="OverYearsPompanyChart" style="flex: 1;...
很基础的柱状图应用 做报表的可以参考下 可运行
flex3d实例
Flex 结合PaperVison3D 写的图片浏览demo,下载既能运行