基於Canvas實現路口渠化的繪製和配置功能（一）

前言

基於公司需求，在智慧交通項目中需要引入路口渠化配置的功能。基本功能是通過web端操作，實現路口車道，方向，燈位，檢測器等配置，並實時反饋到真實路口中。

效果預覽

 

暫定八方向路口的繪製，第一階段實現了各路口根據屬性繪製的結果。

開始

定義對象：由於路口的複雜性，因此分別定義RoadList（整理路口組）、Road（單個路口）、Lane（路口內單個車道）、WalkWay（人行道）。

更換座標：由於canvas座標系的特殊性，所以在畫布中的座標是這樣的

導致定義各路口的座標點位很複雜，因此將座標系移動到畫布中央，進行各方向座標點的定義，在將座標系平移回左上角。

所以在代碼中定義了一些工具類，分別是

// 代碼中定義的pow2爲根號2


// 恢復canvas座標系
function moveCoordinate(point = []) {
    const width = cxt.canvas.width;
    const height = cxt.canvas.height;
    return [point[0] + width / 2, -point[1] + height / 2]
}

// 切換至原點座標系
function removeCoordinate(point) {
    const width = cxt.canvas.width;
    const height = cxt.canvas.height;
    return point.map(i => [i[0] - width / 2, -i[1] + height / 2]);
}

// 翻轉座標系，type - 0：x軸對稱，1：y軸對稱，2，y=x對稱，3，y=-x對稱
function rotateCoordinate(point, type) {
    switch (type) {
        case 0:
            return [point[0], -point[1]];
        case 1:
            return [-point[0], point[1]];
        case 2:
            return [point[1], point[0]];
        case 3:
            return [-point[1], -point[0]];
        case 4:
            return [pow2 / 2 * (point[1] - point[0]), pow2 / 2 * (point[0] + point[1])]
    }
}

定義後，我們只需要以中心爲座標原點，進行各路口點位的計算，再調用moveCoordinate恢復至canvas座標系進行繪圖即可。