軟件項目技術點(2)——Canvas之獲取Canvas當前座標系矩陣

AxeSlide軟件項目梳理   canvas繪圖系列知識點整理

前言

在個人另外一篇博文 Canvas座標系轉換 中，咱們知道了全部的平移縮放旋轉操做都會影響到畫布座標系。那在咱們對畫布進行了一系列操做以後，怎麼再知道當前矩陣數據狀態呢。

具體代碼

首先請看下面的一段代碼（下文具體解釋代碼做用）：  

 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; };
 8         
 9         var 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         };
19         
20         var 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) {
27             
28             var 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();
55         //經過原座標系點x，y求對應當前座標系的座標值
56         ctx.transformedPoint = function (x, y) {
57             pt.x = x; pt.y = y;
58             return pt.matrixTransform(xform.inverse());
59         }
60         var pt2 = svg.createSVGPoint();
61         //當前座標系中的的xy還原到原座標系座標值
62         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的轉換方法即進行了重寫。

1 //初始化矩陣轉換; context爲 getContext("2d")所得的對象。
2 var track = new TrackTransform();
3 track.trackTransform(context);CanvasRenderingContext2D

方法詳解

具體解釋上面各行代碼的做用

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：

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

從savedTransforms數組中去除最後一個對象，並將其賦值到變量xform，而後調用原API方法。

4 scale方法

            xform = xform.scaleNonUniform(sx, sy);
            return scale.call(ctx, sx, sy);

 維護xform，將其縮放，而後調用原API方法。

5 rotate方法

　　　　　　  var radians = deg * Math.PI / 180;
            xform = xform.rotate(deg); return rotate.call(ctx, radians);

 將角度轉爲弧度，維護xform將其進行旋轉變換，而後調用原API方法。

6 translate方法

            xform = xform.translate(dx, dy);
            return translate.call(ctx, dx, dy);

 維護xform將其進行平移變換，而後調用原API方法。

7 transform方法

            var m2 = svg.createSVGMatrix();
            m2.a = a; m2.b = b; m2.c = c; m2.d = d; m2.e = e; m2.f = f; xform = xform.multiply(m2); return transform.call(ctx, a, b, c, d, e, f);

首先聲明一個新的矩陣m2，m2賦值爲要進行變換的6個參數值，而後xform和m2執行矩陣乘法運算，運算結果賦值到xform將其維護。而後調用原API方法。

8 setTransform方法

            xform.a = a;
            xform.b = b; xform.c = c; xform.d = d; xform.e = e; xform.f = f; return setTransform.call(ctx, a, b, c, d, e, f);

維護xform的值，而後調用原API方法。

9 clearRect方法

            ctx.save();
            ctx.setTransform(1, 0, 0, 1, 0, 0);  clearRect.call(ctx, x, y, w, h);  ctx.restore();

首先保存context的當前狀態，將畫布重置到原始狀態（能夠理解爲座標系重置到默認座標系），而後調用原API方法清除畫布指定範圍內容。清除後調用restore恢復Canvas以前保存的狀態。

10 getTeansform方法

ctx.getTransform = function () { return xform; };

接下來介紹的三個方法都是原API沒有的。getTeansform直接返回xform，能夠看到表明畫布矩陣的6個值abcdef。

11 transformedPoint方法

54         var pt = svg.createSVGPoint();
55         //經過原座標系點x，y求對應當前座標系的座標值
56         ctx.transformedPoint = function (x, y) { 57 pt.x = x; pt.y = y; 58 return pt.matrixTransform(xform.inverse()); 59  }

經過原座標系點x，y求對應當前座標系的座標值。

createSVGPoint建立的點爲（0,0），xform.inverse()是求xform的逆矩陣。MatrixTransform則是經過一種矩陣算法來進行運算獲得相應的變形的效果的。矩陣的一些基本算法就很少總結了，之前上課就學過了，網上也有很多講解。

12 transformedPoint2方法

60         var pt2 = svg.createSVGPoint();
61         //當前座標系中的的xy還原到原座標系座標值
62         ctx.transformedPoint2 = function (x, y) { 63 pt2.x = x; pt2.y = y; 64 return pt2.matrixTransform(xform); 65  }

當前座標系中的的x，y還原到原座標系座標值。