html2canvas es una biblioteca que genera lienzos a partir de elementos html. La mayoría de los estilos del lienzo dibujado son consistentes con CSS. Por ejemplo, a partir de 1.0.0-alpha.12, el borde de puntos todavía se dibuja como una línea continua y todavía hay un problema con el colapso del borde.
Aquí, basándose en una idea de los problemas de github, se simula el efecto de borde discontinuo.
Situación aplicable: hay muchos límites separados, es decir, no es un límite completo y no se considera el radio del límite.
1. Primero, antes de dibujar html2canvas, averigüe la dirección y posición de todos los bordes de puntos en los elementos que deben dibujarse en el lienzo. findDashedBorders = (página) => { const tds = page.querySelectorAll(td); const borders = []; tds.forEach(td => { const computedStyle = window.getComputedStyle(td); const borderStyle = computedStyle.borderStyle ? computedStyle .borderStyle.split(' ') : []; const dashedIndex = findAll(borderStyle, 'guionado'); if (dashedIndex.length) { const rect = td.getBoundingClientRect(); dashedIndex.map(index => { const border = { rect, border: dashedBorder[index] } borders.push( borde); td.style[`border${dashedBorder[index]}Color`] = 'transparente' }); }); devolver fronteras;La página es el elemento que necesita dibujar el lienzo. Todos los elementos td con bordes discontinuos aquí son elementos td, así que busque todos los elementos td y use el método getComputedStyle() para encontrar su borderStyle. Si tiene un borde discontinuo, entonces el valor. de este atributo tiene la forma de discontinuo discontinuo ninguno ninguno, por lo tanto, busque todas las direcciones discontinuas de acuerdo con el método personalizado findAll() (por ejemplo, discontinuo discontinuo ninguno ninguno devolverá [0, 1]), donde la matriz dashedBorder es la siguiente :
const dashedBorder = [Arriba, Derecha, Abajo, Izquierda];
Después de encontrar la dirección, obtenga su posición al mismo tiempo, almacene la información de dirección y posición en la matriz de bordes y establezca este borde en transparente para que html2canvas no dibuje este cuadro. Lo manejaremos por separado más adelante. (Nota: todos los bordes punteados de esta página se volverán transparentes. No consideramos cambiar los bordes transparentes a sus colores originales una vez completado el dibujo)
2. Utilice html2canvas para obtener el lienzo dibujado. páginas.forEach((página, idx) => { const borders = this.findDashedBorders(page); const parentRect = page.getBoundingClientRect(); html2canvas(page, {scale: 2, logging: false, useCORS: true}). entonces((lienzo) => { this.drawDashedBorder(lienzo, bordes, parentRect); ... })})Las páginas son todos elementos que deben dibujarse en el lienzo. Cuando obtenemos el borde discontinuo de cada página, también obtenemos la posición de esta página, de modo que cuando dibujamos el borde discontinuo, podemos obtener la posición del borde en relación con. esta página. Después de que html2canvas dibuje el lienzo, dibujamos el borde discontinuo mediante el método drawDashedBorder(). Este método se implementa a continuación.
3. drawDashedBorder() dibuja aún más la línea discontinua después de obtener el lienzo. drawDashedBorder = (lienzo, bordes, parentRect) => { var ctx = canvas.getContext(2d); ctx.setLineDash([6, 3]); ctx.strokeStyle = '#3089c7'; globalAlpha = 1; fronteras.forEach(frontera => { var izquierda = (frontera.rect.izquierda + 0,5 - parentRect.left)*2; var derecha = (border.rect.right - 0,5 - parentRect.left)*2; var arriba = (border.rect.top + 0,5 - parentRect.top)*2; = (border.rect.bottom - 0.5 - parentRect.top)*2; cambiar (border.border) { caso 'Arriba': ctx.beginPath(); ctx.moveTo(izquierda, arriba); ctx.lineTo(derecha, arriba); ctx.stroke(); case 'Derecha': ctx.beginPath(); ctx.lineTo(derecha, abajo); ctx.stroke(); romper; caso 'Abajo': ctx.beginPath(); ctx.moveTo(izquierda, abajo); ctx.lineTo(derecha, abajo); ctx.stroke(); case 'Izquierda': ctx.beginPath(); izquierda, abajo); ctx.stroke(); romper; predeterminado: romper;Esto significa que, según la información de dirección y posición del borde discontinuo en los bordes, obtenga el contexto 2D en el lienzo y use el método setLineDash para dibujar la línea discontinua. Las posiciones son *2 porque antes usamos 2 veces el tamaño del lienzo.
4. Actualmente, este método solo está disponible para pruebas de Chrome y no es válido para Firefox porque la información devuelta por getComputedStyle en Firefox es diferente a la de Chrome.
Como no tengo un conocimiento profundo de Canvas y no puedo hacer relaciones públicas, solo puedo esperar la implementación oficial de html2canvas.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.