e-virt-table/dist/lib/Paint.d.ts

A powerful data table based on canvas. You can use it as data grid、Microsoft Excel or Google sheets. It supports virtual scroll、cell edit etc.

import { Align, LineClampType, VerticalAlign } from './types';
export type LineOptions = {
    lineCap?: CanvasLineCap;
    lineDash?: number[];
    lineDashOffset?: number;
    lineJoin?: CanvasLineJoin;
    borderWidth?: number;
    borderColor?: string | CanvasGradient | CanvasPattern;
    fillColor?: string | CanvasGradient | CanvasPattern;
};
export type ShodowOptions = {
    side: 'left' | 'right' | 'top' | 'bottom';
    shadowWidth: number;
    colorStart: string;
    colorEnd: string;
    fillColor?: string | CanvasGradient | CanvasPattern;
};
export type RectOptions = {
    borderWidth?: number;
    borderColor?: string;
    fillColor?: string;
    radius?: number | [number, number, number, number];
};
export type DrawTextOptions = {
    font?: string;
    color?: string;
    align?: Align;
    padding?: number;
    verticalAlign?: VerticalAlign;
    autoRowHeight?: boolean;
    lineHeight?: number;
    maxLineClamp?: LineClampType;
    offsetLeft?: number;
    offsetRight?: number;
    textCallback?: (textInfo: TextInfo) => void;
    cacheTextKey?: string;
};
export type TextInfo = {
    x: number;
    y: number;
    width: number;
    height: number;
    left: number;
    right: number;
    top: number;
    bottom: number;
};
export declare class Paint {
    private ctx;
    private textCacheMap;
    constructor(target: HTMLCanvasElement);
    clearTextCache(): void;
    scale(dpr: number): void;
    save(): void;
    restore(): void;
    translate(x: number, y: number): void;
    setCursor(cursor?: string): void;
    clear(x?: number, y?: number, width?: number, height?: number): void;
    /**
     * 在 Canvas 上绘制单侧阴影
     * @param {number} x - 矩形的 x 坐标
     * @param {number} y - 矩形的 y 坐标
     * @param {number} width - 矩形的宽度
     * @param {number} height - 矩形的高度
     * @param {string} side - 阴影的位置（'left', 'right', 'top', 'bottom'）
     * @param {number} shadowWidth - 阴影的宽度
     * @param {string} color - 阴影的颜色
     */
    drawShadow(x: number, y: number, width: number, height: number, options: ShodowOptions): void;
    drawLine(points: number[], options: LineOptions): void;
    drawImage(img: CanvasImageSource, x: number, y: number, width: number, height: number): void;
    drawRect(x: number, y: number, width: number, height: number, { borderWidth, borderColor, fillColor, radius }?: RectOptions): void;
    /**
     * 画文本
     * @param text
     * @param x
     * @param y
     * @param width
     * @param height
     * @param options
     * @returns 是否溢出
     */
    drawText(text: string | undefined, x: number, y: number, width: number, height: number, options?: DrawTextOptions): boolean;
    /**
     * 将文本按宽度换行
     * @param text
     * @param maxWidth
     * @returns
     */
    private wrapText;
    /**
     * 计算文本自适应高度
     * @param text
     * @param width
     * @param options
     * @returns 计算出的高度
     */
    calculateTextHeight(text: string | undefined, width: number, options?: DrawTextOptions): number;
    handleEllipsis(text: string, width: number, padding?: number, font?: string): {
        _text: string;
        ellipsis: boolean;
    };
}
export default Paint;