@vnpn/lucky-canvas-core 1.7.26

package/types/index.d.ts

@@ -0,0 +1,751 @@
+declare type FontItemType = {
+    text: string;
+    top?: string | number;
+    left?: string | number;
+    fontColor?: string;
+    fontSize?: string;
+    fontStyle?: string;
+    fontWeight?: string;
+    lineHeight?: string;
+};
+declare type FontExtendType = {
+    wordWrap?: boolean;
+    lengthLimit?: string | number;
+    lineClamp?: number;
+};
+declare type ImgType = HTMLImageElement | HTMLCanvasElement;
+declare type ImgItemType = {
+    src: string;
+    top?: string | number;
+    left?: string | number;
+    width?: string;
+    height?: string;
+    formatter?: (img: ImgType) => ImgType;
+    $resolve?: Function;
+    $reject?: Function;
+};
+declare type BorderRadiusType = string | number;
+declare type BackgroundType = string;
+declare type ShadowType = string;
+declare type ConfigType = {
+    nodeType?: number;
+    flag: 'WEB' | 'MP-WX' | 'UNI-H5' | 'UNI-MP' | 'TARO-H5' | 'TARO-MP';
+    el?: string;
+    divElement?: HTMLDivElement;
+    canvasElement?: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    dpr: number;
+    handleCssUnit?: (num: number, unit: string) => number;
+    rAF?: Function;
+    setTimeout: Function;
+    setInterval: Function;
+    clearTimeout: Function;
+    clearInterval: Function;
+    beforeCreate?: Function;
+    beforeResize?: Function;
+    afterResize?: Function;
+    beforeInit?: Function;
+    afterInit?: Function;
+    beforeDraw?: Function;
+    afterDraw?: Function;
+    afterStart?: Function;
+};
+declare type UserConfigType = Partial<ConfigType>;
+declare type Tuple<T, Len extends number, Res extends T[] = []> = Res['length'] extends Len ? Res : Tuple<T, Len, [...Res, T]>;
+
+interface WatchOptType {
+    handler?: () => Function;
+    immediate?: boolean;
+    deep?: boolean;
+}
+
+declare class Lucky {
+    static version: string;
+    protected readonly version: string;
+    protected readonly config: ConfigType;
+    protected readonly ctx: CanvasRenderingContext2D;
+    protected htmlFontSize: number;
+    protected rAF: Function;
+    protected boxWidth: number;
+    protected boxHeight: number;
+    protected data: {
+        width: string | number;
+        height: string | number;
+    };
+    /**
+     * 公共构造器
+     * @param config
+     */
+    constructor(config: string | HTMLDivElement | UserConfigType, data: {
+        width: string | number;
+        height: string | number;
+    });
+    /**
+     * 初始化组件大小/单位
+     */
+    protected resize(): void;
+    /**
+     * 初始化方法
+     */
+    protected initLucky(): void;
+    /**
+     * 鼠标点击事件
+     * @param e 事件参数
+     */
+    protected handleClick(e: MouseEvent): void;
+    /**
+     * 根标签的字体大小
+     */
+    protected setHTMLFontSize(): void;
+    clearCanvas(): void;
+    /**
+     * 设备像素比
+     * window 环境下自动获取, 其余环境手动传入
+     */
+    protected setDpr(): void;
+    /**
+     * 重置盒子和canvas的宽高
+     */
+    private resetWidthAndHeight;
+    /**
+     * 根据 dpr 缩放 canvas 并处理位移
+     */
+    protected zoomCanvas(): void;
+    /**
+     * 从 window 对象上获取一些方法
+     */
+    private initWindowFunction;
+    isWeb(): boolean;
+    /**
+     * 异步加载图片并返回图片的几何信息
+     * @param src 图片路径
+     * @param info 图片信息
+     */
+    protected loadImg(src: string, info: ImgItemType, resolveName?: string): Promise<ImgType>;
+    /**
+     * 公共绘制图片的方法
+     * @param imgObj 图片对象
+     * @param rectInfo: [x轴位置, y轴位置, 渲染宽度, 渲染高度]
+     */
+    protected drawImage(ctx: CanvasRenderingContext2D, imgObj: ImgType, ...rectInfo: [...Tuple<number, 4>, ...Partial<Tuple<number, 4>>]): void;
+    /**
+     * 计算图片的渲染宽高
+     * @param imgObj 图片标签元素
+     * @param imgInfo 图片信息
+     * @param maxWidth 最大宽度
+     * @param maxHeight 最大高度
+     * @return [渲染宽度, 渲染高度]
+     */
+    protected computedWidthAndHeight(imgObj: ImgType, imgInfo: ImgItemType, maxWidth: number, maxHeight: number): [number, number];
+    /**
+     * 转换单位
+     * @param { string } value 将要转换的值
+     * @param { number } denominator 分子
+     * @return { number } 返回新的字符串
+     */
+    protected changeUnits(value: string, denominator?: number): number;
+    /**
+     * 获取长度
+     * @param length 将要转换的长度
+     * @param maxLength 最大长度
+     * @return 返回长度
+     */
+    protected getLength(length: string | number | undefined, maxLength?: number): number;
+    /**
+     * 获取相对(居中)X坐标
+     * @param width
+     * @param col
+     */
+    protected getOffsetX(width: number, maxWidth?: number): number;
+    protected getOffscreenCanvas(width: number, height: number): {
+        _offscreenCanvas: HTMLCanvasElement;
+        _ctx: CanvasRenderingContext2D;
+    } | void;
+    /**
+     * 添加一个新的响应式数据 (临时)
+     * @param data 数据
+     * @param key 属性
+     * @param value 新值
+     */
+    $set(data: object, key: string | number, value: any): void;
+    /**
+     * 添加一个属性计算 (临时)
+     * @param data 源数据
+     * @param key 属性名
+     * @param callback 回调函数
+     */
+    protected $computed(data: object, key: string, callback: Function): void;
+    /**
+     * 添加一个观察者 create user watcher
+     * @param expr 表达式
+     * @param handler 回调函数
+     * @param watchOpt 配置参数
+     * @return 卸载当前观察者的函数 (暂未返回)
+     */
+    protected $watch(expr: string | Function, handler: Function | WatchOptType, watchOpt?: WatchOptType): Function;
+}
+
+declare type PrizeFontType$2 = FontItemType & FontExtendType;
+declare type ButtonFontType$1 = FontItemType & {};
+declare type BlockImgType$2 = ImgItemType & {
+    rotate?: boolean;
+};
+declare type PrizeImgType$2 = ImgItemType & {};
+declare type ButtonImgType$1 = ImgItemType & {};
+declare type BlockType$2 = {
+    padding?: string;
+    background?: BackgroundType;
+    imgs?: Array<BlockImgType$2>;
+};
+declare type PrizeType$2 = {
+    range?: number;
+    background?: BackgroundType;
+    fonts?: Array<PrizeFontType$2>;
+    imgs?: Array<PrizeImgType$2>;
+};
+declare type ButtonType$1 = {
+    radius?: string;
+    pointer?: boolean;
+    background?: BackgroundType;
+    fonts?: Array<ButtonFontType$1>;
+    imgs?: Array<ButtonImgType$1>;
+};
+declare type DefaultConfigType$2 = {
+    gutter?: string | number;
+    offsetDegree?: number;
+    speed?: number;
+    speedFunction?: string;
+    accelerationTime?: number;
+    decelerationTime?: number;
+    stopRange?: number;
+};
+declare type DefaultStyleType$2 = {
+    background?: BackgroundType;
+    fontColor?: PrizeFontType$2['fontColor'];
+    fontSize?: PrizeFontType$2['fontSize'];
+    fontStyle?: PrizeFontType$2['fontStyle'];
+    fontWeight?: PrizeFontType$2['fontWeight'];
+    lineHeight?: PrizeFontType$2['lineHeight'];
+    wordWrap?: PrizeFontType$2['wordWrap'];
+    lengthLimit?: PrizeFontType$2['lengthLimit'];
+    lineClamp?: PrizeFontType$2['lineClamp'];
+};
+declare type StartCallbackType$1 = (e: MouseEvent) => void;
+declare type EndCallbackType$2 = (prize: object) => void;
+interface LuckyWheelConfig {
+    width: string | number;
+    height: string | number;
+    blocks?: Array<BlockType$2>;
+    prizes?: Array<PrizeType$2>;
+    buttons?: Array<ButtonType$1>;
+    defaultConfig?: DefaultConfigType$2;
+    defaultStyle?: DefaultStyleType$2;
+    start?: StartCallbackType$1;
+    end?: EndCallbackType$2;
+}
+
+declare class LuckyWheel extends Lucky {
+    private blocks;
+    private prizes;
+    private buttons;
+    private defaultConfig;
+    private defaultStyle;
+    private _defaultConfig;
+    private _defaultStyle;
+    private startCallback?;
+    private endCallback?;
+    private Radius;
+    private prizeRadius;
+    private prizeDeg;
+    private prizeAng;
+    private rotateDeg;
+    private maxBtnRadius;
+    private startTime;
+    private endTime;
+    private stopDeg;
+    private endDeg;
+    private FPS;
+    /**
+     * 游戏当前的阶段
+     * step = 0 时, 游戏尚未开始
+     * step = 1 时, 此时处于加速阶段
+     * step = 2 时, 此时处于匀速阶段
+     * step = 3 时, 此时处于减速阶段
+     */
+    private step;
+    /**
+     * 中奖索引
+     * prizeFlag = undefined 时, 处于开始抽奖阶段, 正常旋转
+     * prizeFlag >= 0 时, 说明stop方法被调用, 并且传入了中奖索引
+     * prizeFlag === -1 时, 说明stop方法被调用, 并且传入了负值, 本次抽奖无效
+     */
+    private prizeFlag;
+    private ImageCache;
+    /**
+     * 大转盘构造器
+     * @param config 配置项
+     * @param data 抽奖数据
+     */
+    constructor(config: UserConfigType, data: LuckyWheelConfig);
+    protected resize(): void;
+    protected initLucky(): void;
+    /**
+     * 初始化数据
+     * @param data
+     */
+    private initData;
+    /**
+     * 初始化属性计算
+     */
+    private initComputed;
+    /**
+     * 初始化观察者
+     */
+    private initWatch;
+    /**
+     * 初始化 canvas 抽奖
+     */
+    init(): Promise<void>;
+    private initImageCache;
+    /**
+     * canvas点击事件
+     * @param e 事件参数
+     */
+    protected handleClick(e: MouseEvent): void;
+    /**
+     * 根据索引单独加载指定图片并缓存
+     * @param cellName 模块名称
+     * @param cellIndex 模块索引
+     * @param imgName 模块对应的图片缓存
+     * @param imgIndex 图片索引
+     */
+    private loadAndCacheImg;
+    private drawBlock;
+    /**
+     * 开始绘制
+     */
+    protected draw(): void;
+    /**
+     * 刻舟求剑
+     */
+    private carveOnGunwaleOfAMovingBoat;
+    /**
+     * 对外暴露: 开始抽奖方法
+     */
+    play(): void;
+    /**
+     * 对外暴露: 缓慢停止方法
+     * @param index 中奖索引
+     */
+    stop(index?: number): void;
+    /**
+     * 实际开始执行方法
+     * @param num 记录帧动画执行多少次
+     */
+    private run;
+    /**
+     * 换算渲染坐标
+     * @param x
+     * @param y
+     */
+    protected conversionAxis(x: number, y: number): [number, number];
+}
+
+declare type PrizeFontType$1 = FontItemType & FontExtendType;
+declare type ButtonFontType = FontItemType & FontExtendType;
+declare type BlockImgType$1 = ImgItemType & {};
+declare type PrizeImgType$1 = ImgItemType & {
+    activeSrc?: string;
+};
+declare type ButtonImgType = ImgItemType & {};
+declare type BlockType$1 = {
+    borderRadius?: BorderRadiusType;
+    background?: BackgroundType;
+    padding?: string;
+    paddingTop?: string | number;
+    paddingRight?: string | number;
+    paddingBottom?: string | number;
+    paddingLeft?: string | number;
+    imgs?: Array<BlockImgType$1>;
+};
+declare type CellType<T, U> = {
+    x: number;
+    y: number;
+    col?: number;
+    row?: number;
+    borderRadius?: BorderRadiusType;
+    background?: BackgroundType;
+    shadow?: ShadowType;
+    fonts?: Array<T>;
+    imgs?: Array<U>;
+};
+declare type PrizeType$1 = CellType<PrizeFontType$1, PrizeImgType$1> & {
+    range?: number;
+    disabled?: boolean;
+};
+declare type ButtonType = CellType<ButtonFontType, ButtonImgType> & {
+    callback?: Function;
+};
+declare type DefaultConfigType$1 = {
+    gutter?: number;
+    speed?: number;
+    accelerationTime?: number;
+    decelerationTime?: number;
+};
+declare type DefaultStyleType$1 = {
+    borderRadius?: BorderRadiusType;
+    background?: BackgroundType;
+    shadow?: ShadowType;
+    fontColor?: PrizeFontType$1['fontColor'];
+    fontSize?: PrizeFontType$1['fontSize'];
+    fontStyle?: PrizeFontType$1['fontStyle'];
+    fontWeight?: PrizeFontType$1['fontWeight'];
+    lineHeight?: PrizeFontType$1['lineHeight'];
+    wordWrap?: PrizeFontType$1['wordWrap'];
+    lengthLimit?: PrizeFontType$1['lengthLimit'];
+    lineClamp?: PrizeFontType$1['lineClamp'];
+};
+declare type ActiveStyleType = {
+    background?: BackgroundType;
+    shadow?: ShadowType;
+    fontColor?: PrizeFontType$1['fontColor'];
+    fontSize?: PrizeFontType$1['fontSize'];
+    fontStyle?: PrizeFontType$1['fontStyle'];
+    fontWeight?: PrizeFontType$1['fontWeight'];
+    lineHeight?: PrizeFontType$1['lineHeight'];
+};
+declare type RowsType = number;
+declare type ColsType = number;
+declare type StartCallbackType = (e: MouseEvent, button?: ButtonType) => void;
+declare type EndCallbackType$1 = (prize: object) => void;
+interface LuckyGridConfig {
+    width: string | number;
+    height: string | number;
+    rows?: RowsType;
+    cols?: ColsType;
+    blocks?: Array<BlockType$1>;
+    prizes?: Array<PrizeType$1>;
+    buttons?: Array<ButtonType>;
+    button?: ButtonType;
+    defaultConfig?: DefaultConfigType$1;
+    defaultStyle?: DefaultStyleType$1;
+    activeStyle?: ActiveStyleType;
+    start?: StartCallbackType;
+    end?: EndCallbackType$1;
+}
+
+declare class LuckyGrid extends Lucky {
+    private rows;
+    private cols;
+    private blocks;
+    private prizes;
+    private buttons;
+    private button?;
+    private defaultConfig;
+    private defaultStyle;
+    private activeStyle;
+    private _defaultConfig;
+    private _defaultStyle;
+    private _activeStyle;
+    private startCallback?;
+    private endCallback?;
+    private cellWidth;
+    private cellHeight;
+    private startTime;
+    private endTime;
+    private currIndex;
+    private stopIndex;
+    private endIndex;
+    private demo;
+    private timer;
+    private FPS;
+    /**
+     * 游戏当前的阶段
+     * step = 0 时, 游戏尚未开始
+     * step = 1 时, 此时处于加速阶段
+     * step = 2 时, 此时处于匀速阶段
+     * step = 3 时, 此时处于减速阶段
+     */
+    private step;
+    /**
+     * 中奖索引
+     * prizeFlag = undefined 时, 处于开始抽奖阶段, 正常旋转
+     * prizeFlag >= 0 时, 说明stop方法被调用, 并且传入了中奖索引
+     * prizeFlag === -1 时, 说明stop方法被调用, 并且传入了负值, 本次抽奖无效
+     */
+    private prizeFlag;
+    private cells;
+    private prizeArea;
+    private ImageCache;
+    /**
+     * 九宫格构造器
+     * @param config 配置项
+     * @param data 抽奖数据
+     */
+    constructor(config: UserConfigType, data: LuckyGridConfig);
+    protected resize(): void;
+    protected initLucky(): void;
+    /**
+     * 初始化数据
+     * @param data
+     */
+    private initData;
+    /**
+     * 初始化属性计算
+     */
+    private initComputed;
+    /**
+     * 初始化观察者
+     */
+    private initWatch;
+    /**
+     * 初始化 canvas 抽奖
+     */
+    init(): Promise<void>;
+    private initImageCache;
+    /**
+     * canvas点击事件
+     * @param e 事件参数
+     */
+    protected handleClick(e: MouseEvent): void;
+    /**
+     * 根据索引单独加载指定图片并缓存
+     * @param cellName 模块名称
+     * @param cellIndex 模块索引
+     * @param imgName 模块对应的图片缓存
+     * @param imgIndex 图片索引
+     */
+    private loadAndCacheImg;
+    /**
+     * 绘制九宫格抽奖
+     */
+    protected draw(): void;
+    /**
+     * 处理背景色
+     * @param x
+     * @param y
+     * @param width
+     * @param height
+     * @param background
+     * @param isActive
+     */
+    private handleBackground;
+    /**
+     * 刻舟求剑
+     */
+    private carveOnGunwaleOfAMovingBoat;
+    /**
+     * 对外暴露: 开始抽奖方法
+     */
+    play(): void;
+    /**
+     * 对外暴露: 缓慢停止方法
+     * @param index 中奖索引
+     */
+    stop(index?: number): void;
+    /**
+     * 实际开始执行方法
+     * @param num 记录帧动画执行多少次
+     */
+    private run;
+    /**
+     * 计算奖品格子的几何属性
+     * @param { array } [...矩阵坐标, col, row]
+     * @return { array } [...真实坐标, width, height]
+     */
+    private getGeometricProperty;
+    /**
+     * 换算渲染坐标
+     * @param x
+     * @param y
+     */
+    protected conversionAxis(x: number, y: number): [number, number];
+}
+
+declare type PrizeFontType = FontItemType & FontExtendType;
+declare type BlockImgType = ImgItemType & {};
+declare type PrizeImgType = ImgItemType;
+declare type BlockType = {
+    borderRadius?: BorderRadiusType;
+    background?: BackgroundType;
+    padding?: string;
+    paddingTop?: string | number;
+    paddingRight?: string | number;
+    paddingBottom?: string | number;
+    paddingLeft?: string | number;
+    imgs?: Array<BlockImgType>;
+};
+declare type PrizeType = {
+    borderRadius?: BorderRadiusType;
+    background?: BackgroundType;
+    fonts?: Array<PrizeFontType>;
+    imgs?: Array<PrizeImgType>;
+};
+declare type SlotType = {
+    order?: number[];
+    speed?: number;
+    direction?: 1 | -1;
+};
+declare type DefaultConfigType = {
+    /**
+     * vertical 为纵向旋转
+     * horizontal 为横向旋转
+     */
+    mode?: 'vertical' | 'horizontal';
+    /**
+     * 当排列方向 = `vertical`时
+     *    1 bottom to top
+     *   -1 top to bottom
+     * 当排列方向 = `horizontal`时
+     *    1 right to left
+     *   -1 left to right
+     */
+    direction?: 1 | -1;
+    rowSpacing?: number;
+    colSpacing?: number;
+    speed?: number;
+    accelerationTime?: number;
+    decelerationTime?: number;
+};
+declare type DefaultStyleType = {
+    borderRadius?: BorderRadiusType;
+    background?: BackgroundType;
+    fontColor?: PrizeFontType['fontColor'];
+    fontSize?: PrizeFontType['fontSize'];
+    fontStyle?: PrizeFontType['fontStyle'];
+    fontWeight?: PrizeFontType['fontWeight'];
+    lineHeight?: PrizeFontType['lineHeight'];
+    wordWrap?: PrizeFontType['wordWrap'];
+    lengthLimit?: PrizeFontType['lengthLimit'];
+    lineClamp?: PrizeFontType['lineClamp'];
+};
+declare type EndCallbackType = (prize: PrizeType | undefined) => void;
+interface SlotMachineConfig {
+    width: string | number;
+    height: string | number;
+    blocks?: Array<BlockType>;
+    prizes?: Array<PrizeType>;
+    slots?: Array<SlotType>;
+    defaultConfig?: DefaultConfigType;
+    defaultStyle?: DefaultStyleType;
+    end?: EndCallbackType;
+}
+
+declare class SlotMachine extends Lucky {
+    private blocks;
+    private prizes;
+    private slots;
+    private defaultConfig;
+    private _defaultConfig;
+    private defaultStyle;
+    private _defaultStyle;
+    private endCallback;
+    private _offscreenCanvas?;
+    private cellWidth;
+    private cellHeight;
+    private cellAndSpacing;
+    private widthAndSpacing;
+    private heightAndSpacing;
+    private FPS;
+    private scroll;
+    private stopScroll;
+    private endScroll;
+    private startTime;
+    private endTime;
+    /**
+     * 游戏当前的阶段
+     * step = 0 时, 游戏尚未开始
+     * step = 1 时, 此时处于加速阶段
+     * step = 2 时, 此时处于匀速阶段
+     * step = 3 时, 此时处于减速阶段
+     */
+    private step;
+    /**
+     * 中奖索引
+     * prizeFlag = undefined 时, 处于开始抽奖阶段, 正常旋转
+     * prizeFlag >= 0 时, 说明stop方法被调用, 并且传入了中奖索引
+     * prizeFlag === -1 时, 说明stop方法被调用, 并且传入了负值, 本次抽奖无效
+     */
+    private prizeFlag;
+    private prizeArea?;
+    private ImageCache;
+    /**
+     * 老虎机构造器
+     * @param config 配置项
+     * @param data 抽奖数据
+     */
+    constructor(config: UserConfigType, data: SlotMachineConfig);
+    protected resize(): void;
+    protected initLucky(): void;
+    /**
+     * 初始化数据
+     * @param data
+     */
+    private initData;
+    /**
+     * 初始化属性计算
+     */
+    private initComputed;
+    /**
+     * 初始化观察者
+     */
+    private initWatch;
+    /**
+     * 初始化 canvas 抽奖
+     */
+    init(): Promise<void>;
+    private initImageCache;
+    /**
+     * 根据索引单独加载指定图片并缓存
+     * @param cellName 模块名称
+     * @param cellIndex 模块索引
+     * @param imgName 模块对应的图片缓存
+     * @param imgIndex 图片索引
+     */
+    private loadAndCacheImg;
+    /**
+     * 绘制离屏canvas
+     */
+    protected drawOffscreenCanvas(): void;
+    /**
+     * 绘制背景区域
+     */
+    protected drawBlocks(): SlotMachine['prizeArea'];
+    /**
+     * 绘制老虎机抽奖
+     */
+    protected draw(): void;
+    /**
+     * 刻舟求剑
+     */
+    private carveOnGunwaleOfAMovingBoat;
+    /**
+     * 对外暴露: 开始抽奖方法
+     */
+    play(): void;
+    stop(index: number | number[], slotIndex?: number): void;
+    /**
+     * 让游戏动起来
+     * @param num 记录帧动画执行多少次
+     */
+    private run;
+    private displacement;
+    private displacementWidthOrHeight;
+}
+
+/**
+ * 切割圆角
+ * @param img 将要裁剪的图片对象
+ * @param radius 裁剪的圆角半径
+ * @returns 返回一个离屏 canvas 用于渲染
+ */
+declare const cutRound: (img: ImgType, radius: number) => ImgType;
+/**
+ * 透明度
+ * @param img 将要处理的图片对象
+ * @param opacity 透明度
+ * @returns 返回一个离屏 canvas 用于渲染
+ */
+declare const opacity: (img: ImgType, opacity: number) => ImgType;
+
+export { LuckyGrid, LuckyWheel, SlotMachine, cutRound, opacity };