draw-html-to-canvas/types/element.d.ts

根据html+css规范绘制 网页到canvas

import { BlockType, NodeType, TContinueDraw } from './constants';
import Style, { IBackground } from './style';
import Line from './line';
import LineManger from './line-manger';
export default class Element {
    nodeValue: string;
    contentWidth: number;
    contentHeight: number;
    left: number;
    top: number;
    nodeName: string;
    nodeType: NodeType;
    children: Element[];
    shadows: Element[];
    shadow: Element | null;
    style: Style;
    attrs: any;
    endNode: Element | null;
    parentNode: Element | null;
    prevNode: Element | null;
    nextNode: Element | null;
    root: Element;
    textMetric: {
        lineHeight: number;
        width: number;
    };
    lines: LineManger;
    line: Line | null;
    lineElement: Element | null;
    debug: boolean;
    updateCache(): void;
    clone(): Element;
    /**
     * 获取距离最近的block\inline-block元素
     */
    getNearBlock(): Element;
    /**
     * 获取距离最近的relative元素
     */
    getNearRelativeBlock(): Element;
    /**
     * 获取最近有宽度的block元素
     */
    getNearHasWidthBlock(): Element;
    isInlineORInlineBlock(item: Element): boolean;
    /**
     * 显示文字 处理换行问题
     */
    get displayText(): string;
    /**
     * 元素类型
     * float|absolute元素算作inline-block
     * flex|block|inline|inline-block
     */
    get blockType(): BlockType;
    /**
     * block/inline-block = margin + border + padding + content
     * inline = border + padding + content
     * textNode = textWidth
     */
    get offsetWidth(): number;
    /**
     * block/inline-block = margin + border + padding + content
     * inline = border + padding + content
     * textNode = textWidth
     */
    get offsetHeight(): number;
    /**
     * 相对于页面的left
     */
    get offsetLeft(): number;
    /**
     * 相对于页面的top
     */
    get offsetTop(): number;
    get innerHTML(): string;
    set innerHTML(value: string);
    get firstChild(): Element;
    get lastChild(): Element;
    getTextMetrics(context: CanvasRenderingContext2D, text: string): {
        width: number;
        lineHeight: number;
    };
    /**
     * 裸文字宽度
     * 固定宽高
     * @param context
     */
    layoutFixedSize(context: CanvasRenderingContext2D): void;
    /**
     * 从父到子
     * @param context
     */
    layoutInheritWidth(context: CanvasRenderingContext2D): void;
    /**
     * 父到子
     * @param context
     */
    layoutPercentWidth(context: CanvasRenderingContext2D): void;
    /**
     * inline
     *   小于 当前宽度 直接使用行元素
     *   大于 当前宽度 根据宽度换行
     *   float前一个行元素 最大允许换一行
     *   如果换一行能放下 则float使用 当前行起始位置 或者 结束位置
     *   如果换一行放不下 则float使用 下一行起始位置 或者 结束位置
     *
     *   多个float元素 默认放一行
     *   如果 剩余宽度可以放下超出一行的文字 直接使用剩余宽度
     *   否则 从尾部float元素中 依次换行 直到文字可以放下
     *
     * inline-block 没有宽度情况下
     *   如果文字能放下 则在行内 行剩余宽度可以给后面inline元素使用
     *   如果文字放不下 则从下一行开始 自动换行 剩余宽度独占 其他元素不能使用
     *
     * block元素新起一行 从新计算
     */
    layoutLine(context: CanvasRenderingContext2D): void;
    layoutLinePosition(): void;
    layout(context: CanvasRenderingContext2D): void;
    /**
     * 绘制元素背景图 不包含margin区域
     * @param context
     * @param background
     * @param clip 裁剪内圆选区
     */
    drawBackground(context: CanvasRenderingContext2D, background: IBackground<string>, clip: any): void;
    /**
     * 绘制边框
     * @param ctx
     * @param continueDraw
     */
    drawBorder(ctx: CanvasRenderingContext2D, continueDraw?: TContinueDraw): void;
    /**
     * 画文字
     * @param context
     */
    drawText(context: CanvasRenderingContext2D): void;
    drawTextShadows(context: CanvasRenderingContext2D): void;
    /**
     * 画文字附加线
     */
    drawTextDecoration(context: CanvasRenderingContext2D): void;
    /**
     * 绘图主入口
     * @param context
     */
    draw(context: CanvasRenderingContext2D): void;
}