lucky-scratch 1.1.1 → 1.1.2

package/dist/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LuckyScratch } from './lib/scratch';
+export { cutRound, opacity } from './utils/image';

package/dist/src/lib/lucky.d.ts

@@ -0,0 +1,128 @@
+import '../utils/polyfill';
+import { ConfigType, UserConfigType, ImgItemType, ImgType, Tuple } from '../types/index';
+import { WatchOptType } from '../observer/watcher';
+export default 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;
+}

package/dist/src/lib/scratch.d.ts

@@ -0,0 +1,68 @@
+import Lucky from './lucky';
+import LuckyScratchConfig from '../types/scratch';
+import { UserConfigType } from '../types/index';
+export default class LuckyScratch extends Lucky {
+    private mask;
+    private scratch;
+    private progress;
+    private isScratching;
+    private isCompleted;
+    disabled: boolean;
+    private isFirstScratch;
+    private eventsInitialized;
+    private onceBeforeStartCallback?;
+    private beforeStartCallback?;
+    private startCallback?;
+    private endCallback?;
+    private successCallback?;
+    private afterInitCallback?;
+    /**
+     * 刮刮卡构造器
+     * @param config 配置项
+     * @param data 抽奖数据
+     */
+    constructor(config: UserConfigType, data: LuckyScratchConfig);
+    protected initData(data: LuckyScratchConfig): void;
+    /**
+     * 重写 resize 方法，在尺寸变化后重新绘制蒙层
+     */
+    protected resize(): void;
+    init(): Promise<void>;
+    private draw;
+    private handleBindEvents;
+    private handleStart;
+    private handleMove;
+    private handleEnd;
+    private drawArc;
+    /**
+     * 在指定坐标绘制刮痕
+     * @param x 相对于 canvas 的 x 坐标（物理像素，已乘以 dpr）
+     * @param y 相对于 canvas 的 y 坐标（物理像素，已乘以 dpr）
+     */
+    private drawArcAt;
+    private checkProgress;
+    /**
+     * 动态设置禁用状态
+     * @param disabled 是否禁用
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * 公共方法：处理触摸/鼠标开始事件
+     * 供小程序、uni-app 等非 DOM 环境使用
+     * @param x 相对于 canvas 的 x 坐标（逻辑像素）
+     * @param y 相对于 canvas 的 y 坐标（逻辑像素）
+     */
+    handleTouchStart(x: number, y: number): Promise<void>;
+    /**
+     * 公共方法：处理触摸/鼠标移动事件
+     * 供小程序、uni-app 等非 DOM 环境使用
+     * @param x 相对于 canvas 的 x 坐标（逻辑像素）
+     * @param y 相对于 canvas 的 y 坐标（逻辑像素）
+     */
+    handleTouchMove(x: number, y: number): void;
+    /**
+     * 公共方法：处理触摸/鼠标结束事件
+     * 供小程序、uni-app 等非 DOM 环境使用
+     */
+    handleTouchEnd(): void;
+}

package/dist/src/observer/array.d.ts

@@ -0,0 +1,2 @@
+declare const newArrayProto: any;
+export { newArrayProto };

package/dist/src/observer/dep.d.ts

@@ -0,0 +1,18 @@
+import Watcher from './watcher';
+export default class Dep {
+    static target: Watcher | null;
+    private subs;
+    /**
+     * 订阅中心构造器
+     */
+    constructor();
+    /**
+     * 收集依赖
+     * @param {*} sub
+     */
+    addSub(sub: Watcher): void;
+    /**
+     * 派发更新
+     */
+    notify(): void;
+}

package/dist/src/observer/index.d.ts

@@ -0,0 +1,23 @@
+import Dep from './dep';
+export default class Observer {
+    value: any;
+    dep: Dep;
+    /**
+     * 观察者构造器
+     * @param value
+     */
+    constructor(value: any);
+    walk(data: object | any[]): void;
+}
+/**
+ * 处理响应式
+ * @param { Object | Array } data
+ */
+export declare function observe(data: any): Observer | void;
+/**
+ * 重写 setter / getter
+ * @param {*} data
+ * @param {*} key
+ * @param {*} val
+ */
+export declare function defineReactive(data: any, key: string | number, val: any): void;

