图形渲染引擎：Ext.draw源码心得
Download as ODP, PDF1 like1,102 views
本文介绍了张鑫的背景以及他对 ext.draw 图形渲染引擎的看法，ext.draw 是一种跨浏览器的图形绘制方案，重构自 raphaël，并支持多种平台。文中还讨论了 sprite 类型及其特性和参数，用于图形对象的定位与样式设定。最终，作者欢迎读者提问与交流。
图形渲染引擎：Ext.draw源码心得
- 1. 自我介绍 我叫张鑫，微博是 weibo.com/sp42 Ext 中文网： ajaxjs.com 熟悉 Web 前端开发、 JavaScript
- 2. 分享标题 《图形渲染引擎： Ext.draw 源码心得》
- 3. Web 开源图形库 JsVectorGraphics(walterzorn.com) Dojo.gfx Google ExplorerCanvas
- 4. Ext.draw=Dojo.gfx? 有兴趣可参考： 《 Dojo.gfx 包分析》 http://blog.csdn.net/firefight/article/details/1473406 《使用 DojoX GFX 进行绘图》 http://www.ibm.com/developerworks/cn/web/0910_rengang_dojogfx/
- 5. Ext.draw 作者 Dmitry Baranovskiy 矢量库 Raphaël 出自他手，于是 Ext 母公司 Sencha 吸纳了他。 按照 Ext 语法风格重构为 Ext.draw 。 不过 Dmitry 已离职，去了悉尼工作。
- 6. Ext.draw 作者 Dmitry Baranovskiy 矢量库 Raphaël 出自他手，于是 Ext 母公司 Sencha 吸纳了他。 按照 Ext 语法风格重构为 Ext.draw 。 不过 Dmitry 已离职，去了悉尼工作。
- 8. Web 图形库的一般实现目标 通过浏览器的 DOM 方法对 SVG/VML 控制。 因为基于 ECMAScript 脚本，使得一套 API 便可通行于桌面平台或手机平台，等等，只要运行时提供兼容即可。 设计一套 API ，实现图形的输出，不涉及具体渲染过程。根据平台选择，内部最终转为 SVG/VML 渲染。 围绕如何与用户交互的问题，去定义 API ，并允许添加缤纷活泼的效果。
- 9. Ext.draw 之特点 跨浏览器的 SVG/VML 方案，可运行的浏览器有 Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+. 移动平台上支持 Safari on iOS Android 目前不支持 SVG 与 Ext 语法高度兼容，熟悉 Ext 的朋友很快上手
- 10. 了解 Sprite Sprite 是类库中的基础图形对象 Ext.draw 之特点 跨浏览器的 SVG/VML 方案，可运行的浏览器有 Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+. 移动平台上支持 Safari on iOS Android 目前不支持 SVG 与 Ext 语法高度兼容，熟悉 Ext 的朋友很快上手
- 11. Sprite 类型 圆形 circle 矩形 rect 文本 text 路径 path 这些图形对象都对应一个抽象类和实际渲染器的实现类。
- 12. 使用 Sprite 的方法 位移 旋转 缩放 事件
- 13. Sprite 的参数 type - (String) The type of the sprite. Possible options are 'circle', 'path', 'rect', 'text', 'square'. width - (Number) Used in rectangle sprites, the width of the rectangle. height - (Number) Used in rectangle sprites, the height of the rectangle. size - (Number) Used in square sprites, the dimension of the square. radius - (Number) Used in circle sprites, the radius of the circle.
- 14. Sprite 的参数 x - (Number) The position along the x-axis. y - (Number) The position along the y-axis. path - (Array) Used in path sprites, the path of
- 15. Sprite 的参数 opacity - (Number) The opacity of the sprite. fill - (String) The fill color. stroke - (String) The stroke color. stroke-width - (Number) The width of the stroke. font - (String) Used with text type sprites. The full font description. Uses the same syntax as the CSS font parameter. text - (String) Used with text type sprites. The text itself.
- 16. Surface 类 统一 SVG/VML 与 ext 组件相互协调 提供事件接口
- 17. EOF 谢谢大家！欢迎提问和交流！ 我叫张鑫，微博是 weibo.com/sp42