首先请看下面的一段代码（下文具体解释代码作用）：
1 window.TrackTransform = function () { 2 var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg'); 3 var xform = svg.createSVGMatrix(); 4 var savedTransforms = []; 5 this.trackTransform=function(ctx) { 6 7 ctx.getTransform = function () { return xform; }; save = ctx.save; 10 ctx.save = function () { 11 savedTransforms.push(xform.translate(0, 0)); 12 return save.call(ctx); 13 }; 14 var restore = ctx.restore; 15 ctx.restore = function () { 16 xform = savedTransforms.pop(); 17 return restore.call(ctx); 18 }; scale = ctx.scale; 21 ctx.scale = function (sx, sy) { 22 xform = xform.scaleNonUniform(sx, sy); 23 return scale.call(ctx, sx, sy); 24 }; 25 var rotate = ctx.rotate; 26 ctx.rotate = function (deg) { radians = deg * Math.PI / 180; 29 xform = xform.rotate(deg); 30 return rotate.call(ctx, radians); 31 }; 32 var translate = ctx.translate; 33 ctx.translate = function (dx, dy) { 34 xform = xform.translate(dx, dy); 35 return translate.call(ctx, dx, dy); 36 }; 37 var transform = ctx.transform; 38 ctx.transform = function (a, b, c, d, e, f) { 39 var m2 = svg.createSVGMatrix(); 40 m2.a = a; m2.b = b; m2.c = c; m2.d = d; m2.e = e; m2.f = f; 41 xform = xform.multiply(m2); 42 return transform.call(ctx, a, b, c, d, e, f); 43 }; 44 var setTransform = ctx.setTransform; 45 ctx.setTransform = function (a, b, c, d, e, f) { 46 xform.a = a; 47 xform.b = b; 48 xform.c = c; 49 xform.d = d; 50 xform.e = e; 51 xform.f = f; 52 return setTransform.call(ctx, a, b, c, d, e, f); 53 }; 54 var pt = svg.createSVGPoint(); ctx.transformedPoint = function (x, y) { 57 pt.x = x; pt.y = y; 58 return pt.matrixTransform(xform.inverse()); 59 } 60 var pt2 = svg.createSVGPoint(); ctx.transformedPoint2 = function (x, y) { 63 pt2.x = x; pt2.y = y; 64 return pt2.matrixTransform(xform); 65 } 66 var clearRect = ctx.clearRect; 67 ctx.clearRect = function (x, y, w, h) { 68 ctx.save(); 69 ctx.setTransform(1, 0, 0, 1, 0, 0); 70 clearRect.call(ctx, x, y, w, h); 71 ctx.restore(); 72 } 73 } 74 }
代码中主要定义了一个类TrackTransform，重写了CanvasRenderingContext2D对象的save，restore，scale，rotate，translate，transform，setTransform，clearRect方法。
TrackTransform类使用如何使用window.TrackTransform类呢？通过以下两句代码，变量contex的转换方法即进行了重写。
track = new TrackTransform(); 3 track.trackTransform(context);
方法详解具体解释上面各行代码的作用
1 创建矩阵对象xform 2 var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg'); 3 var xform = svg.createSVGMatrix();第2行代码通过createElementNS创建与获取到SVG对象。
第3行代码通过createSVGMatrix()方法创建并返回一个新的2x3的矩阵SVGMatrix矩阵对象赋值到xform。
我们在浏览器中打开开发者工具，到控制台可以输出矩阵看看初始值。
a b c d e f 这6个值就对应了我们在介绍transform方法的那6个参数。这个2x3的矩阵为了方便矩阵运算我们把它扩展为一个3x3的矩阵。
这里再简单解释下svgMatrix：
svgMatrix的方法和属性如下图（具体可参阅：https://developer.mozilla.org/en-US/docs/Web/API/SVGMatrix）
2 save方法 savedTransforms.push(xform.translate(0, 0)); return save.call(ctx);
先将xform存储在一个数组savedTransforms中，然后调用原API方法。
3 restore方法 xform = savedTransforms.pop(); return restore.call(ctx);
相关文章
精彩导读
热门资讯
关注我们