package/dist/src/observer/utils.d.ts

@@ -0,0 +1,4 @@
+export declare const hasProto: boolean;
+export declare function def(obj: object, key: string | number, val: any, enumerable?: boolean): void;
+export declare function parsePath(path: string): (data: object | any[]) => object | any[];
+export declare function traverse(value: any): void;

package/dist/src/observer/watcher.d.ts

@@ -0,0 +1,30 @@
+import Lucky from '../lib/lucky';
+export interface WatchOptType {
+    handler?: () => Function;
+    immediate?: boolean;
+    deep?: boolean;
+}
+export default class Watcher {
+    id: number;
+    $lucky: Lucky;
+    expr: string | Function;
+    cb: Function;
+    deep: boolean;
+    getter: Function;
+    value: any;
+    /**
+     * 观察者构造器
+     * @param {*} $lucky
+     * @param {*} expr
+     * @param {*} cb
+     */
+    constructor($lucky: Lucky, expr: string | Function, cb: Function, options?: WatchOptType);
+    /**
+     * 根据表达式获取新值
+     */
+    get(): any;
+    /**
+     * 触发 watcher 更新
+     */
+    update(): void;
+}

package/dist/src/types/index.d.ts

@@ -0,0 +1,59 @@
+export type FontItemType = {
+    text: string;
+    top?: string | number;
+    left?: string | number;
+    fontColor?: string;
+    fontSize?: string;
+    fontStyle?: string;
+    fontWeight?: string;
+    lineHeight?: string;
+};
+export type FontExtendType = {
+    wordWrap?: boolean;
+    lengthLimit?: string | number;
+    lineClamp?: number;
+};
+export type ImgType = HTMLImageElement | HTMLCanvasElement;
+export type ImgItemType = {
+    src: string;
+    top?: string | number;
+    left?: string | number;
+    width?: string;
+    height?: string;
+    formatter?: (img: ImgType) => ImgType;
+    $resolve?: Function;
+    $reject?: Function;
+};
+export type BorderRadiusType = string | number;
+export type BackgroundType = string;
+export type ShadowType = string;
+export 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;
+};
+export type UserConfigType = Partial<ConfigType>;
+export type UniImageType = {
+    path: string;
+    width: number;
+    height: number;
+};
+export type Tuple<T, Len extends number, Res extends T[] = []> = Res['length'] extends Len ? Res : Tuple<T, Len, [...Res, T]>;

package/dist/src/types/scratch.d.ts

@@ -0,0 +1,19 @@
+export default interface LuckyScratchConfig {
+    width?: string | number;
+    height?: string | number;
+    mask?: {
+        type?: 'color' | 'image';
+        color?: string;
+        src?: string;
+    };
+    scratch?: {
+        radius?: number;
+        percent?: number;
+    };
+    onceBeforeStart?: () => boolean | Promise<boolean>;
+    beforeStart?: () => boolean | Promise<boolean>;
+    start?: () => void;
+    end?: () => void;
+    success?: (progress: number) => void;
+    afterInit?: () => void;
+}

package/dist/src/utils/image.d.ts

@@ -0,0 +1,29 @@
+import { ImgType } from '../types/index';
+/**
+ * 根据路径获取图片对象
+ * @param { string } src 图片路径
+ * @returns { Promise<HTMLImageElement> } 图片标签
+ */
+export declare const getImage: (src: string) => Promise<ImgType>;
+/**
+ * 切割圆角
+ * @param img 将要裁剪的图片对象
+ * @param radius 裁剪的圆角半径
+ * @returns 返回一个离屏 canvas 用于渲染
+ */
+export declare const cutRound: (img: ImgType, radius: number) => ImgType;
+/**
+ * 透明度
+ * @param img 将要处理的图片对象
+ * @param opacity 透明度
+ * @returns 返回一个离屏 canvas 用于渲染
+ */
+export declare const opacity: (img: ImgType, opacity: number) => ImgType;
+/**
+ * 高斯模糊
+ * @param img 将要处理的图片对象
+ * @param radius 模糊半径
+ * @returns 返回一个离屏 canvas 用于渲染
+ */
+export declare const blur: (img: ImgType, radius: number) => ImgType;
+export declare const getBase64Image: () => void;

