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

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

import Element from './element';
import { BackgroundAttachment, BackgroundClip, BackgroundRepeat, BORDER_STYLE, GradientType, TEXT_DECORATION_LINE, TEXT_DECORATION_STYLE } from './constants';
import ElementImage from './element-image';
interface IRound<T = any> {
    top: T;
    right: T;
    bottom: T;
    left: T;
    [x: string]: T;
}
export interface IBorder {
    width: number;
    style: BORDER_STYLE;
    color: string;
    [x: string]: any;
}
export interface IBackground<T = string | number> {
    color: string;
    image: string;
    gradient?: IGradient;
    position: {
        left: T;
        leftOffset: T;
        top: T;
        topOffset: T;
    };
    size: {
        width: T;
        height: T;
    };
    repeat: BackgroundRepeat;
    attachment: BackgroundAttachment;
    origin: BackgroundClip;
    clip: BackgroundClip;
}
export interface IGradientColor {
    color: string;
    stop: string;
}
export interface IGradient {
    type: GradientType;
    angle: number;
    list: IGradientColor[];
}
export interface ITextDecoration {
    line: TEXT_DECORATION_LINE;
    style: TEXT_DECORATION_STYLE;
    color: string;
    thickness: number;
}
export interface ISize<T = any> {
    width: T;
    height: T;
}
export interface IRadius<T = string | number> {
    topLeft: ISize<T>;
    topRight: ISize<T>;
    bottomRight: ISize<T>;
    bottomLeft: ISize<T>;
    [x: string]: any;
}
export interface ITextShadow {
    offsetX: number;
    offsetY: number;
    blur: number;
    color: string;
}
export interface IBoxShadow {
    inset: boolean;
    offsetX: number;
    offsetY: number;
    blur: number;
    spread: number;
    color: string;
}
/**
 * 样式处理
 */
export default class Style {
    private style;
    private styleIndex;
    private index;
    private element;
    private cachedValue;
    private static cachedFunction;
    [x: string]: any;
    imageMap: {
        [x: string]: ElementImage;
    };
    constructor(element: Element);
    updateCache: () => void;
    getImage: (url: string) => ElementImage;
    /**
     * 获取包含自身的继承样式
     * @param style
     * @param force 强制回溯到任意父级
     */
    getInheritStyle(style: string, force?: boolean): string;
    /**
     * 获取指定的继承元素和样式
     * @param style
     * @param force
     */
    getInheritNode(style: string, force?: boolean): {
        element: Element;
        value: string;
    };
    getOriginRoundStyle(style: string): IRound<string>;
    /**
     * 获取 简写 和 四个方向的样式属性值
     * 处理书写优先级
     * @param style
     */
    private getRoundStyle;
    /**
     * 获取样式
     * @param key
     */
    get(key: string): string;
    /**
     * 获取属性的数字类型
     * @param key
     */
    getNumber(key: string): number;
    /**
     * 更新样式
     * @param key
     * @param value
     */
    set(key: string, value: any): this;
    /**
     * 单位值转像素
     * px 直接返回
     * % 按照父元素宽度计算
     * em 按照父元素font-size计算
     * rem 按照根元素font-size计算
     * @param unit 100px|100%|1rem|1em
     * @param base 单位换算基数
     */
    transformUnitToPx(unit: string, base?: number): number;
    get canvasFont(): string;
    get fontSize(): number;
    /**
     * 文字修饰
     */
    get textDecoration(): ITextDecoration[];
    /**
     * 背景继承只局限于inline元素
     */
    get background(): IBackground<string>[];
    get width(): string;
    get height(): string;
    get padding(): IRound<number>;
    get margin(): IRound<number>;
    get border(): IRound<IBorder>;
    get radius(): IRadius<number>;
    get textShadow(): ITextShadow[];
    get color(): string;
    get verticalAlign(): string;
    get textAlign(): string;
    get lineHeight(): number;
    get opacity(): number;
    get zIndex(): number;
    /**
     * 属性继承自任意父级
     */
    get isNoWrap(): boolean;
    get clear(): string;
    get overflow(): string;
    get isOverflow(): boolean;
    get isHidden(): boolean;
    get isAbsolute(): boolean;
    get isRelative(): boolean;
    get isFloat(): boolean;
}
export {};