图形渲染引擎:Ext.draw源码心得

2,169 views

Published on

HTML5分享(广州) 2011-5-14

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,169
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

图形渲染引擎:Ext.draw源码心得

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

×