如何使用canvas繪制可以移動的網格

這篇文章主要介紹“如何使用canvas繪制可以移動的網格”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“如何使用canvas繪制可以移動的網格”文章能幫助大家解決問題。

分析

首先需要有一個起點，這樣就能確定網格所在的位置，其次就是網格中的每個正方形（我們就按正方形來思考，這樣簡單一點）的邊長是多少，另外每個頂點移動的時候，邊也需要跟著移動。

所以其實要存儲的就只有兩類對象，一類就是線，另外就是頂點。

如何存儲頂點和線呢？這里用了一個庫fabric.js，就比較容易的創建頂點和邊的對象，并且它也提供了移動邊的方法，但是問題也同時出現了：按照上面的顯示，一個點最多關聯4條邊，最少也關聯了2條邊，如何表示這種頂點和邊的關聯關系呢？

先想到就是使用數組來存儲頂點和線，然后再根據線中包含的頂點坐標來判斷這個線是否和某個頂點相連，如果是的話，則將將其加入到頂點的關聯屬性中。后面當移動頂點的時候，根據頂點拿到其關聯的線，去動態改變線的坐標，這樣就能實現上面的那種效果了。

實現

下面根據以上分析，我們來實現代碼。首先需要存儲的對象有頂點、邊。然后根據起點坐標以及每個小矩形的邊長，很容易就可以計算出所有的頂點坐標。

function Grid({node, unit, row, col, matrix = []}) {
    // 存儲頂點
    this.vertexes = [];
    // 存儲邊
    this.lines = [];
    
    // 根據起點坐標以及單位邊長計算
    for (let i = 0; i <= row; i++) {
        for (let j = 0; j <= col; j++) {
            const newVertex = makeRect(node.x + i * unit, node.y + j * unit);
            this.vertexes.push(newVertex);
        }
    }
    
    // 添加頂點對象的事件監聽器
    this.addListener();
}

那么邊怎么計算呢，構造邊的話，只需要兩個頂點就可以連成邊，因此我們可以選擇遍歷頂點來構造邊，但是這樣的話會造成重復的邊，而我們只需要一條邊就可以了，不然移動的話，你會發現移動完，下面還會顯示一條重疊的邊。當然其實最重要的原因就是效率問題，如果不去重的話，會導致計算的時間復雜度過高。

現在有兩種方法來解決，一種就是給頂點做標記，當前做線的兩端的頂點已經標記過了，那么就跳過當前輪的遍歷。另外一種方法，就是可以根據網格這種特定的形狀來獲取邊，如下圖，按照兩種不同的顏色來計算水平的邊和垂直的邊。

這樣的話，水平方向，就每行兩兩構成邊，垂直方向，就按照一定的間隔連接兩個頂點構成邊。這里因為后面需要傳給算法的格式是二維數組，因此就使用了這個方法。

// ...省略了

// 構造矩陣
this.matrix = [];
let index = -1;
for (let i = 0; i < this.vertexes.length; i++) {
    if (i % (col + 1) === 0) {
        index++;
        this.matrix[index] = [];
    }
    this.matrix[index].push(this.vertexes[i]);
}

// 根據矩陣添加邊
let idx = 0;
for (let i = 0; i < this.matrix.length; i++) {
    for (let j = 0; j < this.matrix[i].length; j++) {
        // 交叉渲染邊，這樣能夠在可視區內優先展示
        this.matrix[i][j+1] && this.makeLine(this.matrix[i][j], this.matrix[i][j+1]);
        this.vertexes[idx + col + 1] &&
            this.makeLine(this.vertexes[idx], this.vertexes[idx + col + 1]);
        idx++;
    }
}

后面就是找每個頂點關聯了幾條邊

for (let i = 0; i < this.vertexes.length; i++) {
  const vertex = this.vertexes[i];
  // 根據頂點的坐標是否是邊的兩端的開始或結束坐標來判斷頂點是否與這條邊關聯
  const associateLines = this.lines.filter(item => {
    return (item.x1 === vertex.left && item.y1 === vertex.top) ||
      (item.x2 === vertext.left && item.y2 === vertex.top);
  });
  vertex.lines = associateLines;
}

眼精的同學肯定一眼就看出來啦，這個時間復雜度太高了。所以雖然網格畫出來了，但是當頂點數量過多的時候，計算時間太長，導致瀏覽器卡住了了差不多2s往上，當水平方向有50個頂點，垂直方向有50個頂點，就能明顯看到瀏覽器的卡頓，此時如果有輸入框之類的交互UI，是無法做任何操作的，這肯定也是不行滴。

改進

