转载

svg.js教程及使用手册详解

上篇简要介绍了svg.js的基本信息和基本用法，这篇开始详细讲解svg.js的用法。

SVG元素

SVG元素主要包括各种形状、线条、文本、路径。

矩形——Rect

Rects有两个参数，即矩形的宽度和高度：

 var rect = draw.rect(100, 100)

椭圆——Ellipse

Ellipses就像矩形一样，有两个参数，横向和纵向的直径：

 var ellipse = draw.ellipse(200, 100)

圆——Circle

Circles有一个参数，即圆的直径：

 var circle = draw.circle(100)

倘若画椭圆的时候，设置其两个参数相同，那么实际上画出的图形和相同直径的圆是一样的。

直线——Line

四个参数，分别是直线起点和终点的x、y坐标：

 var line = draw.line(0, 0, 100, 150).stroke({ width: 1 })

折线——Polyline

由三个或三个以上的点组成折线，也可以认为是不闭合的多边形。所以其参数就是折线顶点的坐标：

 var polyline = draw.polyline('0,0 100,50 50,100').fill('none').stroke({ width: 1 })

其中用空格分开的每一对坐标x1,y1表示一个顶点的坐标，所以使用以下的这种集合的方式来表示点的坐标也是可以的：

 var polyline = draw.polyline([[0,0], [100,50], [50,100]]).fill('none').stroke({ width: 1 })

多边形——Polygon

polyline画出的是折线，是不闭合的多边形，Polygon则相对的画出的是闭合的多边形。其参数是闭合多边形的顶点的坐标：

 var polygon = draw.polygon('0,0 100,50 50,100').fill('none').stroke({ width: 1 })

二者的区别仅仅在于，起点和终点是否连接。

路径——Path

 var path = draw.path('M10,20L30,40')

实际上svg.js中Path的使用方法跟SVG的Path的使用方法是一样的。具体如下：

M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
L = lineto(L X,Y) ：画直线到指定的坐标位置
H = horizontal lineto(H X)：画水平线到指定的X坐标位置
V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
Z = closepath()：关闭路径

图片——Image

当需要在SVG画布上放置图片时，可以使用以下函数：

 var image = draw.image('/path/to/image.jpg', 200, 200).move(100, 100)

其中第一个参数是图片路径，后两个参数分别表示图片的宽度和高度。

文本——Text

第一种是最简单的创建文本的方式：

 var text = draw.text("Lorem ipsum dolor sit amet consectetur./nCras sodales imperdiet auctor.")

以上代码会自动创建一个文本块，并在必要时插入换行。

第二种方式相对复杂，也增加了更多控制：

 var text = draw.text(function(add) {   add.tspan('Lorem ipsum dolor sit amet ').newLine()   add.tspan('consectetur').fill('#f06')   add.tspan('.')   add.tspan('Cras sodales imperdiet auctor.').newLine().dx(20)   add.tspan('Nunc ultrices lectus at erat').newLine()   add.tspan('dictum pharetra elementum ante').newLine() })

要获取text文本的内容：

 text.content

要修改text文本的内容：

 text.text('Brilliant!')

还有如下这种使用起来更自然的方式：

 text.font({   family:   'Helvetica' , size:     144 , anchor:   'middle' , leading:  '1.5em' })

文本路径——TextPath

 var text = draw.text(function(add) {   add.tspan('We go ')   add.tspan('up').fill('#f09').dy(-40)   add.tspan(', then we go down, then up again').dy(40) }) text.path('M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100').font({ size: 42.5, family: 'Verdana' })

以上代码在执行时，将沿着给定的路径绘制文本。

继承——Use

 var rect = draw.rect(100, 100).fill('#f09') var use  = draw.use(rect).move(200, 200)

如上代码所示，在SVG画布上将会出现两个rect，原始的rect和use的实例，任何在原始rect上所做的修改都将会在use的实例上显现。

如果我不想让原始的rect出现怎么办呢？

 var rect = draw.defs().rect(100, 100).fill('#f09') var use  = draw.use(rect).move(200, 200)

如上，可以使用defs()方法，由此也拓展出一个更易于重用的SVG组件。可以将原始的rect当作一个库元素，可以通过use方法来进行重用而不会修改原始元素。

下一篇将持续更新svg.js中引用元素的方法，也即控制画布上的元素进行动画操作的方法，敬请期待！

原文 http://www.cnblogs.com/mcbye/p/svg2.html

正文到此结束

所属分类：编程技术

本文标签： ip DDL 参数实例 HTML CTO 代码 js http
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

svg.js教程及使用手册详解

SVG元素

矩形——Rect

椭圆——Ellipse

圆——Circle

直线——Line

折线——Polyline

多边形——Polygon

路径——Path

图片——Image

文本——Text

文本路径——TextPath

继承——Use

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流