html2canvas は、HTML 要素からキャンバスを生成するライブラリです。描画されたキャンバスのほとんどのスタイルは CSS と一致します。たとえば、1.0.0-alpha.12 の時点では、点線の境界線はまだ実線として描画されており、境界線の崩壊の問題が依然として存在します。
ここでは、github issues のアイデアに基づいて、破線の境界線の効果をシミュレートします。
該当する状況: 多数の個別の境界線が存在します。つまり、完全な境界線ではなく、境界線の半径は考慮されません。
1. まず、html2canvas を描画する前に、canvas 上に描画する必要がある要素内のすべての点線の境界線の方向と位置を調べます。 findDashedBorders = (ページ) => { const tds = page.querySelectorAll(td); const borders = []; tds.forEach(td => { const computedStyle = window.getComputedStyle(td); const borderStyle = computedStyle.borderStyle ? computedStyle .borderStyle.split(' ') : []; findAll(borderStyle, 'dashed'); if (dashedIndex.length) { const rect = td.getBoundingClientRect(); dumpedIndex.map(index => { const border = { rect, border: crashedBorder[index] } borders.push( border); td.style[`border${dashedBorder[index]}Color`] = '透明' }; }); 境界線を返します。Page は、キャンバスを描画する必要がある要素です。ここで破線の境界線を持つ td 要素はすべて td 要素であるため、すべての td 要素を検索し、その borderStyle の値を見つけます。この属性の形式は、破線 破線 なし なし なので、カスタム メソッド findAll() に従ってすべての破線の方向を検索します (たとえば、破線 破線 なし なし は [0, 1] を返します)。 ここで、dashedBorder 配列は次のとおりです。 :
const dumpedBorder = [上、右、下、左];
方向を見つけたら、同時にその位置を取得し、方向と位置の情報を borders 配列に格納し、html2canvas がこのボックスを描画しないように、この境界線を透明に設定します。これは後で個別に処理します。 (注: このページの点線枠はすべて透明になります。描画完了後に透明枠を元の色に戻すことは考慮していません)
2. html2canvasを使用して描画されたキャンバスを取得しますPages.forEach((page, idx) => { const borders = this.findDashedBorders(page); constparentRect = page.getBoundingClientRect(); html2canvas(page, {scale: 2, ロギング: false, useCORS: true})。 then((canvas) => { this.drawDashedBorder(canvas, borders,parentRect); ... })})ページは、キャンバス上に描画する必要があるすべての要素です。各ページの破線の境界線を取得するときに、このページの位置も取得します。これにより、破線の境界線を描画するときに、そのページに対する相対的な境界線の位置を取得できます。このページ。 html2canvas がキャンバスを描画した後、drawDashedBorder() メソッドを使用して破線の境界線をさらに描画します。このメソッドは以下で実装されています。
3. キャンバスを取得した後、drawDashedBorder() でさらに破線を描画します。 drawDashedBorder = (canvas, borders,parentRect) => { var ctx = Canvas.getContext(2d); ctx.ストロークスタイル = '#3089c7'; globalAlpha = 1; borders.forEach(border => { var left = (border.rect.left) + 0.5 - 親Rect.left)*2; var right = (border.rect.right - 0.5 -parentRect.left)*2; var top = (border.rect.top + 0.5 -parentRect.top)*2; = (border.rect.bottom - 0.5 -parentRect.top)*2; スイッチ (border.border) { case 'Top': ctx.beginPath(); ctx.lineTo(右、上); ctx.beginPath(); ); ctx.lineTo(右、下); ctx.ストローク(); ケース '下': ctx.beginPath(); ctx.moveTo(左、下); ctx.bottom(右、下); ctx.beginPath();左、下); ctx.ストローク(); デフォルト: }つまり、bordersの破線の方向と位置情報に基づいて、キャンバス内の2Dコンテキストを取得し、setLineDashメソッドを使用して破線を描画します。以前はキャンバス サイズの 2 倍を使用したため、位置は *2 になります。
4. このメソッドは現在、Chrome のテストでのみ使用でき、Firefox では getComputedStyle によって返される情報が Chrome の情報と異なるため、Firefox では無効です。
Canvasについては深く理解しておらずPRもできないので、html2canvasの正式実装を期待するばかりです。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。