feat: grid九宫格提供index变化时的监听事件change。

packages/core/examples/grid.html

@@ -45,6 +45,9 @@
         ],
         defaultStyle: {
           background: '#f4f5f5'
+        },
+        change: (index) => {
+          console.log(index)
         }
       })
   </script>

packages/core/src/lib/grid.ts

@@ -1,31 +1,31 @@
-import Lucky from './lucky'
-import { UserConfigType, ImgType } from '../types/index'
 import LuckyGridConfig, {
+  ActiveStyleType,
   BlockType,
-  PrizeType,
   ButtonType,
   CellFontType,
   CellImgType,
-  RowsType,
-  ColsType,
   CellType,
+  ChangeCallbackType,
+  ColsType,
   DefaultConfigType,
   DefaultStyleType,
-  ActiveStyleType,
-  StartCallbackType,
   EndCallbackType,
+  PrizeType,
+  RowsType,
+  StartCallbackType,
 } from '../types/grid'
+import { UserConfigType } from '../types/index'
 import {
-  has,
-  isExpectType,
-  removeEnter,
   computePadding,
-  hasBackground,
   computeRange,
+  has,
+  hasBackground,
+  removeEnter,
   splitText
 } from '../utils/index'
-import { roundRectByArc, getLinearGradient } from '../utils/math'
+import { getLinearGradient, roundRectByArc } from '../utils/math'
 import { quad } from '../utils/tween'
