Exemple de html2canvas implémentant une bordure en pointillés en pointillés

html2canvas est une bibliothèque qui génère un canevas à partir d'éléments HTML. La plupart des styles du canevas dessiné sont cohérents avec CSS. Par exemple, depuis la version 1.0.0-alpha.12, la bordure en pointillés est toujours dessinée sous forme de ligne continue et il existe toujours un problème de réduction de la bordure.

Ici, sur la base d'une idée issue des problèmes de GitHub, l'effet de bordure en pointillés est simulé.

Situation applicable : il existe de nombreuses frontières distinctes, c'est-à-dire qu'il ne s'agit pas d'une frontière complète et que le rayon de la frontière n'est pas pris en compte.

 findDashedBorders = (page) => { const tds = page.querySelectorAll(td); const borders = []; tds.forEach(td => { const ComputedStyle = window.getComputedStyle(td); const borderStyle = ComputedStyle.borderStyle ? .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' }); }); renvoyer les bordures ; }

La page est l'élément qui doit dessiner le canevas. Tous les éléments td avec des bordures en pointillés ici sont des éléments td, alors recherchez tous les éléments td et utilisez la méthode getComputedStyle() pour trouver leur borderStyle. S'il a une bordure en pointillés, alors la valeur. de cet attribut est sous la forme de pointillés pointillés aucun aucun, donc recherchez toutes les directions en pointillés selon la méthode personnalisée findAll() (par exemple, pointillés pointillés aucun aucun retournera [0, 1]), où le tableau dashedBorder est le suivant :

 const dashedBorder = [Haut, Droite, Bas, Gauche];

Après avoir trouvé la direction, obtenez sa position en même temps, stockez les informations de direction et de position dans le tableau borders et définissez cette bordure sur transparente afin que html2canvas ne dessine pas cette boîte. Nous la traiterons séparément plus tard. (Remarque : les bordures en pointillés de cette page deviendront toutes transparentes. Nous n'envisageons pas de rétablir les couleurs d'origine des bordures transparentes une fois le dessin terminé.)

 pages.forEach((page, idx) => { const borders = this.findDashedBorders(page); const parentRect = page.getBoundingClientRect(); html2canvas(page, {scale : 2, journalisation : false, useCORS : true}). then((canvas) => { this.drawDashedBorder(canvas, borders, parentRect); ... })})

Les pages sont tous des éléments qui doivent être dessinés sur la toile. Lorsque nous obtenons la bordure pointillée de chaque page, nous obtenons également la position de cette page, de sorte que lorsque nous dessinons la bordure pointillée, nous puissions obtenir la position de la bordure par rapport à celle-ci. cette page. Après que html2canvas ait dessiné le canevas, nous dessinons ensuite la bordure en pointillés via la méthode drawDashedBorder(). Cette méthode est implémentée ci-dessous.

 drawDashedBorder = (canvas, borders, parentRect) => { var ctx = canvas.getContext(2d); ctx.setLineDash([6, 3]); 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 ; = (border.rect.bottom - 0,5 - parentRect.top)*2 ; switch (border.border) { case 'Top' : ctx.beginPath(); ctx.moveTo(gauche, haut); ctx.lineTo(droite, haut); cas 'Right': ctx.beginPath(); ); ctx.lineTo(droite, bas); ctx.AVC(); cas 'Bas' : ctx.beginPath(); ctx.moveTo(gauche, bas); ctx.lineTo(droite, bas); ctx.stroke(); cas 'Gauche': ctx.beginPath(); gauche, en bas); ctx.AVC(); pause ; par défaut : break ;

Cela signifie qu'en fonction des informations de direction et de position de la bordure pointillée dans les bordures, obtenez le contexte 2D dans le canevas et utilisez la méthode setLineDash pour tracer la ligne pointillée. Les positions sont *2 car nous avons utilisé auparavant 2 fois la taille du canevas.

4. Cette méthode n'est actuellement disponible que pour les tests Chrome et n'est pas valide pour Firefox car les informations renvoyées par getComputedStyle sous Firefox sont différentes de celles de Chrome.

Comme je n'ai pas une compréhension approfondie de Canvas et que je ne peux pas faire de relations publiques, je ne peux qu'attendre avec impatience la mise en œuvre officielle de html2canvas.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.