ch09、ExtJs4中的图形与图表讲稿.pptVIP

BF-TECH-J2EE软件开发工程师就业课程 level4-富客户端技术篇 工具篇 课程四【Struts2+Spring3+Hibernate4+DWR+ExtJS4.0开发富客户端商业应用】讲师：风舞烟、飞扬 第九章、ExtJs 4 中的图形与图表 目录 一、SVG简介 二、使用图形功能初探 三、DrawComponent、Surface、DrawSprite、CompositeSprite对象的配置项、属性、方法与事件 四、使用基本图形 五、使用路径（Path） 六、移动、旋转和缩放图形 七、用渐变效果 八、使用图层 九、第一个折线图表 十、显示多个折线图 十一、简单条形图（Bar和ColumnChart） 十二、使用饼图 十三、 使用时间轴 十四、使用组合图 十五、在图表中使用背景 一、SVG简介 什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体 SVG 的历史和优势 在 2003 年一月，SVG 1.1 被确立为 W3C 标准。 参与定义 SVG 的组织有：太阳微系统、Adobe、苹果公司、IBM 以及柯达。 与其他图像格式相比，使用 SVG 的优势在于： SVG 可被非常多的工具读取和修改（比如记事本） SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情况下被放大 SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图） SVG 可以与 Java 技术一起运行 SVG 是开放的标准 SVG 文件是纯粹的 XML SVG 的主要竞争者是 Flash。 与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。 二、使用图形功能初探 示例1：1.html 示例2：2.html 示例3: 3.html 三、DrawComponent、Surface、DrawSprite、CompositeSprite对象的配置项、属性、方法与事件 /lujunql/article/details/7078912 items：由DrawSprite对象组成的数组 viewBox：布尔值，默认为true，图形将支持缩放、改变位置或进行旋转。 属性： 无 方法： createSurface：创建Surface实例 DrawComponent DrawComponent派生于Componet对象，在initComponent方法中添加了6个事件：mousedown、mouseup、mousemove、mouseenter、mouseleave和click，重点是渲染onRender，渲染完毕后调用createSurface方法开始创建接口 配置项： autoSize：布尔值，绑定图形的div元素是否根据内容调整大小，默认为false Gradients：数组，渐变的配置对象组成。这些效果主要用于DrawSprite对象的fill属性。每个效果都有id、angle和stops三个配置项。其中id为效果的唯一名称；angle是角度，渐变的角度；stops用于定义从什么颜色过渡到什么颜色，其值0——100 Surface Surface对象是svg的和vml对象的基类，主要作用是提供接口，把画笔的数据转换为图形语言，然后渲染到画布上。 配置项： height：图形的高度，默认为auto width：图形的宽度，默认为auto 方法： add：在图形中添加一个DrawSprite对象，注意：不会自动渲染新添加的对象 addCls：为指定的DrawSprite对象添加样式 addGradient：增加渐变效果 getGroup：根据指定的id获取图层（CompositeSprite对象实例） getId：返回组件的id remove：删除指定的DrawSprite对象 removeAll：移除所有的DrawSprite对象 removeCls：移除指定的DrawSprite对象的样式 setSize：设置Surface的大小 setStyle：指定的DrawSprite对象的样式属性 setText：设置指定的DrawSprite对象的显示文本 事件: create：当Surface实例创建后触发该事件 DrawSprite DrawSprite对象的作用就是把