+import Lucky from './lucky'
 
 export default class LuckyGrid extends Lucky {
   private rows: RowsType = 3
@@ -42,6 +42,7 @@ export default class LuckyGrid extends Lucky {
   private _activeStyle: Required<ActiveStyleType> = {} as Required<ActiveStyleType>
   private startCallback?: StartCallbackType
   private endCallback?: EndCallbackType
+  private changeCallback?: ChangeCallbackType
   private cellWidth = 0                 // 格子宽度
   private cellHeight = 0                // 格子高度
   private startTime = 0                 // 开始时间戳
@@ -52,6 +53,7 @@ export default class LuckyGrid extends Lucky {
   private demo = false                  // 是否自动游走
   private timer = 0                     // 游走定时器
   private FPS = 16.6                    // 屏幕刷新率
+  private realIndex = -1                // 用户可用的index
   /**
    * 游戏当前的阶段
    * step = 0 时, 游戏尚未开始
@@ -79,7 +81,7 @@ export default class LuckyGrid extends Lucky {
    * @param config 配置项
    * @param data 抽奖数据
    */
-  constructor (config: UserConfigType, data: LuckyGridConfig) {
+  constructor(config: UserConfigType, data: LuckyGridConfig) {
     super(config, {
       width: data.width,
       height: data.height
@@ -99,7 +101,7 @@ export default class LuckyGrid extends Lucky {
     this.config.afterResize?.()
   }
 
-  protected initLucky (): void {
+  protected initLucky(): void {
     this.cellWidth = 0
     this.cellHeight = 0
     this.startTime = 0
@@ -112,14 +114,15 @@ export default class LuckyGrid extends Lucky {
     this.FPS = 16.6
     this.prizeFlag = -1
     this.step = 0
+    this.realIndex = -1
     super.initLucky()
   }
 
   /**
    * 初始化数据
    * @param data
    */
-  private initData (data: LuckyGridConfig): void {
+  private initData(data: LuckyGridConfig): void {
     this.$set(this, 'width', data.width)
     this.$set(this, 'height', data.height)
     this.$set(this, 'rows', Number(data.rows) || 3)
@@ -134,12 +137,13 @@ export default class LuckyGrid extends Lucky {
     this.$set(this, 'activeStyle', data.activeStyle || {})
     this.$set(this, 'startCallback', data.start)
     this.$set(this, 'endCallback', data.end)
+    this.$set(this, 'changeCallback', data.change)
   }
 
   /**
    * 初始化属性计算
    */
-  private initComputed (): void {
+  private initComputed(): void {
     // 默认配置
     this.$computed(this, '_defaultConfig', () => {
       const config = {
@@ -181,7 +185,7 @@ export default class LuckyGrid extends Lucky {
   /**
    * 初始化观察者
    */
-  private initWatch (): void {
+  private initWatch(): void {
     // 重置宽度
     this.$watch('width', (newVal: string | number) => {
       this.data.width = newVal
@@ -211,12 +215,13 @@ export default class LuckyGrid extends Lucky {
     this.$watch('activeStyle', () => this.draw(), { deep: true })
     this.$watch('startCallback', () => this.init())
     this.$watch('endCallback', () => this.init())
+    this.$watch('changeCallback', () => this.init())
   }
 
   /**
    * 初始化 canvas 抽奖
    */
-  public async init (): Promise<void> {
+  public async init(): Promise<void> {
     this.initLucky()
     const { config } = this
     // 初始化前回调函数
@@ -229,7 +234,7 @@ export default class LuckyGrid extends Lucky {
     config.afterInit?.call(this)
   }
 
-  private initImageCache (): Promise<void> {
+  private initImageCache(): Promise<void> {
     return new Promise((resolve) => {
       const btnImgs = this.buttons.map(btn => btn.imgs)
       if (this.button) btnImgs.push(this.button.imgs)
@@ -238,46 +243,46 @@ export default class LuckyGrid extends Lucky {
         prizes: this.prizes.map(prize => prize.imgs),
         buttons: btnImgs,
       }
-      ;(<(keyof typeof willUpdateImgs)[]>Object.keys(willUpdateImgs)).forEach(imgName => {
-        const willUpdate = willUpdateImgs[imgName]
-        // 循环遍历所有图片
-        const allPromise: Promise<void>[] = []
-        willUpdate && willUpdate.forEach((imgs, cellIndex) => {
-          imgs && imgs.forEach((imgInfo, imgIndex) => {
-            allPromise.push(this.loadAndCacheImg(imgName, cellIndex, imgIndex))
+        ; (<(keyof typeof willUpdateImgs)[]>Object.keys(willUpdateImgs)).forEach(imgName => {
+          const willUpdate = willUpdateImgs[imgName]
+          // 循环遍历所有图片
+          const allPromise: Promise<void>[] = []
+          willUpdate && willUpdate.forEach((imgs, cellIndex) => {
+            imgs && imgs.forEach((imgInfo, imgIndex) => {
+              allPromise.push(this.loadAndCacheImg(imgName, cellIndex, imgIndex))
+            })
+          })
+          Promise.all(allPromise).then(() => {
+            this.draw()
+            resolve()
           })
         })
-        Promise.all(allPromise).then(() => {
-          this.draw()
-          resolve()
-        })
-      })
     })
   }
 
   /**
    * canvas点击事件
    * @param e 事件参数
    */
-  protected handleClick (e: MouseEvent): void {
+  protected handleClick(e: MouseEvent): void {
     const { ctx } = this
-    ;[
-      ...this.buttons,
-      this.button
-    ].forEach(btn => {
-      if (!btn) return
-      const [x, y, width, height] = this.getGeometricProperty([
-        btn.x, btn.y, btn.col || 1, btn.row || 1
-      ])
-      ctx.beginPath()
-      ctx.rect(x, y, width, height)
-      if (!ctx.isPointInPath(e.offsetX, e.offsetY)) return
-      if (this.step !== 0) return
-      // 如果btn里有单独的回调方法, 优先触发
-      if (typeof btn.callback === 'function') btn.callback.call(this, btn)
-      // 最后触发公共回调
-      this.startCallback?.(e, btn)
-    })
+      ;[
+        ...this.buttons,
+        this.button
+      ].forEach(btn => {
+        if (!btn) return
+        const [x, y, width, height] = this.getGeometricProperty([
+          btn.x, btn.y, btn.col || 1, btn.row || 1
+        ])
+        ctx.beginPath()
+        ctx.rect(x, y, width, height)
+        if (!ctx.isPointInPath(e.offsetX, e.offsetY)) return
+        if (this.step !== 0) return
+        // 如果btn里有单独的回调方法, 优先触发
+        if (typeof btn.callback === 'function') btn.callback.call(this, btn)
+        // 最后触发公共回调
+        this.startCallback?.(e, btn)
+      })
   }
 
   /**
@@ -287,7 +292,7 @@ export default class LuckyGrid extends Lucky {
    * @param imgName 模块对应的图片缓存
    * @param imgIndex 图片索引
    */
-  private async loadAndCacheImg (
+  private async loadAndCacheImg(
     cellName: 'blocks' | 'prizes' | 'buttons',
     cellIndex: number,
     imgIndex: number
@@ -328,7 +333,7 @@ export default class LuckyGrid extends Lucky {
   /**
    * 绘制九宫格抽奖
    */
-  protected draw (): void {
+  protected draw(): void {
     const { config, ctx, _defaultConfig, _defaultStyle, _activeStyle } = this
     // 触发绘制前回调
     config.beforeDraw?.call(this, ctx)
@@ -345,7 +350,7 @@ export default class LuckyGrid extends Lucky {
       cell.row = cell.row || 1
     })
     // 计算获取奖品区域的几何信息
-    this.prizeArea = this.blocks.reduce(({x, y, w, h}, block, blockIndex) => {
+    this.prizeArea = this.blocks.reduce(({ x, y, w, h }, block, blockIndex) => {
       const [paddingTop, paddingBottom, paddingLeft, paddingRight] = computePadding(block, this.getLength.bind(this))
       const r = block.borderRadius ? this.getLength(block.borderRadius) : 0
       // 绘制边框
@@ -491,7 +496,7 @@ export default class LuckyGrid extends Lucky {
    * @param background
    * @param isActive
    */
-  private handleBackground (
+  private handleBackground(
     x: number,
     y: number,
     width: number,
@@ -509,7 +514,7 @@ export default class LuckyGrid extends Lucky {
   /**
    * 刻舟求剑
    */
-  private carveOnGunwaleOfAMovingBoat (): void {
+  private carveOnGunwaleOfAMovingBoat(): void {
     const { _defaultConfig, prizeFlag, currIndex } = this
     this.endTime = Date.now()
     const stopIndex = this.stopIndex = currIndex
@@ -530,7 +535,7 @@ export default class LuckyGrid extends Lucky {
   /**
    * 对外暴露: 开始抽奖方法
    */
-  public play (): void {
+  public play(): void {
     if (this.step !== 0) return
     // 记录游戏开始的时间
     this.startTime = Date.now()
@@ -548,7 +553,7 @@ export default class LuckyGrid extends Lucky {
    * 对外暴露: 缓慢停止方法
    * @param index 中奖索引
    */
-  public stop (index?: number): void {
+  public stop(index?: number): void {
     if (this.step === 0 || this.step === 3) return
     // 如果没有传递中奖索引, 则通过range属性计算一个
     if (!index && index !== 0) {
@@ -569,7 +574,7 @@ export default class LuckyGrid extends Lucky {
    * 实际开始执行方法
    * @param num 记录帧动画执行多少次
    */
-  private run (num: number = 0): void {
+  private run(num: number = 0): void {
     const { rAF, step, prizes, prizeFlag, _defaultConfig } = this
     const { accelerationTime, decelerationTime, speed } = _defaultConfig
     // 结束游戏
@@ -616,6 +621,11 @@ export default class LuckyGrid extends Lucky {
       this.stop(-1)
     }
     this.currIndex = currIndex
+    let realIndex = Math.floor(currIndex) % this.prizes.length
+    if (realIndex !== this.realIndex) {
+      this.realIndex = realIndex
+      this.changeCallback?.(realIndex)
+    }
     this.draw()
     rAF(this.run.bind(this, num + 1))
   }
@@ -625,7 +635,7 @@ export default class LuckyGrid extends Lucky {
    * @param { array } [...矩阵坐标, col, row]
    * @return { array } [...真实坐标, width, height]
    */
-  private getGeometricProperty ([x, y, col = 1, row = 1]: number[]) {
+  private getGeometricProperty([x, y, col = 1, row = 1]: number[]) {
     const { cellWidth, cellHeight } = this
     const gutter = this._defaultConfig.gutter
     let res = [
@@ -644,7 +654,7 @@ export default class LuckyGrid extends Lucky {
    * @param x
    * @param y
    */
-  protected conversionAxis (x: number, y: number): [number, number] {
+  protected conversionAxis(x: number, y: number): [number, number] {
     const { config } = this
     return [x / config.dpr, y / config.dpr]
   }

packages/core/src/types/grid.ts

@@ -1,10 +1,10 @@
 import {
+  BackgroundType,
+  BorderRadiusType,
+  FontExtendType,
   FontItemType,
   ImgItemType,
-  BorderRadiusType,
-  BackgroundType,
-  ShadowType,
-  FontExtendType
+  ShadowType
 } from './index'
 
 export type PrizeFontType = FontItemType & FontExtendType
@@ -90,6 +90,7 @@ export type RowsType = number
 export type ColsType = number
 export type StartCallbackType = (e: MouseEvent, button?: ButtonType) => void
 export type EndCallbackType = (prize: object) => void
+export type ChangeCallbackType = (index: number) => void
 
 export default interface LuckyGridConfig {
   width: string | number
@@ -105,4 +106,5 @@ export default interface LuckyGridConfig {
   activeStyle?: ActiveStyleType
   start?: StartCallbackType
   end?: EndCallbackType
+  change?: ChangeCallbackType
 }