package/dist/src/utils/index.d.ts

@@ -0,0 +1,53 @@
+/**
+ * 判断是否是期望的类型
+ * @param { unknown } param 将要判断的变量
+ * @param { ...string } types 期望的类型
+ * @return { boolean } 返回期望是否正确
+ */
+export declare const isExpectType: (param: unknown, ...types: string[]) => boolean;
+export declare const get: (data: object, strKeys: string) => any;
+export declare const has: (data: object, key: string | number) => boolean;
+/**
+ * 移除\n
+ * @param { string } str 将要处理的字符串
+ * @return { string } 返回新的字符串
+ */
+export declare const removeEnter: (str: string) => string;
+/**
+ * 把任何数据类型转成数字
+ * @param num
+ */
+export declare const getNumber: (num: unknown) => number;
+/**
+ * 判断颜色是否有效 (透明色 === 无效)
+ * @param color 颜色
+ */
+export declare const hasBackground: (color: string | undefined | null) => boolean;
+/**
+ * 通过padding计算
+ * @return { object } block 边框信息
+ */
+export declare const computePadding: (block: {
+    padding?: string | undefined;
+}, getLength: Function) => [number, number, number, number];
+/**
+ * 节流函数
+ * @param fn 将要处理的函数
+ * @param wait 时间, 单位为毫秒
+ * @returns 包装好的节流函数
+ */
+export declare const throttle: (fn: Function, wait?: number) => (this: any, ...args: any[]) => void;
+/**
+ * 通过概率计算出一个奖品索引
+ * @param { Array<number | undefined> } rangeArr 概率
+ * @returns { number } 中奖索引
+ */
+export declare const computeRange: (rangeArr: Array<number | undefined>) => number;
+/**
+ * 根据宽度分割字符串, 来达到换行的效果
+ * @param text
+ * @param maxWidth
+ * @returns
+ */
+export declare const splitText: (ctx: CanvasRenderingContext2D, text: string, getWidth: (lines: string[]) => number, lineClamp?: number) => string[];
+export declare const getSortedArrayByIndex: <T>(arr: T[], order: number[]) => T[];

package/dist/src/utils/math.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 转换为运算角度
+ * @param { number } deg 数学角度
+ * @return { number } 运算角度
+ */
+export declare const getAngle: (deg: number) => number;
+/**
+ * 根据角度计算圆上的点
+ * @param { number } deg 运算角度
+ * @param { number } r 半径
+ * @return { Array<number> } 坐标[x, y]
+ */
+export declare const getArcPointerByDeg: (deg: number, r: number) => [number, number];
+/**
+ * 根据点计算切线方程
+ * @param { number } x 横坐标
+ * @param { number } y 纵坐标
+ * @return { Array<number> } [斜率, 常数]
+ */
+export declare const getTangentByPointer: (x: number, y: number) => Array<number>;
+export declare const fanShapedByArc: (ctx: CanvasRenderingContext2D, minRadius: number, maxRadius: number, start: number, end: number, gutter: number) => void;
+export declare const roundRectByArc: (ctx: CanvasRenderingContext2D, ...[x, y, w, h, r]: number[]) => void;
+/**
+ * 创建线性渐变色
+ */
+export declare const getLinearGradient: (ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, background: string) => any;

package/dist/src/utils/tween.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 缓动函数
+ * t: current time（当前时间）
+ * b: beginning value（初始值）
+ * c: change in value（变化量）
+ * d: duration（持续时间）
+ *
+ * 感谢张鑫旭大佬 https://github.com/zhangxinxu/Tween
+ */
+interface SpeedType {
+    easeIn: (...arr: number[]) => number;
+    easeOut: (...arr: number[]) => number;
+}
+export declare const quad: SpeedType;
+export declare const cubic: SpeedType;
+export declare const quart: SpeedType;
+export declare const quint: SpeedType;
+export declare const sine: SpeedType;
+export declare const expo: SpeedType;
+export declare const circ: SpeedType;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucky-scratch",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "一个基于原生 js 的刮刮卡抽奖插件",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",