html2canvas — это библиотека, которая генерирует холст из элементов HTML. Большинство стилей рисуемого холста соответствуют CSS. Например, начиная с версии 1.0.0-alpha.12 пунктирная граница по-прежнему отображается сплошной линией, и по-прежнему существует проблема с коллапсом границы.
Здесь, основываясь на идее из выпусков GitHub, моделируется эффект пунктирной границы.
Применимая ситуация: существует много отдельных границ, то есть это не полная граница, и радиус границы не учитывается.
1. Во-первых, прежде чем рисовать html2canvas, выясните направление и положение всех пунктирных границ в элементах, которые нужно нарисовать на холсте. 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( граница); td.style[`border${dashedBorder[index]}Color`] = 'прозрачный' }); }); вернуть границы; };Страница — это элемент, который должен рисовать холст. Все элементы td с пунктирными границами здесь являются элементами td, поэтому найдите все элементы td и используйте метод getComputedStyle(), чтобы найти их borderStyle. Если у него есть пунктирная граница, то значение. этого атрибута имеет вид пунктирного нет нет, поэтому найдите все пунктирные направления в соответствии с пользовательским методом findAll() (например, пунктирный пунктирный нет ни один не вернет [0, 1]), где массив пунктирной границы выглядит следующим образом: :
const DashedBorder = [Вверх, Вправо, Вниз, Влево];
Найдя направление, одновременно получите его положение, сохраните информацию о направлении и положении в массиве borders и установите для этой границы прозрачность, чтобы html2canvas не рисовал это поле. Мы обработаем это отдельно позже. (Примечание. Все пунктирные границы на этой странице станут прозрачными. Мы не рассматриваем возможность изменения исходных цветов прозрачных границ после завершения рисования)
2. Используйте html2canvas, чтобы получить нарисованный холст. pages.forEach((page, idx) => {const borders = this.findDashedBorders(page); const родительскийRect = page.getBoundingClientRect(); html2canvas(page, {scale: 2, logging: false, useCORS: true}). then((canvas) => { this.drawDashedBorder(canvas, borders, ParentRect); ... })})Страницы — это все элементы, которые необходимо отрисовать на холсте. Когда мы получаем пунктирную границу каждой страницы, мы также получаем положение этой страницы, поэтому, когда мы рисуем пунктирную границу, мы можем получить положение границы относительно. эту страницу. После того, как html2canvas нарисует холст, мы дополнительно рисуем пунктирную границу с помощью метода drawDashedBorder(). Этот метод реализован ниже.
3. drawDashedBorder() рисует пунктирную линию после получения холста. drawDashedBorder = (холст, границы, ParentRect) => { var ctx = Canvas.getContext(2d); ctx.setLineDash([6, 3]); ctx.strokeStyle = '#3089c7'; globalAlpha = 1; borders.forEach(border => {var left = (border.rect.left) + 0,5 - родительский прямоугольник.left)*2; вар правый = (граница.прямой.правый - 0,5 - родительский прямоугольник.левый)*2; вар верхний = (граница.прямой.верх + 0,5 - родительский прямоугольник.верхний)*2; = (border.rect.bottom - 0,5 - родительскийRect.top)*2 переключатель (border.border) {case 'Top': ctx.beginPath(); ctx.moveTo(left, top); ctx.lineTo(right, top); разрыв; регистр «Вправо»: ctx.beginPath(); ctx.lineTo(справа, снизу); ctx.stroke(); случай «Низ»: ctx.beginPath(); ctx.moveTo(слева, снизу); ctx.lineTo(справа, снизу); разрыв; случай «слева»: ctx.beginPath(); ctx.moveTo(left, top); слева, внизу); ctx.stroke(); по умолчанию: перерыв } }) }Это означает, что на основе информации о направлении и положении пунктирной границы в границах необходимо получить 2D-контекст на холсте и использовать метод setLineDash для рисования пунктирной линии. Позиции указаны *2, потому что раньше мы использовали размер холста в 2 раза больше.
4. Этот метод в настоящее время доступен только для тестирования Chrome и недействителен для Firefox, поскольку информация, возвращаемая getComputedStyle в Firefox, отличается от информации в Chrome.
Поскольку у меня нет глубокого понимания Canvas и я не умею пиариться, мне остается только ждать официальной реализации html2canvas.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.