Your SlideShare is downloading. ×
图形渲染引擎:Ext.draw源码心得
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

1,800
views

Published on

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

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


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

No Downloads
Views
Total Views
1,800
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 已离职,去了悉尼工作。
  • 7. Raphaël( http://raphaeljs.com/ )
  • 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