snapsvg.js中的一些使用方法

luoyjx · 2014-09-02 11:10 · 7369次阅读

Snapsvg 组件使用:

 

查找元素:

Elm.select(“#id”)  通过 id 查找元素

 

查找所有元素

f.selectAll(“#id tag”) 查找 id 为 id 下的所有 tag 标签元素

 

元素属性

Elm.attr(“attribute”)  获取元素属性

element.attr({ opacity: value, rotate: (value * 360) });

 

绑定点击事件

Elem.click(function(){}) 

 

添加拖动事件

Elem.drag(onmove, onstart, onend, [mcontext],[scontext],[econtext])

正在拖动方法、拖动开始方法、拖动结束方法、正在拖动 context 、开始拖动 context 、结束拖动 context

 

变换元素

Elem.transform( str) 变换的字符串

 

eg: transform: ‘s2r45,250,250’ ( 同时缩放水平和垂直的所标需要指定中心点 )

t 平移坐标 x,y

s 放大倍数

r 旋转角度增加到多少度

? 中心点坐标

 

eg: transform: ‘t100,-100s2,3’

s 水平和垂直缩放

t 移动

 

元素编组

var r = s.rect(100,100,100,100,20,20).attr({ stroke: ‘#123456’, ‘strokeWidth’: 20, fill: ‘red’ });

var c = s.circle(50,50,50).attr({ stroke: ‘#123456’, ‘strokeWidth’: 20, fill: ‘blue’ });

var g = s.group(r,c);

 

组追加元素

var r0 = s.rect(150,150,100,100,20,20).attr({ fill: “orange”, opacity: “0.8”, stroke: “black”, strokeWidth: “2” });

var c0 = s.circle(225,225,10).attr({ fill: “silver”, stroke: “black” });

var g0 = s.group( r0,c0 );

var r1 = s.rect(100,100,100,100,20,20).attr({ fill: “red”, opacity: “0.8”, stroke: “black”, strokeWidth: “2” });

var c1 = s.circle(175,175,10).attr({ fill: “silver”, stroke: “black” });

var g1 = s.group( r1,c1 );

g1.appendTo( g0 );

 

 

动画效果

Elem.animate(attr , duration , easing , callback) 属性,持续时间,释放,回调

                                持续时间,弹性释放

g.animate({ transform: ‘s1r0,150,150’ }, 1000,     mina.bounce )

           起始  结束    改变值的方法                                持续时间

Snap.animate(0,    100,   function (value) {t.attr({text: Math.round(value)}); }, 1000);

 

创建****path

Elem.path(pathstring) 元素使用 pathstring 创建 path

 

检查点是否在path路径中(闭合?)

Snap.path.isPointInside( myPathString, x,y )

 

 

创建椭圆

elem.ellipse(x , y , rx , ry) 中心点 x ,中心点 y ,横向半径,纵向半径

 

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() :关闭路径

 

 

A****指令

允许不闭合。可以想像成是椭圆的某一段,共七个参数:

A RX,RY,XROTATION,FLAG1,FLAG2,X,Y

 

RX,RY 指所在椭圆的半轴大小
XROTATION 指椭圆的 X 轴与水平方向顺时针方向夹角,可以想像成一个水平的椭圆绕中心点顺时针旋转 XROTATION 的角度。
FLAG1 只有两个值, 1 表示大角度弧线, 0 为小角度弧线。
FLAG2 只有两个值,确定从起点至终点的方向, 1 为顺时针, 0 为逆时针
X,Y 为终点坐标

 

创建矩阵对象

var myMatrix = new Snap.Matrix();

myMatrix.scale(4,2);                 // 横纵缩放

myMatrix.translate(100,0);          // 平移

myMatrix.rotate(45);              // 旋转

收藏

暂无评论

登录后可以进行评论。没有账号?马上注册