那么有什么方法能夠高效的找到頂點和邊之間的關聯呢？這里就不賣關子了，當然可能還有其他更好的方法，但是筆者知識所限，只能到這啦。

解決辦法就是圖這種結構，因為圖的邊可以使用鄰接表或者是鄰接矩陣來存儲，這樣如果我存儲了一個頂點，那么與這個頂點關聯的邊其實就確定了，也就是說，我們在添加頂點的時候，就順便解決了這種頂點的關聯問題，不再需要再次遍歷所有的邊來找關聯了。（這里就不詳細介紹圖這種數據結構了，有興趣的同學可以自己查找資料，實際這里運用圖的地方也就是這個邊和頂點的關聯關系，其他什么圖的遍歷都沒有用到）

我們來改進一下我們的代碼。

function Grid({node, unit, row, col, matrix = []}) {
    this.vertexes = [];
    this.lines = [];
    this.edges = new Map();

    this.addEdges = addEdges;
    this.addVertexes = addVertexes;
}

這里添加了一個新的屬性edges，來存儲頂點和邊的映射關系。其他的步驟和先前都是一樣的，只是更換了添加頂點和邊的方法，什么意思呢，看代碼其實明白了：

function Grid({node, unit, row, col, matrix = []}) {
    // ...省略

    // 根據矩陣添加邊
    let idx = 0;
    for (let i = 0; i < this.matrix.length; i++) {
        for (let j = 0; j < this.matrix[i].length; j++) {
            // 交叉渲染邊，這樣能夠在可視區內優先展示
            this.matrix[i][j+1] && this.addEdges(this.matrix[i][j], this.matrix[i][j+1]);
            this.vertexes[idx + col + 1] &&
                this.addEdges(this.vertexes[idx], this.vertexes[idx + col + 1]);
            idx++;
        }
    }

    // 將邊關聯到頂點
    this.edges.forEach((value, key) => {
        key.lines = value;
    });
}

這里我們就將復雜度為O(mn)的計算降低為了O(n)，這里m為lines的長度，n為vertexes的長度。然后再來看下此時計算100*100的頂點數，計算時間只有200ms，已經能夠滿足我的需求了。那么圖是如何實現這種關聯的呢，其實就是每次添加邊的時候，將邊的兩個頂點同時添加進關聯關系中，也就是Map的結構中。

function addEdges(v, w) {
    const line = makeLine({point1: v, point2: w});
    // 頂點v關聯了邊line
    this.edges.get(v).push(line);
    // 頂點w也同時關聯了邊line
    this.edges.get(w).push(line);
    this.lines.push(line);
}

function addVertexes(v) {
    this.vertexes.push(v);
    // 給每個頂點設置一個Map結構
    this.edges.set(v, []);
}

這樣計算完所有的頂點之后，實際頂點關聯的邊也都確定了，最后只需要遍歷一下這些edges就可以了。

完成了這些之后，開開心心的調用fabric的api，將這些對象添加進canvas中就可以了。

// fabric的API，添加fabric對象到畫布中
canvas.add(...this.vertexes);
canvas.add(...this.lines);

好了，大功告成，可以交差了。運行頁面，打開一看，好家伙，計算速度是快了很多，但是渲染的速度慘不忍睹，30*30的頂點數量，頁面還是有卡頓的情況，這是怎么回事呢？

仔細想想，添加這么多的對象到畫布中，計算量確實是非常大的，但是這里我們也無法改變這種渲染消耗。于是想到了一個折中的方法，就是利用時間切片，簡單來說，就是利用requestAnimationFrame這個API，將渲染任務分割為一個一個的片段，在瀏覽器空閑時去渲染，這樣就不會去阻塞其他瀏覽器的任務。這里就涉及了一些瀏覽器渲染的相關知識。

function renderIdleCallback(canvas) {
    // 任務切片
    const points = this.points.slice();
    const lines = this.lines.slice();
    const task = () => {
        // 清理canvas的時候，中斷后面的渲染
        if (this.interrupt) return;
        if (!points.length && !lines.length) return;
        let slicePoint = [], sliceLine = [];
        for (let i = 0; i < 10; i++) {
            if (points.length) {
                const top = points.shift();
                slicePoint.push(top);
            }
            if (lines.length) {
                const top = lines.shift();
                sliceLine.push(top);
            }
        }
        canvas.add(...slicePoint);
        canvas.add(...sliceLine);
        window.requestAnimationFrame(task);
    }
    task();
}

上面的代碼加入了一個標識符來中斷渲染，因為存在這樣一種情況，本次網格還沒有渲染完，就被清理掉又重新渲染，那么就需要停止上次的渲染，重新開始新的渲染了。

關于“如何使用canvas繪制可以移動的網格”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。