【snap.svg.js】仿真实验可视化

最近，在写一个关于调度的仿真可视化的程序，这里简单总结一下遇到的问题。

实例代码已发布至github上：https://github.com/jack13163/oil。

实例效果查看请访问：https://jack13163.github.io/oil/，后期可能会继续更新。

首先，看一下目前仿真的效果吧。

遇到了两个问题：

1. js中setTimeout和for循环搭配使用时变量的问题；
2. snap.svg.js动态更新element的属性，如颜色，大小等。

1.setTimeout和for循环搭配使用时变量的问题

这部分前人已经总结的很好了，详情能够移步至：js setTimeout和for循环搭配使用时变量的问题。这里简单说明一下问题，并分析一下解决方案的原理。

笔者最初的想法是，经过setTimeout方法在延迟指定的时间后，执行一个方法，该方法用于更新矩形的大小的位置。可谁知，一个for循环下来，只是执行了最后一次迭代的方法。主要是由于for循环很快地执行完后，变量的更改也已经执行了，延时函数尚未调用，当延时到达后，变量已经不会发生变化了。

上述连接中，做者的作法是将setTimeout用自定义的函数封装起来，再将变量传进来，这样一来，每次for循环，都会调用这个自定义的函数。咱们知道，当调用一个函数时，其实是将实参复制一份，产生了一个形参，这样，即使是实参修改了，形参已经将对应的变化过程当中的值所有保存了下来。于是，问题得以很巧妙地解决。

2.snap.svg.js动态更新element的属性

这里再引用一下前人的总结，更多详情请移步至：snapsvg.js中的一些使用方法。下面就看一下snap.svg.js中有哪些经常使用的方法吧。

2.1 查找元素

2.1.1 查找某一个元素

Element.select(query)

采集匹配CSS选择器的内嵌元素，只返回一个。

如：Element.select(“#id”)  经过 id 查找元素

2.1.2 查找全部元素

Element.select(query)

采集匹配CSS选择器的内嵌元素，返回多个。

如：Element.selectAll(“#id tag”) 查找 id 为 id 下的全部 tag 标签元素

2.2 元素属性

2.2.1 获取元素属性

Element.attr(“attribute”) 

2.2.2 设置元素属性

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

2.3 绑定事件

2.3.1 绑定点击事件

Element.click(function(){
    //do sth
}); 

2.3.2 绑定拖动事件

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

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

2.4 元素分组

2.4.1 分组

元素分组主要用于组合不一样的元素，以便于同时移动，缩放和旋转等操做。

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);

2.4.2 向组内追加元素

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 );

2.5 动画效果

详情可参见：SVG动画之Snap.animate

2.6 路径

2.6.1 建立路径

Element.path(pathstring);

2.6.2 检查点是否在path路径中

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

2.6.3 路径参数

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

2.7 矩阵

2.7.1 建立矩阵对象

var myMatrix = new Snap.Matrix();
myMatrix.scale(4,2);                 // 横纵缩放
myMatrix.translate(100,0);          // 平移
myMatrix.rotate(45);              // 旋转

2.7.2 矩阵的高级操做

 

多的就不继续讲解了，高级操做有点复杂，我的也没有太懂，须要深刻研究的，这里笔者推荐若是你们想深刻学习snap.svg.js的话，能够到：https://www.zhangxinxu.com/GitHub/demo-Snap.svg/demo/basic/Element.add.php 看一下。

须要指出的是，我的以为矩阵实现动画这一部分须要有必定的前端功底。若是须要实现动画效果，笔者建议使用animate方法。最后，实例代码以下所示，还有不少待改进的地方，欢迎你们的指点和批评。