軟件項目技術點(5)——在canvas上繪制動態網格線 - fangsmile－IT工程師數位筆記本

文章出處

grid類的實現

當鼠標在畫布上縮放時，網格能跟著我的鼠標滾動而相應的有放大縮小的效果。

下面是具體實現的代碼，draw函數里計算出大網格每條線的間隔和小網格線的間隔，以及大網格和小網格繪制所用的顏色。

具體的實現算法也是參照另外一個軟件用到的，但是我們改進了很多，例如控制只將當前畫面顯示出來的線條繪制出來

 1        draw() {
 2             var scale = (editor && editor.canvas && editor.canvas.canvasImp.scale) || 1;//獲取當前畫布縮放比
 3             var B = .05;
 4             var t = 50;
 5             for (var e = 50 * scale; e >= 200;) // 放大
 6             {
 7                 e /= 4;
 8                 t = e / scale;
 9             }
10             for (; 50 > e;) //縮小
11             {
12                 e *= 4;
13                 t = e / scale;
14             }
15             var i = B + (e - 50) / 150 * (.07 - B);//顏色值
16            
17             this.clear(0, 0, this.canvasWidth, this.canvasHeight);//清空畫布
18 
19             this.drawGrid(t, i + 0.03);//繪制小格子
20 
21             this.drawGrid(t * 4, .21 - i);//繪制大格子
22 
23         }

 1         private drawGrid(e, i) {//e表示每兩條線的間隔距離值；i顏色值，大格子的顏色和小格子的顏色值不同
 2             var P = "rgba(0,0,0,";
 3             var l = P + i + ")", t = 0;
 4 
 5             var scale = (editor && editor.canvas && editor.canvas.canvasImp.scale) || 1;
 6             this.context2D.beginPath();
 7             //為優化性能，控制只繪制當前畫面大小的網格線
 8             var b = this.getLimits();
 9             var winInfo = getWindow();
10             var viewMinx = 0;
11             var viewMiny = 0;
12             var viewMaxx = winInfo.width;
13             var viewMaxy = winInfo.height;
14             var isDraw = false;
15             var windowViewPoints = new Common.List<Core.Point>();
16             windowViewPoints.add(new Core.Point(viewMinx, viewMiny));
17             windowViewPoints.add(new Core.Point(viewMaxx, viewMaxy));
18             windowViewPoints.add(new Core.Point(viewMinx, viewMaxy));
19             windowViewPoints.add(new Core.Point(viewMaxx, viewMiny));
20             var that = this;
21 
22             var minX = 0, maxX = 0, minY = 0, maxY = 0;//最大、最新 x y值
23 
24             windowViewPoints.foreach((index, item: Core.Point) => {
25                 var point = that.context2D.transformedPoint(item.x, item.y);
26                 if (index == 0) {
27                     maxX = minX = point.x;
28                     minY = maxY = point.y;
29                 }
30                 else {
31                     minX = minX > point.x ? point.x : minX;
32                     maxX = maxX < point.x ? point.x : maxX;
33 
34                     minY = minY > point.y ? point.y : minY;
35                     maxY = maxY < point.y ? point.y : maxY;
36                 }
37             });
38 
39             //縱向線條
40             t = b.minX;
41 
42             while (true) {
43                 if (Math.abs(t - minX) <= e || t >= minX) {
44                     this.context2D.moveTo(t, minY);
45                     this.context2D.lineTo(t, maxY);
46                 }
47                 t = t + e;
48                 if (t >= maxX) break;
49             }
50             
51 
52             //橫向線條
53             t = b.minY;
54             while (true) {
55                 if (Math.abs(t - minY) <= e || t >= minY) {
56                     this.context2D.moveTo(minX, t);
57                     this.context2D.lineTo(maxX, t);
58                 }
59                 t = t + e;
60                 if (t >= maxY) break;
61             }
62             this.context2D.closePath();
63             this.context2D.strokeStyle = l;
64             this.context2D.lineWidth = 1 / scale;
65             this.context2D.stroke();
66         }