拉菲尔-让svg在飞一会

SVG相关介绍

Transcript

1. 拉菲尔-让svg在飞一会 99 前端工程师 新浪微博@宇宙一片小囧
2. Svg是一个 标准！ Svg是什么？ 可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标记语言 （XML），用于描述二维矢量图形的一种图 形格式。SVG由W3C制定，是一个开放标 准。 http://graphic.duapp.com/
3. 怎样抖的？ 抖的什么？ Svg？Png?gif?bit64?
4. 图像层面！ Svg优点？ 非常容易修改 SVG 是可伸缩的，尺寸更小 SVG 图像中的文本是可选的，同时也是可 搜索的（很适合制作地图）
5. 可操纵性！ Svg优点？ 非常容易修改 http://jsbin.com/epiwul/7 SVG节点，事件绑定与动画，都不是问 题。。。 JavaScript和CSS自由操纵svg
6. 基于未来的 图形图像算 法！ Svg有什么用？ 几乎所有高兼容性的图表库的底层库均为拉 斐尔。（数据可视化http://datavlab.org/） http://coding.smashingmagazine.com/2012 /01/16/resolution-independence-with-svg/ 面向未来的图形解决方案 响应式设计的最 佳伴侣 http://www.evernote.com/shard/s156/sh/31 d8e8a5-d90f-41e7-8b83- 96c0e32b1733/1ac9acb4f44140296276e9 6362e4117a
7. 扯淡吧！ 为什么不用Svg？ 大家可能都不知道。。都去玩canvas了。。 http://raphaeljs.com 兼容性：不是问题。 基于dom的元素操作非常繁琐：不是问题
8. 想学么！ Raphaeljs 跨越时代的js库 无数的demo http://raphaeljs.com 开源，完全免费，学习成本不算特别高。。。 Icon http://raphaeljs.com/icons/
9. 想学么！ Raphaeljs 跨越时代的js库 <script src="http://cdnjs.cloudflare.com/ajax/libs/r aphael/2.0.0/raphael-min.js"> var paper = Raphael(50, 50, 500, 500); for (var i = 0; i <5; i++) { paper.circle(10 + 15 * i, 10, 10)//创建 circle(x,y,r)的圆 .attr({fill: "#000"})//设置属性 .data("i", i)//设置自定义属性 .click(function () {//绑定事件 console.log(this.attr('cx'),this.data('i')); }); http://jsbin.com/omajal/2
10. 想学么！ Raphaeljs 跨越时代的js库 attr方法 http://raphaeljs.com/reference.html#Eleme nt.attr Fill Stroke R Opacity transform Cx Cy stroke-width Animate方法 Image方法 核心的path方法
11. 想学么！ Raphaeljs 跨越时代的js库 http://jsbin.com/omajal/10/edit // 创建画布 500 × 500 at 50, 50 var paper = Raphael(50, 50, 500, 500); paper.circle(200, 200, 10)//创建 circle(x,y,r)的圆 .attr({fill: "red",stroke:'blue','stroke- width':10,opacity:0.2,})//设置属性 继续 attr({cx:120,cy:400,r:50} http://jsbin.com/omajal/13/edit
12. 想学么！ Raphaeljs 跨越时代的js库 http://jsbin.com/omajal/10/edit // 创建画布 500 × 500 at 50, 50 var paper = Raphael(50, 50, 500, 500); paper.circle(200, 200, 10)//创建 circle(x,y,r)的圆 .attr({fill: "red",stroke:'blue','stroke- width':10,opacity:0.2,})//设置属性 继续 attr({cx:120,cy:400,r:50} http://jsbin.com/omajal/13/edit
13. 想学么！ Raphaeljs 跨越时代的js库 // 创建画布 500 × 500 at 50, 50 var paper = Raphael(50, 50, 500, 500); //Paper.rect(x, y, width, height, [r]) paper.rect(0, 0, 1000, 400, 10).attr({ stroke : "none", fill : "0-#fff-#f00:20- #000" }); http://jsbin.com/omajal/15/edit 0指的是0度，也指的是从左到右渐变（90 从下到上 180从右到左，270从上到下） 每个-指的一个颜色节点。后面加冒号指的 是百分比 上面的意思是 从左到右，#fff渐变到 #f00 渐变到20%，之后#f00渐变到#000, 从20%渐变到100%
14. 想学么！ Raphaeljs 跨越时代的js库 r.circle(100, 100, 200).attr({ stroke : "none", fill : "r(0.5, 0.5)black:20- red:70" }); http://jsbin.com/omajal/16/edit 径向渐变只支持圆与椭圆！
15. 想学么！ Raphaeljs 跨越时代的js库 r.circle(100, 100, 200).attr({ stroke : "none", fill : "r(0.5, 0.5)black:20- red:70" }); http://jsbin.com/omajal/16/edit 径向渐变只支持圆与椭圆！
16. 想学么！ Raphaeljs 跨越时代的js库 attr的transform属性，非常强大。。 transform: “t100,100″ 表示移动相对距离 x100,y100 transform: “r30,100,100″表示以100，100 为中心旋转30度 transform: “s2,1,300,300″ 表示以300， 300为起始点，放大2倍 缩放一次 注意个参 数的对应。 若r s未指定参数，默认为中心点 http://jsbin.com/omajal/17/edit http://raphaeljs.com/reference.html#Eleme nt.transform
17. 想学么！ Raphaeljs 跨越时代的js库 attr的transform属性，非常强大。。 transform: “t100,100″ 表示移动相对距离 x100,y100 transform: “r30,100,100″表示以100，100 为中心旋转30度 transform: “s2,1,300,300″ 表示以300， 300为起始点，放大2倍 缩放一次 注意个参 数的对应。 若r s未指定参数，默认为中心点 http://jsbin.com/omajal/17/edit http://raphaeljs.com/reference.html#Eleme nt.transform
18. 想学么！ Raphaeljs 跨越时代的js库 animate var paper = Raphael(50, 50, 500, 500); paper.circle(320, 240, 60).animate({ fill : "#223fa3", stroke : "#000", "stroke-width" : 80, "stroke-opacity" : 0.5, 'cx':200, 'r':100 }, 2000); http://jsbin.com/omajal/18/edit http://raphaeljs.com/reference.html#Eleme nt.animate
19. 想学么！ Raphaeljs 跨越时代的js库 高级animate http://jsbin.com/omajal/19/edit 支持回调函数，支持缓动 批量操作的技巧：set() 可以用push 添加进去。 http://raphaeljs.com/reference.html#Eleme nt.animate
20. 想学么！ Raphaeljs 跨越时代的js库 高级animate http://jsbin.com/omajal/19/edit http://raphaeljs.com/reference.html#Eleme nt.animate
21. 想学么！ Raphaeljs 跨越时代的js库 核心方法 path() * M = moveto * L = lineto * H = horizontal lineto * V = vertical lineto * C = curveto * S = smooth curveto * Q = quadratic Belzier curve * T = smooth quadratic Belzier curveto * A = elliptical Arc * Z = closepath
22. 想学么！ Raphaeljs 跨越时代的js库 核心方法 path() * M = moveto * L = lineto * H = horizontal lineto * V = vertical lineto * C = curveto * S = smooth curveto * Q = quadratic Belzier curve * T = smooth quadratic Belzier curveto * A = elliptical Arc * Z = closepath （closePath）
23. 想学么！ Raphaeljs 跨越时代的js库 核心方法 path() 画直线 http://jsbin.com/omajal/20/edit var paper = Raphael(50, 50, 500, 500); paper.circle(10, 200, 2).attr({fill: "#000"}) paper.path("M10 200L100 200") paper.circle(100, 200, 2).attr({fill: "#000"}) http://jsbin.com/omajal/21/edit paper.path("M10 200L100 200L200 300L300 380 400 420") 折线图所有的ok！
24. 想学么！ Raphaeljs 跨越时代的js库 核心方法 path() 如何封装一个自己的图表库？ Option Data Position http://jsbin.com/omajal/22/edit
25. 想学么！ Raphaeljs 跨越时代的js库 核心方法 path() 画曲线 http://jsbin.com/omajal/24/edit
26. 想学么！ Raphaeljs 跨越时代的js库 核心方法 path() 画曲线 http://jsbin.com/omajal/27/edit http://jsbin.com/omajal/32/edit
27. 想学么！ Raphaeljs 跨越时代的js库 核心方法 path() 画贝塞尔曲线 http://jsbin.com/omajal/29 贝塞尔曲线 http://cubic-bezier.com/#.17,.67,.83,.67 ["C", ax, ay, bx, by, zx, zy] http://jsbin.com/omajal/34/edit
28. 想学么！ Raphaeljs 跨越时代的js库 学习资料： 贝塞尔曲线 http://cubic-bezier.com/#.17,.67,.83,.67 http://raphaeljs.com/ http://blog.csdn.net/hfahe/article/details/76 61494
29. 谢谢！ W3CPLUS 99 javascript make the world beautiful @宇宙一片小囧 Q&A