xverse-components-utils
Version:
xverse components utils
127 lines (126 loc) • 3.44 kB
TypeScript
export type IFontWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
export declare class CanvasUtil {
static createCanvas(opt?: {
width: number;
height: number;
}): HTMLCanvasElement | undefined;
static getImageUrlFromCanvas(canvas: HTMLCanvasElement): Promise<string>;
static getTextLength(canvas: HTMLCanvasElement, text: string, fontSize: number): number;
static scaleUnit: (pixel: number) => number;
/**
* 绘制圆图像
* @param context
* @param image
* @param dx
* @param dy
* @param dw
* @param dh
*/
static drawCircleImage(context: CanvasRenderingContext2D, image: CanvasImageSource, dx: number, dy: number, dw: number, dh: number): void;
/**
* 绘制背景
* @param context
* @param image
* @param dx
* @param dy
* @param dw
* @param dh
*/
static drawBackground(context: CanvasRenderingContext2D, image: HTMLImageElement, dx: number, dy: number, dw: number, dh: number, radius?: number): void;
/**
* 绘制图像
* @param context
* @param image
* @param dx
* @param dy
* @param dw
* @param dh
*/
static drawImage(context: CanvasRenderingContext2D, image: CanvasImageSource, dx: number, dy: number, dw: number, dh: number): void;
/**
* 绘制带有边框的矩形
* @param context
* @param x
* @param y
* @param width
* @param height
* @param radius
* @param fillStyle
* @param stroke
*/
static drawRoundedRect: (options: {
context: CanvasRenderingContext2D;
x: number;
y: number;
width: number;
height: number;
radius?: number | {
tl: number;
tr: number;
br: number;
bl: number;
};
fillStyle?: string;
stroke?: boolean;
}) => void;
/**
* 绘制矩形
* @param context
* @param x
* @param y
* @param width
* @param height
* @param fillStyle
*/
static drawRect: (context: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, fillStyle: string) => void;
/**
* 获取文本最多行数
* @param context
* @param text
* @param fontSize
* @param maxWidth
* @param lineHeight
* @returns
*/
static getTextsHeight(context: CanvasRenderingContext2D, text: string, fontSize: number, maxWidth: number, lineHeight: number, fontWeight?: IFontWeight): number;
/**
* 加载img
* @param url
* @returns
*/
static generateCanvasImageSource: (url: string) => Promise<HTMLImageElement>;
/**
* 绘制文字
* @param obj
* @returns
*/
static drawFont(obj: {
canvas: HTMLCanvasElement;
size: number;
fontWeight?: IFontWeight;
color?: string;
family?: string;
textBaseline?: CanvasTextBaseline;
maxWidth?: number;
maxHeight?: number;
lineHeight?: number;
rotate?: number;
value: string;
x: number;
y: number;
noWrap?: boolean;
maxLines?: number;
}): void;
/**
* 绘制多行文字
* @param options
* @returns
*/
private static wrapText;
/**
* 绘制单行文字
* @param options
* @returns
*/
private static noWrapText;
}