在线咨询
服务热线
服务热线:021-61554458
TOP
网站建设 崇左网站建设> 建站学堂 崇左网站建设哪家好?html2canvas绘制前,不考虑border

崇左网站建设哪家好?html2canvas绘制前,不考虑border

来源:网站建设 | 时间:2020-11-06 | 浏览:

html2canvas绘制前,不考虑border

html2canvas是一个将html元素转化成canvas的库,绘制的canvas绝大多数款式和CSS一致。例如截至1.0.0-alpha.12,虚线边框仍然绘制为实线,border-collapse仍然不太好。

这儿依据github issues里的一个思路,仿真模拟完成了dashed边框实际效果。

可用状况:独立边框较多,即并不是详细边框,另外不考虑到border-radius

1、最先,在html2canvas绘制前,找到必须绘制canvas的元素中的全部虚线边框的 方位和部位

findDashedBorders = (page) => {
        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, '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';
                });
            }
        });
        return borders;
    }

page是必须绘制canvas的元素,我这里有dashed边框的全是td元素,因此 搜索全部td元素,应用getComputedStyle()方式搜索它的borderStyle,假如它有dashed边框,那麼这一特性的值的方式为"dashed dashed none none",因此 依据findAll()这一自定方式寻找全部的dashed的方位(例如"dashed dashed none none"将回到[0, 1]),在其中dashedBorder数字能量数组以下:

const dashedBorder = ["Top", "Right", "Bottom", "Left"];

寻找方向后另外获得它的部位,将方位和位置信息存进borders数字能量数组,另外将这一条边框设为全透明,使html2canvas不绘制这一条框,大家以后会独立解决。 (留意:这一网页页面的虚线边框都是全透明掉,这儿并沒有考虑到绘制进行后将全透明边框变回原先的色调)

2、应用html2canvas获得绘制后的canvas

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, borders, parentRect);
       ......
    })
})

pages是必须绘制canvas的全部元素,我们在获得每一个page的虚线边框时,另外获得这一page的部位,便于大家绘制dashed边框时获得边框相对性于这一网页页面的部位。待html2canvas绘制canvas后,大家根据drawDashedBorder()方式进一步绘制出dashed边框,下边完成这一方式。

3、drawDashedBorder()在获得canvas后进一步绘制虚线。

drawDashedBorder = (canvas, borders, parentRect) => {
        var ctx = canvas.getContext("2d");
        ctx.setLineDash([6, 3]);
        ctx.strokeStyle = '#3089c7';
        ctx.lineWidth = 1;
        ctx.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;
            var bottom = (border.rect.bottom - 0.5 - parentRect.top)*2;

            switch (border.border) {
                case 'Top':
                    ctx.beginPath();
                    ctx.moveTo(left, top);
                    ctx.lineTo(right, top);
                    ctx.stroke();
                    break;
                case 'Right':
                    ctx.beginPath();
                    ctx.moveTo(right, top);
                    ctx.lineTo(right, bottom);
                    ctx.stroke();
                    break;
                case 'Bottom':
                    ctx.beginPath();
                    ctx.moveTo(left, bottom);
                    ctx.lineTo(right, bottom);
                    ctx.stroke();
                    break;
                case 'Left':
                    ctx.beginPath();
                    ctx.moveTo(left, top);
                    ctx.lineTo(left, bottom);
                    ctx.stroke();
                    break;
                default:
                    break;
            }
        })
    }

含意便是依据borders里dashed边框的方位和位置信息,在canvas里获得2d前后文后应用setLineDash方式把虚线绘制出去。部位都*2是由于大家以前canvas应用了2倍尺寸。

4、这一方式现阶段只在chrome测试可用,firefox失效,由于firefox下getComputedStyle回到的信息内容和chrome不一样。

因为对canvas了解不深没法pr,只有希望html2canvas的官方网完成了。

之上便是文中的所有内容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多的适用脚本之家。