@vnpn/lucky-canvas-core 1.7.26

package/types/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/types/src/types/slot.d.ts

@@ -0,0 +1,69 @@
+import { FontItemType, ImgItemType, BorderRadiusType, BackgroundType, FontExtendType } from './index';
+export type PrizeFontType = FontItemType & FontExtendType;
+export type BlockImgType = ImgItemType & {};
+export type PrizeImgType = ImgItemType;
+export type BlockType = {
+    borderRadius?: BorderRadiusType;
+    background?: BackgroundType;
+    padding?: string;
+    paddingTop?: string | number;
+    paddingRight?: string | number;
+    paddingBottom?: string | number;
+    paddingLeft?: string | number;
+    imgs?: Array<BlockImgType>;
+};
+export type PrizeType = {
+    borderRadius?: BorderRadiusType;
+    background?: BackgroundType;
+    fonts?: Array<PrizeFontType>;
+    imgs?: Array<PrizeImgType>;
+};
+export type SlotType = {
+    order?: number[];
+    speed?: number;
+    direction?: 1 | -1;
+};
+export 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;
+};
+export 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'];
+};
+export type EndCallbackType = (prize: PrizeType | undefined) => void;
+export default interface SlotMachineConfig {
+    width: string | number;
+    height: string | number;
+    blocks?: Array<BlockType>;
+    prizes?: Array<PrizeType>;
+    slots?: Array<SlotType>;
+    defaultConfig?: DefaultConfigType;
+    defaultStyle?: DefaultStyleType;
+    end?: EndCallbackType;
+}

package/types/src/types/wheel.d.ts

@@ -0,0 +1,59 @@
+import { FontItemType, ImgItemType, BackgroundType, FontExtendType } from './index';
+export type PrizeFontType = FontItemType & FontExtendType;
+export type ButtonFontType = FontItemType & {};
+export type BlockImgType = ImgItemType & {
+    rotate?: boolean;
+};
+export type PrizeImgType = ImgItemType & {};
+export type ButtonImgType = ImgItemType & {};
+export type BlockType = {
+    padding?: string;
+    background?: BackgroundType;
+    imgs?: Array<BlockImgType>;
+};
+export type PrizeType = {
+    range?: number;
+    background?: BackgroundType;
+    fonts?: Array<PrizeFontType>;
+    imgs?: Array<PrizeImgType>;
+};
+export type ButtonType = {
+    radius?: string;
+    pointer?: boolean;
+    background?: BackgroundType;
+    fonts?: Array<ButtonFontType>;
+    imgs?: Array<ButtonImgType>;
+};
+export type DefaultConfigType = {
+    gutter?: string | number;
+    offsetDegree?: number;
+    speed?: number;
+    speedFunction?: string;
+    accelerationTime?: number;
+    decelerationTime?: number;
+    stopRange?: number;
+};
+export type DefaultStyleType = {
+    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'];
+};
+export type StartCallbackType = (e: MouseEvent) => void;
+export type EndCallbackType = (prize: object) => void;
+export default interface LuckyWheelConfig {
+    width: string | number;
+    height: string | number;
+    blocks?: Array<BlockType>;
+    prizes?: Array<PrizeType>;
+    buttons?: Array<ButtonType>;
+    defaultConfig?: DefaultConfigType;
+    defaultStyle?: DefaultStyleType;
+    start?: StartCallbackType;
+    end?: EndCallbackType;
+}

package/types/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/types/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/types/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/types/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 {};