vislite/src/SVG.ts

灵活、快速、简单的数据可视化交互式跨端前端库

import type SVGType from '../types/SVG'

import OralSVG from './common/svg/index'

class SVG extends OralSVG implements SVGType {
    private __el: HTMLElement
    constructor(el: HTMLElement | null) {
        if (!el) {
            throw new Error("VISLite SVG:The mount point requires an HTMLElement type but encountered null.")
        }

        const width = el.clientWidth, height = el.clientHeight

        let ViewSVG: SVGElement

        const _el = el as any

        // 如果已经初始化过了
        if (_el._vislite_svg_) {
            ViewSVG = _el._vislite_svg_[0]
        } else {

            ViewSVG = document.createElementNS("http://www.w3.org/2000/svg", 'svg')
            el.appendChild(ViewSVG)

            ViewSVG.setAttribute("width", width + "")
            ViewSVG.setAttribute("height", height + "")

            ViewSVG.setAttribute("viewBox", "0 0 " + width + " " + height)

            _el._vislite_svg_ = [ViewSVG]

            el.setAttribute('vislite', 'SVG')
        }

        super(ViewSVG)

        this.__el = el
    }

    toDataURL(): Promise<string> {
        return new Promise(resolve => {
            const width = this.__el.clientWidth, height = this.__el.clientHeight

            const img = document.createElement('img');

            img.setAttribute('width', width + "");
            img.setAttribute('height', height + "");
            const base64_svg = "data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='" + width + "' height='" + height + "'>" + this.__svg.innerHTML.replace(/"/g, "'") + "</svg>";
            img.setAttribute('src', base64_svg);

            setTimeout(function () {

                // 准备画布
                const canvas = document.createElement('canvas');
                canvas.setAttribute('width', width + "");
                canvas.setAttribute('height', height + "");

                const painter = canvas.getContext('2d');

                // 绘制截图
                if (painter) painter.drawImage(img, 0, 0, width, height);

                resolve(canvas.toDataURL());
            }, 100);
        })
    }
}

export default SVG