html2canvas ist eine Bibliothek, die Canvas aus HTML-Elementen generiert. Die meisten Stile des gezeichneten Canvas stimmen mit CSS überein. Beispielsweise wird ab 1.0.0-alpha.12 der gepunktete Rand immer noch als durchgezogene Linie gezeichnet und es gibt immer noch ein Problem mit der Randkollapsfunktion.
Basierend auf einer Idee in Github Issues wird hier der gestrichelte Randeffekt simuliert.
Anwendbare Situation: Es gibt viele separate Grenzen, das heißt, es handelt sich nicht um eine vollständige Grenze, und der Grenzradius wird nicht berücksichtigt.
1. Bevor Sie html2canvas zeichnen, ermitteln Sie zunächst die Richtung und Position aller gepunkteten Ränder in den Elementen, die auf der Leinwand gezeichnet werden müssen. findDashedBorders = (page) => { const tds = page.querySelectorAll(td); const borders = []; .borderStyle.split('') : []; const dashedIndex = findAll(borderStyle, 'dashed'); if (dashedIndex.length) { const rect = td.getBoundingClientRect(); border); td.style[`border${dashedBorder[index]}Color`] = 'transparent' }); }); return borders }Page ist das Element, das die Leinwand zeichnen muss. Alle td-Elemente mit gestrichelten Rändern sind hier td-Elemente. Suchen Sie also alle td-Elemente und verwenden Sie die Methode getComputedStyle(), um deren borderStyle zu ermitteln Dieses Attribut hat die Form gestrichelt, gestrichelt, keine, keine, also finden Sie alle gestrichelten Richtungen gemäß der benutzerdefinierten Methode findAll() (z. B. gibt gestrichelt, gestrichelt, keine, keine [0, 1] zurück), wobei das dashedBorder-Array wie folgt lautet :
const dasedBorder = [Oben, Rechts, Unten, Links];
Nachdem Sie die Richtung gefunden haben, ermitteln Sie gleichzeitig deren Position, speichern Sie die Richtungs- und Positionsinformationen im Rahmenarray und setzen Sie diesen Rand auf transparent, damit html2canvas dieses Feld nicht zeichnet. Wir werden es später separat behandeln. (Hinweis: Die gepunkteten Ränder auf dieser Seite werden alle transparent. Wir erwägen nicht, die transparenten Ränder nach Abschluss der Zeichnung wieder in ihre ursprünglichen Farben zu ändern.)
2. Verwenden Sie html2canvas, um die gezeichnete Leinwand abzurufen seiten.forEach((page, idx) => { const borders = this.findDashedBorders(page); const parentRect = page.getBoundingClientRect(); html2canvas(page, {scale: 2, logging: false, useCORS: true}). then((canvas) => { this.drawDashedBorder(canvas, borders, parentRect); ... })})Seiten sind alle Elemente, die auf der Leinwand gezeichnet werden müssen. Wenn wir den gestrichelten Rand jeder Seite erhalten, erhalten wir auch die Position dieser Seite, sodass wir beim Zeichnen des gestrichelten Randes die Position des Randes relativ zu ermitteln können diese Seite. Nachdem html2canvas die Leinwand gezeichnet hat, zeichnen wir den gestrichelten Rand weiter mit der Methode drawDashedBorder(). Diese Methode wird unten implementiert.
3. drawDashedBorder() zeichnet die gestrichelte Linie weiter, nachdem die Leinwand abgerufen wurde. drawDashedBorder = (canvas, borders, parentRect) => { var ctx = canvas.getContext(2d); ctx.strokeStyle = '#3089c7'; ctx. 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 - var unten). = (border.rect.bottom - 0.5 - parentRect.top)*2; switch (border.border) { case 'Top': ctx.beginPath(); ctx.moveTo(right, top); ctx.stroke(); break; ); ctx.lineTo(right, unten); ctx.Stroke(); break; ctx.moveTo(left, unten); ctx.streiche(); break; links, unten); ctx.stroke(); default: break;Dies bedeutet, dass Sie basierend auf den Richtungs- und Positionsinformationen des gestrichelten Rahmens in Rahmen den 2D-Kontext im Canvas abrufen und die setLineDash-Methode verwenden, um die gestrichelte Linie zu zeichnen. Die Positionen sind *2, da wir zuvor die doppelte Leinwandgröße verwendet haben.
4. Diese Methode ist derzeit nur für Chrome-Tests verfügbar und für Firefox ungültig, da sich die von getComputedStyle unter Firefox zurückgegebenen Informationen von denen in Chrome unterscheiden.
Da ich kein tiefes Verständnis von Canvas habe und keine PR machen kann, kann ich mich nur auf die offizielle Implementierung von html2canvas freuen.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.