svg matrix
Matrix
引用:张鑫旭Snap.svg Matrix方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18eg:
var svg = Snap("#svg");
// 画个圈圈
var c = svg.paper.circle(50, 50, 40);
// 当前矩阵
var m1 = new Snap.Matrix(1,0,0,1,20,20);
// 圈圈应用矩阵变换 - 位移(20, 20)
c.transform(m1.toTransformString());
// 事件
if (document.addEventListener) {
document.querySelector("#button").addEventListener("click", function() {
// 矩阵组合
m1.add(1,0,0,1,-20,-20);
// 圈圈再次应用矩阵变换 - 位移(-20, -20)
c.transform(m1.toTransformString());
});
}
矩阵定义
1 var matrix = new Snap.Matrix(1,0,0,1,20,20)矩阵用法
1 el.transform(matrix.toTransformString())矩阵加法
1 matrix.add()矩阵克隆
1 var m2 = matrix.clone()矩阵反转
1 matrix.invert()矩阵旋转
1 matrix.rotate(value, refX, refY)矩阵旋转
1 matrix.scale(x, y)矩阵平移
1 matrix.translate(x, y)返回矩阵变化后的给定点的x坐标
1 matrix.x(x, y)返回矩阵变化后的给定点的y坐标
1 matrix.y(x, y)分割矩阵为基本变换
1 console.log(matrix.split())