Beispiel für die Implementierung eines gestrichelten Rahmens mit html2canvas

html2canvas ist eine Bibliothek, die Canvas aus HTML-Elementen generiert. Die meisten Stile des gezeichneten Canvas entsprechen CSS. Ab 1.0.0-alpha.12 werden beispielsweise gestrichelte Ränder immer noch als durchgezogene Linien gezeichnet und es treten immer noch Probleme mit der Rahmenreduzierung auf.

Hier wird, basierend auf einer Idee in GitHub-Problemen, der gestrichelte Randeffekt simuliert und implementiert.

Anwendbare Situationen: Es gibt viele separate Grenzen, d. h. keine vollständige Grenze, und der Grenzradius wird nicht berücksichtigt

1. Ermitteln Sie vor dem Zeichnen in html2canvas zunächst die Richtung und Position aller gepunkteten Ränder im Element, in dem die Leinwand gezeichnet werden muss

findDashedBorders = (Seite) => {
        const tds = page.querySelectorAll("td");
        const Grenzen = [];
        tds.fürEach(td => {
            const computedStyle = window.getComputedStyle(td);
            const borderStyle = computedStyle.borderStyle ? computedStyle.borderStyle.split(' ') : [];
            const dashedIndex = findAll(borderStyle, 'gestrichelt');
            if (gestrichelterIndex.Länge) {
                const rect = td.getBoundingClientRect();
                gestrichelterIndex.map(index => {
                    const Grenze = {
                        rechteck,
                        Rahmen: gestrichelter Rahmen[Index]
                    }
                    Grenzen.push(Grenze);
                    td.style[`border${dashedBorder[index]}Farbe`] = 'transparent';
                });
            }
        });
        Grenzen zurückgeben;
    }

Seite ist das Element, das die Leinwand zeichnen muss. Alle Elemente mit gestrichelten Rändern sind td-Elemente, suchen Sie also alle td-Elemente und verwenden Sie die Methode getComputedStyle(), um ihren borderStyle zu finden. Wenn es einen gestrichelten Rand hat, hat der Wert dieses Attributs die Form „gestrichelt gestrichelt keine keine“, suchen Sie also alle gestrichelten Richtungen gemäß der benutzerdefinierten Methode findAll() (zum Beispiel gibt „gestrichelt gestrichelt keine keine“ [0, 1] zurück), wobei das Array dashedBorder wie folgt aussieht:

const dashedBorder = ["Oben", "Rechts", "Unten", "Links"];

Nachdem Sie die Richtung ermittelt haben, ermitteln Sie gleichzeitig ihre Position, speichern Sie die Richtungs- und Positionsinformationen im Rahmenarray und setzen Sie diesen Rahmen auf transparent, damit html2canvas diesen Rahmen nicht zeichnet. Wir werden später separat darauf eingehen. (Hinweis: Die gepunkteten Ränder auf dieser Seite werden transparent. Dies bedeutet nicht, dass der transparente Rand nach Abschluss des Zeichnens wieder seine ursprüngliche Farbe annehmen kann.)

2. Verwenden Sie html2canvas, um die gezeichnete Leinwand zu erhalten

Seiten.fürJeden((Seite, idx) => {
    const borders = this.findDashedBorders(Seite);
    const parentRect = page.getBoundingClientRect();
    html2canvas(Seite, {Skala: 2, Protokollierung: falsch, useCORS: wahr}).dann((Leinwand) => {
       this.drawDashedBorder(Leinwand, Ränder, übergeordnetes Rechteck);
       ......
    })
})

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 der Seite, sodass wir beim Zeichnen des gestrichelten Rands die Position des Rands relativ zur Seite erhalten. Nachdem html2canvas die Leinwand gezeichnet hat, zeichnen wir zusätzlich den gestrichelten Rahmen mit der Methode drawDashedBorder(). Lassen Sie uns diese Methode implementieren.

3. drawDashedBorder() zeichnet die gepunktete Linie weiter, nachdem die Leinwand abgerufen wurde.

drawDashedBorder = (Leinwand, Ränder, übergeordnetes Rechteck) => {
        var ctx = canvas.getContext("2d");
        ctx.setLineDash([6, 3]);
        ctx.strokeStyle = "#3089c7";
        ctx.Linienbreite = 1;
        ctx.globalAlpha = 1;

        Grenzen.fürJeden(Grenze => {
            var links = (border.rect.left + 0,5 - parentRect.left)*2;
            var rechts = (border.rect.right - 0,5 - parentRect.left)*2;
            var oben = (border.rect.oben + 0,5 - parentRect.oben)*2;
            var unten = (border.rect.bottom - 0,5 - parentRect.top)*2;

            Schalter (Rand.Rand) {
                Fall 'Oben':
                    ctx.beginPath();
                    ctx.moveTo(links, oben);
                    ctx.lineTo(rechts, oben);
                    ctx.stroke();
                    brechen;
                Fall 'Rechts':
                    ctx.beginPath();
                    ctx.moveTo(rechts, oben);
                    ctx.lineTo(rechts, unten);
                    ctx.stroke();
                    brechen;
                Fall 'Unten':
                    ctx.beginPath();
                    ctx.moveTo(links, unten);
                    ctx.lineTo(rechts, unten);
                    ctx.stroke();
                    brechen;
                Fall 'Links':
                    ctx.beginPath();
                    ctx.moveTo(links, oben);
                    ctx.lineTo(links, unten);
                    ctx.stroke();
                    brechen;
                Standard:
                    brechen;
            }
        })
    }

Dies bedeutet, dass gemäß den Richtungs- und Positionsinformationen der gestrichelten Umrandung in den Umrandungen die gestrichelte Linie mit der Methode setLineDash gezeichnet wird, nachdem der 2D-Kontext auf der Leinwand abgerufen wurde. Die Positionen sind alle *2, da wir zuvor die doppelte Leinwandgröße verwendet haben.

4. Diese Methode ist derzeit nur zum Testen in Chrome verfügbar und in Firefox ungültig, da die von getComputedStyle in Firefox zurückgegebenen Informationen sich von denen in Chrome unterscheiden.

Da ich keine tiefen Kenntnisse über Canvas habe und kein PR durchführen kann, kann ich nur auf die offizielle Implementierung von html2canvas warten.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.