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

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

SVG元素

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

矩形——Rect

Rects有两个参数,即矩形的宽度和高度:

椭圆——Ellipse

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

圆——Circle

Circles有一个参数,即圆的直径:

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

直线——Line

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

折线——Polyline

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

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

多边形——Polygon

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

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

路径——Path

实际上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画布上放置图片时,可以使用以下函数:

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

文本——Text

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

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

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

要获取text文本的内容:

要修改text文本的内容:

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

文本路径——TextPath

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

继承——Use

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

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

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

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

 

《svg.js教程及使用手册详解(二)》有1个想法

  1. What’s Happening i’m new to this, I stumbled upon this I have found It positively helpful and it has helped me out loads. I’m hoping to give a contribution & assist other users like its aided me. Good job.

发表评论

电子邮件地址不会被公开。 必填项已用*标注