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

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

/**
 * 随机颜色
 * @param start
 * @param end
 */
import { BackgroundRepeat, TContinueDraw, TQuadraticCurvePath } from './constants';
import { IGradient } from './style';
export declare const randomColor: (start?: number, end?: number, a?: number) => string;
export declare enum DrawRepeatType {
    image = "image",
    gradient = "gradient"
}
/**
 * 画重复图像 带着偏移量 自动填充整个容器
 * @param ctx
 * @param drawType DrawRepeatType
 * @param image
 * @param imageWidth 图像宽度
 * @param imageHeight 图像高度
 * @param startLeft 绘制起点
 * @param startTop 绘制起点
 * @param boxLeft 容器起点
 * @param boxTop 容器起点
 * @param boxWidth 容器尺寸
 * @param boxHeight 容器尺寸
 * @param repeat 重复类型
 * @param continueDraw 选区内继续绘图
 */
export declare const drawRepeat: (ctx: CanvasRenderingContext2D, drawType: DrawRepeatType, image: HTMLImageElement | CanvasGradient, imageWidth: number, imageHeight: number, startLeft: number, startTop: number, boxLeft: number, boxTop: number, boxWidth: number, boxHeight: number, repeat: BackgroundRepeat, continueDraw?: TContinueDraw) => void;
/**
 * 截取 起点 - t 点
 * @param P0 起点
 * @param P1 控制点
 * @param P2 结束点
 * @param t 截取百分比
 * @returns {[number,number,number]} P0, M, B
 */
export declare const cutCurveStart: (P0: number, P1: number, P2: number, t: number) => number[];
/**
 * 截取贝塞尔曲线 从 【起点 - t时刻】 路径
 * 返回新的曲线的 [起点, 控制点， 终点] 的坐标
 * @param path [起点, 控制点， 终点] 坐标
 * @param t 时刻百分比
 */
export declare const cutCurveStartPath: (path: number[][], t: number) => TQuadraticCurvePath;
/**
 * 截取从 t - P2 点
 * @param P0
 * @param P1
 * @param P2
 * @param t
 * @returns {[number,number,number]} B, N, P2
 */
export declare const cutCurveEnd: (P0: number, P1: number, P2: number, t: number) => number[];
/**
 * 截取贝塞尔曲线【t时刻 到 终点】的路径
 * 返回新的曲线的 [起点, 控制点， 终点] 的坐标
 * @param path [起点, 控制点， 终点] 坐标
 * @param t 时刻百分比
 */
export declare const cutCurveEndPath: (path: number[][], t: number) => TQuadraticCurvePath;
/**
 * 截取 t1 - t2
 * @param P0
 * @param P1
 * @param P2
 * @param t1 起始百分比
 * @param t2 结束百分比
 */
export declare const cutCurveMiddle: (P0: number, P1: number, P2: number, t1: number, t2: number) => number[];
/**
 * 截取贝塞尔曲线 【t1时刻 到 t2时刻】 路径
 * 返回新的曲线的 [起点, 控制点， 终点] 的坐标
 * @param path [起点, 控制点， 终点] 坐标
 * @param t1 时刻百分比
 * @param t2 时刻百分比
 */
export declare const cutCurveMiddlePath: (path: number[][], t1: number, t2: number) => TQuadraticCurvePath;
export declare const values: (obj: any) => any[];
/**
 * 创建线性渐变
 * @param ctx
 * @param width
 * @param height
 * @param gradient
 */
export declare const createLinearGradient: (ctx: CanvasRenderingContext2D, width: number, height: number, gradient: IGradient) => CanvasGradient;
/**
 * 三次贝塞尔模拟椭圆 环境支持优先使用环境的
 * 效率比画圆形缩放要低一些 但是在小程序中没有问题
 * @param {CanvasRenderingContext2D} ctx
 * @param {number} x
 * @param {number} y
 * @param {number} radiusX
 * @param {number} radiusY
 * @param {number} rotation
 * @param {number} startAngle
 * @param {number} endAngle
 * @param {boolean?} counterclockwise
 */
export declare const ellipse: (ctx: CanvasRenderingContext2D, x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean) => void;
/**
 * 圆形缩放成椭圆 环境支持优先使用环境的
 * 小程序环境绘制异常
 * @param {CanvasRenderingContext2D} ctx
 * @param {number} x
 * @param {number} y
 * @param {number} radiusX
 * @param {number} radiusY
 * @param {number} rotation
 * @param {number} startAngle
 * @param {number} endAngle
 * @param {boolean?} counterclockwise
 */
export declare const ellipse2: (ctx: CanvasRenderingContext2D, x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean) => void;
export declare const makeMap: <T = any>(obj: any) => { [K in keyof T]: K; };