html2canvas 實現dashed虛線邊框

html2canvas是乙個將html元素生成canvas的庫，繪製的canvas大部分樣式和css一致。比如截止1.0.0-alpha.12，虛線邊框依然繪製為實線，border-collapse依然有問題。

這裡根據github issues裡的乙個思路，模擬實現了dashed邊框效果。

適用情況：單獨邊框較多，即不是完整邊框，同時不考慮border-radius

finddashedborders = (page) =>
borders.push(border);
td.style[`border$color`] = 'transparent';
});}
});return
borders;
}

page是需要繪製canvas的元素，我這裡有dashed邊框的都是td元素，所以查詢所有td元素，使用getcomputedstyle()方法查詢它的borderstyle，如果它有dashed邊框，那麼這個屬性的值的形式為"dashed dashed none none"，所以根據findall()這個自定義方法找到所有的dashed的方向（比如"dashed dashed none none"將返回[0, 1]），其中dashedborder陣列如下：

const dashedborder = ["top", "right", "bottom", "left"];

找到方位後同時獲取它的位置，將方向和位置資訊存入borders陣列，同時將這條邊框設為透明，使html2canvas不繪製這條框，我們之後會單獨處理。（注意：這個頁面的虛線邊框都會透明掉，這裡並沒有考慮繪製完成後將透明邊框變回原來的顏色）

pages.foreach((page, idx) =>).then((canvas) =>)
})

pages是需要繪製canvas的所有元素，我們在獲取每個page的虛線邊框時，同時獲取這個page的位置，以便我們繪製dashed邊框時得到邊框相對於這個頁面的位置。待html2canvas繪製canvas後，我們通過drawdashedborder()方法進一步繪製出dashed邊框，下面實現這個方法。

drawdashedborder = (canvas, borders, parentrect) =>
})}

意思就是根據borders裡dashed邊框的方向和位置資訊，在canvas裡獲取2d上下文後使用setlinedash方法把虛線繪製出來。位置都*2是因為我們之前canvas使用了2倍大小。

由於對canvas理解不深無法pr，只能期待html2canvas的官方實現了。

html2canvas 實現dashed虛線邊框

html2canvas 實現dashed虛線邊框

html2canvas使用記錄

html2canvas 問題總結

html2canvas 實現dashed虛線邊框

html2canvas 實現dashed虛線邊框

html2canvas使用記錄

html2canvas 問題總結

相關推薦