html2canvas é uma biblioteca que gera telas a partir de elementos HTML. A maioria dos estilos da tela desenhada são consistentes com CSS. Por exemplo, a partir da versão 1.0.0-alpha.12, a borda pontilhada ainda é desenhada como uma linha sólida e ainda há um problema com o colapso da borda.
Aqui, com base em uma ideia dos problemas do github, o efeito da borda tracejada é simulado.
Situação aplicável: Existem muitas fronteiras separadas, ou seja, não é uma fronteira completa e o raio da fronteira não é considerado.
1. Primeiro, antes de desenhar o html2canvas, descubra a direção e a posição de todas as bordas pontilhadas nos elementos que precisam ser desenhados no canvas. findDashedBorders = (página) => { const tds = page.querySelectorAll(td); const borderStyle = computadStyle.borderStyle ?computedStyle .borderStyle.split(' '): []; findAll(borderStyle, 'tracejado'); if (dashedIndex.length) { const rect = td.getBoundingClientRect(); borda);td.style[`border${dashedBorder[index]}Color`] = 'transparente' }); }); retornar fronteiras; }Page é o elemento que precisa desenhar a tela. Todos os elementos td com bordas tracejadas aqui são elementos td, então encontre todos os elementos td e use o método getComputedStyle() para encontrar seu borderStyle. deste atributo está na forma de tracejado, tracejado, nenhum, portanto, encontre todas as direções tracejadas de acordo com o método personalizado findAll() (por exemplo, tracejado, tracejado, nenhum, nenhum retornará [0, 1]), onde a matriz dashedBorder é a seguinte :
const dashedBorder = [Superior, Direita, Inferior, Esquerda];
Depois de encontrar a direção, obtenha sua posição ao mesmo tempo, armazene as informações de direção e posição no array de bordas e defina essa borda como transparente para que o html2canvas não desenhe esta caixa. (Observação: todas as bordas pontilhadas nesta página ficarão transparentes. Não consideramos alterar as bordas transparentes de volta às suas cores originais após a conclusão do desenho)
2. Use html2canvas para obter a tela desenhada pages.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, bordas, parentRect); ... })})As páginas são todos os elementos que precisam ser desenhados na tela. Quando obtemos a borda tracejada de cada página, obtemos também a posição desta página, para que ao desenharmos a borda tracejada possamos obter a posição da borda em relação a. esta página. Depois que html2canvas desenha a tela, desenhamos ainda a borda tracejada por meio do método drawDashedBorder(). Este método é implementado abaixo.
3. drawDashedBorder() desenha ainda mais a linha tracejada após obter a tela. drawDashedBorder = (tela, bordas, parentRect) => { var ctx = canvas.getContext(2d); globalAlpha = 1; borders.forEach(border => { var left = (border.rect.left + 0,5 - parentRect.left)*2; = (border.rect.bottom - 0,5 - parentRect.top)*2; switch (border.border) { case 'Top': ctx.beginPath(); ctx.moveTo(esquerda, topo); ctx.lineTo(direita, topo); );ctx.lineTo(direita, inferior); break(); ctx.moveTo(esquerda, inferior); ctx.lineTo(direita, inferior); esquerda, inferior); ctx.stroke(); padrão: break;Isso significa que com base nas informações de direção e posição da borda tracejada nas bordas, obtenha o contexto 2D na tela e use o método setLineDash para desenhar a linha tracejada. As posições são *2 porque usamos 2 vezes o tamanho da tela antes.
4. Este método está atualmente disponível apenas para testes do Chrome e é inválido para o Firefox porque as informações retornadas por getComputedStyle no Firefox são diferentes daquelas no Chrome.
Como não tenho um conhecimento profundo de canvas e não posso fazer relações públicas, só posso esperar a implementação oficial do html2canvas.
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.