html2canvas で破線境界線を実装する例

html2canvas は、HTML 要素からキャンバスを生成するライブラリです。描画されるキャンバスのスタイルのほとんどは CSS と一致しています。たとえば、1.0.0-alpha.12 では、破線の境界線は依然として実線として描画され、border-collapse には依然として問題があります。

ここでは、github の問題のアイデアに基づいて、破線の境界線効果をシミュレートして実装します。

適用可能な状況: 複数の境界線があり、完全な境界線ではなく、border-radius が考慮されない場合

1. まず、html2canvasで描画する前に、キャンバスを描画する必要がある要素内のすべての点線の境界線の方向と位置を調べます。

findDashedBorders = (ページ) => {
        定数 tds = page.querySelectorAll("td");
        定数境界線 = [];
        tds.forEach(td => {
            定数 computedStyle = window.getComputedStyle(td);
            const borderStyle = computedStyle.borderStyle ? computedStyle.borderStyle.split(' '): [];
            const dashedIndex = findAll(borderStyle, 'dashed');
            if (破線インデックス.長さ) {
                定数rect = td.getBoundingClientRect();
                破線インデックス.map(インデックス => {
                    定数境界 = {
                        直角、
                        境界線: dashedBorder[インデックス]
                    }
                    境界線をプッシュします。
                    td.style[`border${dashedBorder[index]}Color`] = '透明';
                });
            }
        });
        境界線を返します。
    }

ページは、キャンバスを描画する必要がある要素です。破線の境界線を持つすべての要素は td 要素であるため、すべての td 要素を検索し、getComputedStyle() メソッドを使用してその borderStyle を検索します。破線の境界線がある場合、この属性の値は「dashed dashed none none」の形式であるため、カスタム findAll() メソッドに従ってすべての破線の方向を検索します (たとえば、「dashed dashed none none」は [0, 1] を返します)。ここで、dashedBorder 配列は次のようになります。

const dashedBorder = ["上", "右", "下", "左"];

方向を見つけたら、同時にその位置を取得し、方向と位置情報を borders 配列に格納し、html2canvas がこのフレームを描画しないようにこの境界線を透明に設定します。これについては後で別途扱います。 (注意: このページの点線の境界線は透明になります。描画が完了した後に透明な境界線を元の色に戻すことは考慮されていません。)

2. html2canvasを使用して描画されたキャンバスを取得します

pages.forEach((ページ, idx) => {
    const 境界線 = this.findDashedBorders(ページ);
    定数 parentRect = page.getBoundingClientRect();
    html2canvas(ページ、{スケール: 2、ログ記録: false、使用CORS: true})。次に((キャンバス) => {
       this.drawDashedBorder(キャンバス、境界線、親Rect);
       ......
    })
})

ページは、キャンバス上に描画する必要があるすべての要素です。各ページの破線境界線を取得すると、ページの位置も取得されるため、破線境界線を描画するときに、ページに対する境界線の位置を取得できます。 html2canvas がキャンバスを描画した後、drawDashedBorder() メソッドを使用して破線の境界線をさらに描画します。このメソッドを実装してみましょう。

3.drawDashedBorder() はキャンバスを取得した後、さらに点線を描画します。

破線境界線を描画 = (キャンバス、境界線、親矩形) => {
        var ctx = canvas.getContext("2d");
        ctx.setLineDash([6, 3]);
        ctx.strokeStyle = '#3089c7';
        ctx.lineWidth = 1;
        ctx.globalAlpha = 1;

        境界線.forEach(境界線 => {
            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 下 = (border.rect.bottom - 0.5 - parentRect.top)*2;

            スイッチ (border.border) {
                ケース 'Top':
                    ctx.beginPath();
                    ctx.moveTo(左、上);
                    ctx.lineTo(右、上);
                    ctx.stroke();
                    壊す;
                ケース '右':
                    ctx.beginPath();
                    ctx.moveTo(右、上);
                    ctx.lineTo(右、下);
                    ctx.stroke();
                    壊す;
                ケース「下」:
                    ctx.beginPath();
                    ctx.moveTo(左、下);
                    ctx.lineTo(右、下);
                    ctx.stroke();
                    壊す;
                ケース '左':
                    ctx.beginPath();
                    ctx.moveTo(左、上);
                    ctx.lineTo(左、下);
                    ctx.stroke();
                    壊す;
                デフォルト：
                    壊す;
            }
        })
    }

これは、境界線内の破線境界線の方向と位置情報に応じて、キャンバス内の 2D コンテキストを取得した後、setLineDash メソッドを使用して破線を描画することを意味します。前回はキャンバスのサイズを2倍にしたので、位置はすべて*2になっています。

4. このメソッドは現在 Chrome でのテストにのみ使用可能であり、Firefox では無効です。これは、Firefox で getComputedStyle によって返される情報が Chrome のものとは異なるためです。

私はキャンバスについて深く理解しておらず、PRもできないため、html2canvas の公式実装を期待するしかありません。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: MySQL の簡単な分析 - MVCC

>>: Velocity.js はページスクロール切り替え効果を実装します