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

实例代码已发布至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方法。最后，实例代码如下所示，还有很多待改进的地方，欢迎大家的指点和批评。
 
                    最近，在写一个关于调度的仿真可视化的程序，这里简单总结一下遇到的问题。实例代码已发布至github上：https://github.com/jack13163/oil。实例效果查看请访问：https://jack13163.github.io/oil/，后期可能会继续更新。首先，看一下目前仿真的效果吧。遇到了两个问题：js中setTimeout和for循环搭配使用时变量的问...
不要对建筑大意。
 BUG：缩小版本不起作用
原因：svgElem.reRunMixin 使用 function.name 属性来执行对象克隆的一些逻辑，但库被混淆了名称丢失。 好吧他妈的我...
 最后更新时间 10:54 pm（2014 年 1 月 4 日）Jordan Yu，2014
				
1、什么是Snap.svg，有什么用？
Snap.svg是一个强大且直观的SVG动画内容操纵API，支持屏蔽、裁剪、全梯度和组别等使得内容更具吸引力和交互性的功能。Snap.svg创建的目的在于摒弃Flash插件，将Flash的特性带到WEB上。作者就是大名鼎鼎的Dmitry Baranovskiy，他也是Raphaeljs的作者。
这里只做下简介，其实它跟D3使用一样，都是"高级"的JavaScript代码操作SVG。如果之前了解过Raphael.js的人学起snap.svg肯定会有似曾相识的感觉。
				
在本教程中，我们将介绍Snap.svg，这是一个JavaScript库，可帮助动画化和操纵SVG内容。 为了演示一些可用的功能，我们将对SVG眼睛进行动画处理。 
什么是Snap.svg？
 Snap.svg是一个JavaScript库，可轻松为现代浏览器创建和操作SVG图形。 它是德米特里·巴拉诺夫斯基 （ Dmitry Baranovskiy ）的拉斐尔（Raphaël ）的继任者； 用于...
				
近期做项目从其他人项目里迁移的一个复杂动画出现了问题，Cannot read properties of undefined (reading on),排查问题出自snapsvg插件。最后发现这个问题出现是因为未做一些配置，分为两步：1、下载imports-loader插件，执行 npm i imports-loader ,这个插件的坑在于版本，我的snapsvg插件是0.5.1，对应的imports-loader插件版本是0.8.0
2、vue.config.js中增加配置：...
				
使用CSS和Snap.svg的SVG动画 
   今天，我想与大家分享我们今天可用的工具中SVG中动画的简便性。 SVG仍然是可以吓跑许多开发人员的主题之一，但是我在这里向您展示希望它是如此的容易。 
 在互联网上进行常规搜索以寻找灵感时，我遇到了《从北上来》上的精彩文章 。 如您所见，Miguel Sousa aka Heymikel，Snack Studio，MartínFeijoó和Sa...
				
snap.svg.js 尽管SVG已经存在了十多年，但由于一些出色的库使开发人员可以轻松使用精美的图表和绘图，特别是D3 ，它在Web应用程序中作为一种在Web应用程序中绘制图表的方式在最近几年变得很流行。 js用于图表， Raphaël用于炫酷的SVG绘图和动画。 
 最近出现了新的杰出图书馆。 它们为前端开发人员和设计师提供了新的方法和惊人的新功能： 
 正如我们将要看到的， Snap.sv...
前身是旧浏览器时代有名的 Raphaël.js 。 
为了更好地发挥HTML5的特性，原作者Dmitry Baranovskiy重写了一个SnapSVG，目前这个项目是Adobede的开源项目之一。
  Currently, the most...
				
snap.svg 是一个强大的JavaScript库，用于创建和操作可扩展矢量图形（SVG）。要实现放大和缩小功能，可以使用snap.svg提供的方法和属性。
首先，我们需要在HTML文件中引入snap.svg库，可以通过以下代码实现：
```html
<script src="snap.svg.js"></script>
然后，我们需要创建一个SVG容器，用于显示图形。可以使用以下代码创建一个宽度为500像素，高度为300像素的SVG容器：
```html
<svg id="svgContainer" width="500" height="300"></svg>
接下来，我们可以使用snap.svg库的方法创建图形，并将其添加到SVG容器中。例如，可以使用以下代码创建一个圆形：
```javascript
var svg = Snap("#svgContainer");
var circle = svg.circle(100, 100, 50);
现在，我们可以通过调用circle对象的transform方法来实现放大和缩小。该方法接受一个参数，表示变换矩阵。我们可以使用scale方法创建一个缩放矩阵，并将其作为参数传递给transform方法。
例如，以下代码将圆形放大1.5倍：
```javascript
circle.transform("s1.5");
同样地，以下代码将圆形缩小到原来的一半大小：
```javascript
circle.transform("s0.5");
通过调用transform方法并传递不同的缩放矩阵，我们可以实现进一步的放大和缩小操作。
总结来说，snap.svg库提供了简便的方式来创建和操作SVG图形，包括放大和缩小。通过使用scale方法和transform方法，我们可以轻松地实现图形的放大和缩小功能。