점선 테두리를 구현하는 html2canvas의 예

html2canvas는 html 요소에서 캔버스를 생성하는 라이브러리입니다. 그려진 캔버스의 스타일은 대부분 CSS와 일치합니다. 예를 들어 1.0.0-alpha.12 기준으로는 점선 테두리가 여전히 실선으로 그려져 있고 여전히 border-collapse 문제가 있습니다.

여기에서는 github 문제의 아이디어를 기반으로 점선 테두리 효과가 시뮬레이션됩니다.

적용 상황: ​​별도의 경계가 많이 있습니다. 즉, 완전한 경계가 아니며 경계 반경이 고려되지 않습니다.

 findDashedBorders = (페이지) => { const tds = page.querySelectorAll(td); const borders = []; tds.forEach(td => { const 계산스타일 = window.getCompulatedStyle(td); const borderStyle = 계산스타일.borderStyle ? .borderStyle.split(' ') : []; const dashedIndex = findAll(borderStyle, 'dashed'); if (dashedIndex.length) { const ret = td.getBoundingClientRect(); dashedIndex.map(index => { const border = { ret, border: dashedBorder[index] } borders.push( border); td.style[`border${dashedBorder[index]}Color`] = '투명' }); }) 테두리 반환 }

페이지는 캔버스를 그리는 데 필요한 요소입니다. 여기에서 점선 테두리가 있는 모든 td 요소는 td 요소이므로 모든 td 요소를 찾고 getComputeStyle() 메서드를 사용하여 해당 borderStyle을 찾습니다. 이 속성은 dashed dashed none none 형식이므로 사용자 지정 메서드 findAll()에 따라 모든 대시 방향을 찾습니다(예: dashed dashed none none은 [0, 1]을 반환함). 여기서 dashedBorder 배열은 다음과 같습니다. :

 const dashedBorder = [위쪽, 오른쪽, 아래쪽, 왼쪽];

방향을 찾은 후 위치를 동시에 구하고 방향과 위치 정보를 borders 배열에 저장하고 html2canvas가 이 상자를 그리지 않도록 이 테두리를 투명하게 설정합니다. 나중에 별도로 처리하겠습니다. (참고: 이 페이지의 점선 테두리는 모두 투명해집니다. 그리기가 완료된 후 투명한 테두리를 원래 색상으로 다시 변경하는 것은 고려하지 않습니다.)

 Pages.forEach((page, idx) => { const borders = this.findDashedBorders(page); const parentRect = page.getBoundingClientRect(); html2canvas(page, {scale: 2,logging: false, useCORS: true}). then((캔버스) => { this.drawDashedBorder(캔버스, 테두리, parentRect); ... })})

페이지는 캔버스에 그려야 하는 모든 요소입니다. 각 페이지의 점선 테두리를 얻으면 이 페이지의 위치도 얻으므로 점선 테두리를 그릴 때 페이지를 기준으로 테두리의 위치를 ​​얻을 수 있습니다. 이 페이지. html2canvas가 캔버스를 그린 후 drawDashedBorder() 메소드를 통해 점선 테두리를 추가로 그립니다.

 drawDashedBorder = (canvas, borders, parentRect) => { var ctx = canvas.getContext(2d); ctx.setLineDash([6, 3]); ctx.lineWidth = 1; globalAlpha = 1; borders.forEach(border => { var 왼쪽 = (border.direct.left + 0.5 - parentRect.left)*2; var right = (border.direct.right - 0.5 - parentRect.left)*2; var top = (border.direct.top + 0.5 - parentRect.top)*2; = (border.direct.bottom - 0.5 - parentRect.top)*2; 스위치 (border.border) { 케이스 '상단': ctx.beginPath(); ctx.lineTo(오른쪽, 위쪽); break; case '오른쪽': ctx.beginPath(); ); ctx.lineTo(오른쪽, 하단); break; 케이스 '하단': ctx.beginPath(); ctx.moveTo(왼쪽, 아래쪽); ctx.Stroke(); case '왼쪽': ctx.moveTo(왼쪽, 위쪽); 왼쪽, 아래쪽); ctx.Stroke(); 기본값: break;

이는 테두리 내 점선 테두리의 방향 및 위치 정보를 기반으로 캔버스에서 2D 컨텍스트를 얻고 setLineDash 메소드를 사용하여 점선을 그리는 것을 의미합니다. 이전에는 캔버스 크기의 2배를 사용했기 때문에 위치는 *2입니다.

4. 이 방법은 현재 Chrome 테스트에만 사용할 수 있으며 Firefox의 getCompulatedStyle에서 반환된 정보가 Chrome의 정보와 다르기 때문에 Firefox에서는 유효하지 않습니다.

저는 캔버스에 대한 깊은 이해도 없고 홍보도 할 수 없기 때문에 html2canvas의 정식 구현을 기대할 수밖에 없습니다.

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.