html2canvas實作dashed虛線邊框的範例

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

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

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

findDashedBorders = (page) => { const tds = page.querySelectorAll(td); const borders = []; tds.forEach(td => { const computedStyle = window.getComputedStyle(td); const borderStyle = com .borderStyle.split(' ') : []; const dashedIndex = findAll(borderStyle, 'dashed'); if (dashedIndex.length) { const rect = td.getBoundingClientRect(); dashedIndex.map(index => { const border = = { rect, border: dashedBorder[index] } borders.push(border); td.style[`border${dashedBorder[index]}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) => { const borders = this.findDashedBorders(page); const parentRect = page.getBoundingClientRect(); html2canvas(page, {scale: 2, logging: false, useRS: canvas(page, {scale: 2, logging: false, use). then((canvas) =​​> { this.drawDashedBorder(canvas, borders, parentRect); ...... })})

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

 drawDashedBorder = (canvas, borders, parentRect) => { var ctx = canvas.getContext(2d); ctx.setLineDash([6, 3]); ctx.strokeStyle = '#3089c7'; ctx.line idth = 1; globalAlpha = 1; borders.forEach(border => { var left = (border.rect.left + 0.5 - parentRect.left)*2; var right = (border.rect.right - 0.5 - parentRect.left)*2; var top = (border.rect.top + 0.5 - parentRect.top)*2; var bottom = (border.rect.bottom - 0.5 - parentRect.top)*2; switch (border.border) { case 'Top': ctx.beginPath(); ctx.moveTo(left, top); ctx.lineTo(right, top); ctx.stroke(); break ; case 'Right': ctx.beginPath(); ctx.moveTo(right, top); ctx.lineTo(right, bottom); ctx.stroke(); break; case 'Bottom': ctx.beginPath(); ctx.moveTo(left, bottom); ctx.lineTo(right, bottom); ctx.stroke( ); break; case 'Left': ctx.beginPath(); ctx.moveTo(left, top); ctx.lineTo(left, bottom); ctx.stroke(); break; default: break; } }) }

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

4.這個方法目前只在chrome測試可用，firefox無效，因為firefox下getComputedStyle回傳的資訊和chrome都不同。

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。