鸿蒙特效教程08-幸运大转盘抽奖

鸿蒙特效教程08-幸运大转盘抽奖

本教程将带领大家从零开始，一步步实现一个完整的转盘抽奖效果，包括界面布局、Canvas绘制、动画效果和抽奖逻辑等。

开发环境准备

• DevEco Studio 5.0.3
  
• HarmonyOS Next API 15
  

1. 需求分析与整体设计

温馨提醒：本案例有一定难度，建议先收藏起来。

在开始编码前，让我们先明确转盘抽奖的基本需求：

• 展示一个可旋转的奖品转盘
  
• 转盘上有多个奖品区域，每个区域有不同的颜色和奖品名称
  
• 点击"开始抽奖"按钮后，转盘开始旋转
  
• 转盘停止后，指针指向的位置即为抽中的奖品
  
• 每个奖品有不同的中奖概率
  

整体设计思路：

• 使用HarmonyOS的Canvas组件绘制转盘
  
• 利用动画效果实现转盘旋转
  
• 根据概率算法确定最终停止位置
  

2. 基础界面布局

首先，我们创建基础的页面布局，包括标题、转盘区域和结果显示。

1. @Entry
2. @Component
3. struct LuckyWheel {
4.   build() {
5.     Column() {
6.       // 标题
7.       Text('幸运大转盘')
8.         .fontSize(28)
9.         .fontWeight(FontWeight.Bold)
10.         .fontColor(Color.White)
11.         .margin({ bottom: 20 })
13.       // 抽奖结果显示
14.       Text('点击开始抽奖')
15.         .fontSize(20)
16.         .fontColor(Color.White)
17.         .backgroundColor('#1AFFFFFF')
18.         .width('90%')
19.         .textAlign(TextAlign.Center)
20.         .padding(15)
21.         .borderRadius(16)
22.         .margin({ bottom: 30 })
24.       // 转盘容器（后续会添加Canvas）
25.       Stack({ alignContent: Alignment.Center }) {
26.         // 这里稍后会添加Canvas绘制转盘
27.         
28.         // 中央开始按钮
29.         Button({ type: ButtonType.Circle }) {
30.           Text('开始\n抽奖')
31.             .fontSize(18)
32.             .fontWeight(FontWeight.Bold)
33.             .textAlign(TextAlign.Center)
34.             .fontColor(Color.White)
35.         }
36.         .width(80)
37.         .height(80)
38.         .backgroundColor('#FF6B6B')
39.       }
40.       .width('90%')
41.       .aspectRatio(1)
42.       .backgroundColor('#0DFFFFFF')
43.       .borderRadius(16)
44.       .padding(15)
45.     }
46.     .width('100%')
47.     .height('100%')
48.     .justifyContent(FlexAlign.Center)
49.     .backgroundColor(Color.Black)
50.     .linearGradient({
51.       angle: 135,
52.       colors: [
53.         ['#1A1B25', 0],
54.         ['#2D2E3A', 1]
55.       ]
56.     })
57.   }
58. }

复制代码

这个基础布局创建了一个带有标题、结果显示区和转盘容器的页面。转盘容器使用Stack组件，这样我们可以在转盘上方放置"开始抽奖"按钮。
3. 定义数据结构

接下来，我们需要定义转盘上的奖品数据结构：

1. // 奖品数据接口
2. interface PrizesItem {
3.   name: string     // 奖品名称
4.   color: string    // 转盘颜色
5.   probability: number // 概率权重
6. }
8. @Entry
9. @Component
10. struct LuckyWheel {
11.   // 奖品数据
12.   private prizes: PrizesItem[] = [
13.     { name: '谢谢参与', color: '#FFD8A8', probability: 30 },
14.     { name: '10积分', color: '#B2F2BB', probability: 20 },
15.     { name: '5元红包', color: '#D0BFFF', probability: 10 },
16.     { name: '优惠券', color: '#A5D8FF', probability: 15 },
17.     { name: '免单券', color: '#FCCFE7', probability: 5 },
18.     { name: '50积分', color: '#BAC8FF', probability: 15 },
19.     { name: '会员月卡', color: '#99E9F2', probability: 3 },
20.     { name: '1元红包', color: '#FFBDBD', probability: 2 }
21.   ]
23.   // 状态变量
24.   @State isSpinning: boolean = false // 是否正在旋转
25.   @State rotation: number = 0 // 当前旋转角度
26.   @State result: string = '点击开始抽奖' // 抽奖结果
28.   // ...其余代码
29. }

复制代码

这里我们定义了转盘上的8个奖品，每个奖品包含名称、颜色和概率权重。同时定义了三个状态变量来跟踪转盘的状态。
4. 初始化Canvas

现在，让我们初始化Canvas来绘制转盘：

1. @Entry
2. @Component
3. struct LuckyWheel {
4.   // Canvas 相关设置
5.   private readonly settings: RenderingContextSettings = new RenderingContextSettings(true); // 启用抗锯齿
6.   private readonly ctx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
7.   
8.   // 转盘相关属性
9.   private canvasWidth: number = 0 // 画布宽度
10.   private canvasHeight: number = 0 // 画布高度
11.   
12.   // ...其余代码
13.   
14.   build() {
15.     Column() {
16.       // ...之前的代码
17.       
18.       // 转盘容器
19.       Stack({ alignContent: Alignment.Center }) {
20.         // 使用Canvas绘制转盘
21.         Canvas(this.ctx)
22.           .width('100%')
23.           .height('100%')
24.           .onReady(() => {
25.             // 获取Canvas尺寸
26.             this.canvasWidth = this.ctx.width
27.             this.canvasHeight = this.ctx.height
28.             // 初始绘制转盘
29.             this.drawWheel()
30.           })
31.          
32.         // 中央开始按钮
33.         // ...按钮代码
34.       }
35.       // ...容器样式
36.     }
37.     // ...外层容器样式
38.   }
39.   
40.   // 绘制转盘（先定义一个空方法，稍后实现）
41.   private drawWheel(): void {
42.     // 稍后实现
43.   }
44. }

复制代码

这里我们创建了Canvas绘制上下文，并在onReady回调中获取Canvas尺寸，然后调用drawWheel方法绘制转盘。
5. 实现转盘绘制

接下来，我们实现drawWheel方法，绘制转盘：

1. // 绘制转盘
2. private drawWheel(): void {
3.   if (!this.ctx) return
4.   
5.   const centerX = this.canvasWidth / 2
6.   const centerY = this.canvasHeight / 2
7.   const radius = Math.min(centerX, centerY) * 0.85
8.   
9.   // 清除画布
10.   this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
11.   
12.   // 保存当前状态
13.   this.ctx.save()
14.   
15.   // 移动到中心点
16.   this.ctx.translate(centerX, centerY)
17.   // 应用旋转
18.   this.ctx.rotate((this.rotation % 360) * Math.PI / 180)
19.   
20.   // 绘制转盘扇形
21.   const anglePerPrize = 2 * Math.PI / this.prizes.length
22.   for (let i = 0; i < this.prizes.length; i++) {
23.     const startAngle = i * anglePerPrize
24.     const endAngle = (i + 1) * anglePerPrize
25.    
26.     this.ctx.beginPath()
27.     this.ctx.moveTo(0, 0)
28.     this.ctx.arc(0, 0, radius, startAngle, endAngle)
29.     this.ctx.closePath()
30.    
31.     // 填充扇形
32.     this.ctx.fillStyle = this.prizes[i].color
33.     this.ctx.fill()
34.    
35.     // 绘制边框
36.     this.ctx.strokeStyle = "#FFFFFF"
37.     this.ctx.lineWidth = 2
38.     this.ctx.stroke()
39.   }
40.   
41.   // 恢复状态
42.   this.ctx.restore()
43. }

复制代码

这段代码实现了基本的转盘绘制：

• 计算中心点和半径
  
• 清除画布
  
• 平移坐标系到转盘中心
  
• 应用旋转角度
  
• 绘制每个奖品的扇形区域
  

运行后，你应该能看到一个彩色的转盘，但还没有文字和指针。
6. 添加奖品文字

继续完善drawWheel方法，添加奖品文字：

1. // 绘制转盘扇形
2. const anglePerPrize = 2 * Math.PI / this.prizes.length
3. for (let i = 0; i < this.prizes.length; i++) {
4.   // ...之前的扇形绘制代码
5.   
6.   // 绘制文字
7.   this.ctx.save()
8.   this.ctx.rotate(startAngle + anglePerPrize / 2)
9.   this.ctx.textAlign = 'center'
10.   this.ctx.textBaseline = 'middle'
11.   this.ctx.fillStyle = '#333333'
12.   this.ctx.font = '24px sans-serif'
13.   
14.   // 旋转文字，使其可读性更好
15.   // 第一象限和第四象限的文字需要额外旋转180度，保证文字朝向
16.   const needRotate = (i >= this.prizes.length / 4) && (i < this.prizes.length * 3 / 4)
17.   if (needRotate) {
18.     this.ctx.rotate(Math.PI)
19.     this.ctx.fillText(this.prizes[i].name, -radius * 0.6, 0, radius * 0.5)
20.   } else {
21.     this.ctx.fillText(this.prizes[i].name, radius * 0.6, 0, radius * 0.5)
22.   }
23.   
24.   this.ctx.restore()
25. }

复制代码

这里我们在每个扇形区域添加了奖品文字，并根据位置进行适当旋转，确保文字朝向正确，提高可读性。
7. 添加中心圆盘和指针

继续完善drawWheel方法，添加中心圆盘和指针：

1. // 恢复状态
2. this.ctx.restore()
4. // 绘制中心圆盘
5. this.ctx.beginPath()
6. this.ctx.arc(centerX, centerY, radius * 0.2, 0, 2 * Math.PI)
7. this.ctx.fillStyle = '#FF8787'
8. this.ctx.fill()
9. this.ctx.strokeStyle = '#FFFFFF'
10. this.ctx.lineWidth = 3
11. this.ctx.stroke()
13. // 绘制指针 - 固定在顶部中央
14. this.ctx.beginPath()
15. // 三角形指针
16. this.ctx.moveTo(centerX, centerY - radius - 10)
17. this.ctx.lineTo(centerX - 15, centerY - radius * 0.8)
18. this.ctx.lineTo(centerX + 15, centerY - radius * 0.8)
19. this.ctx.closePath()
20. this.ctx.fillStyle = '#FF6B6B'
21. this.ctx.fill()
22. this.ctx.strokeStyle = '#FFFFFF'
23. this.ctx.lineWidth = 2
24. this.ctx.stroke()
26. // 绘制中心文字
27. this.ctx.textAlign = 'center'
28. this.ctx.textBaseline = 'middle'
29. this.ctx.fillStyle = '#FFFFFF'
30. this.ctx.font = '18px sans-serif'
32. // 绘制两行文字
33. this.ctx.fillText('开始', centerX, centerY - 10)
34. this.ctx.fillText('抽奖', centerX, centerY + 10)

复制代码

这段代码添加了：

• 中心的红色圆盘
  
• 顶部的三角形指针
  
• 中心的"开始抽奖"文字
  

现在转盘的静态部分已经完成。下一步，我们将实现转盘的旋转动画。
8. 实现抽奖逻辑

在实现转盘旋转前，我们需要先实现抽奖逻辑，决定最终奖品：

1. // 生成随机目标索引(基于概率权重)
2. private generateTargetIndex(): number {
3.   const weights = this.prizes.map(prize => prize.probability)
4.   const totalWeight = weights.reduce((a, b) => a + b, 0)
5.   const random = Math.random() * totalWeight
6.   
7.   let currentWeight = 0
8.   for (let i = 0; i < weights.length; i++) {
9.     currentWeight += weights[i]
10.     if (random < currentWeight) {
11.       return i
12.     }
13.   }
14.   return 0
15. }

复制代码

这个方法根据每个奖品的概率权重生成一个随机索引，概率越高的奖品被选中的机会越大。
9. 实现转盘旋转

现在，让我们实现转盘旋转的核心逻辑：

1. // 转盘属性
2. private spinDuration: number = 4000 // 旋转持续时间(毫秒)
3. private targetIndex: number = 0 // 目标奖品索引
4. private spinTimer: number = 0 // 旋转定时器
6. // 开始抽奖
7. private startSpin(): void {
8.   if (this.isSpinning) return
9.   
10.   this.isSpinning = true
11.   this.result = '抽奖中...'
12.   
13.   // 生成目标奖品索引
14.   this.targetIndex = this.generateTargetIndex()
15.   
16.   console.info(`抽中奖品索引: ${this.targetIndex}, 名称: ${this.prizes[this.targetIndex].name}`)
17.   
18.   // 计算目标角度
19.   // 每个奖品占据的角度 = 360 / 奖品数量
20.   const anglePerPrize = 360 / this.prizes.length
21.   
22.   // 因为Canvas中0度是在右侧，顺时针旋转，而指针在顶部(270度位置)
23.   // 所以需要将奖品旋转到270度位置对应的角度
24.   // 目标奖品中心点的角度 = 索引 * 每份角度 + 半份角度
25.   const prizeAngle = this.targetIndex * anglePerPrize + anglePerPrize / 2
26.   
27.   // 需要旋转到270度位置的角度 = 270 - 奖品角度
28.   // 但由于旋转方向是顺时针，所以需要计算为正向旋转角度
29.   const targetAngle = (270 - prizeAngle + 360) % 360
30.   
31.   // 获取当前角度的标准化值(0-360范围内)
32.   const currentRotation = this.rotation % 360
33.   
34.   // 计算从当前位置到目标位置需要旋转的角度(确保是顺时针旋转)
35.   let deltaAngle = targetAngle - currentRotation
36.   if (deltaAngle <= 0) {
37.     deltaAngle += 360
38.   }
39.   
40.   // 最终旋转角度 = 当前角度 + 5圈 + 到目标的角度差
41.   const finalRotation = this.rotation + 360 * 5 + deltaAngle
42.   
43.   console.info(`当前角度: ${currentRotation}°, 奖品角度: ${prizeAngle}°, 目标角度: ${targetAngle}°, 旋转量: ${deltaAngle}°, 最终角度: ${finalRotation}°`)
44.   
45.   // 使用基于帧动画的方式旋转，确保视觉上平滑旋转
46.   let startTime = Date.now()
47.   let initialRotation = this.rotation
48.   
49.   // 清除可能存在的定时器
50.   if (this.spinTimer) {
51.     clearInterval(this.spinTimer)
52.   }
53.   
54.   // 创建新的动画定时器
55.   this.spinTimer = setInterval(() => {
56.     const elapsed = Date.now() - startTime
57.    
58.     if (elapsed >= this.spinDuration) {
59.       // 动画结束
60.       clearInterval(this.spinTimer)
61.       this.spinTimer = 0
62.       this.rotation = finalRotation
63.       this.drawWheel()
64.       this.isSpinning = false
65.       this.result = `恭喜获得: ${this.prizes[this.targetIndex].name}`
66.       return
67.     }
68.    
69.     // 使用easeOutExpo效果：慢慢减速
70.     const progress = this.easeOutExpo(elapsed / this.spinDuration)
71.     this.rotation = initialRotation + progress * (finalRotation - initialRotation)
72.    
73.     // 重绘转盘
74.     this.drawWheel()
75.   }, 16) // 大约60fps的刷新率
76. }
78. // 缓动函数：指数减速
79. private easeOutExpo(t: number): number {
80.   return t === 1 ? 1 : 1 - Math.pow(2, -10 * t)
81. }

复制代码

这段代码实现了转盘旋转的核心逻辑：

• 根据概率生成目标奖品
  
• 计算目标奖品对应的角度
  
• 计算需要旋转的总角度（多转几圈再停在目标位置）
  
• 使用定时器实现转盘的平滑旋转
  
• 使用缓动函数实现转盘的减速效果
  
• 旋转结束后显示中奖结果
  

10. 连接按钮点击事件

现在我们需要将"开始抽奖"按钮与startSpin方法连接起来：

1. // 中央开始按钮
2. Button({ type: ButtonType.Circle }) {
3.   Text('开始\n抽奖')
4.     .fontSize(18)
5.     .fontWeight(FontWeight.Bold)
6.     .textAlign(TextAlign.Center)
7.     .fontColor(Color.White)
8. }
9. .width(80)
10. .height(80)
11. .backgroundColor('#FF6B6B')
12. .onClick(() => this.startSpin())
13. .enabled(!this.isSpinning)
14. .stateEffect(true) // 启用点击效果

复制代码

这里我们给按钮添加了onClick事件处理器，点击按钮时调用startSpin方法。同时使用enabled属性确保在转盘旋转过程中按钮不可点击。
11. 添加资源释放

为了防止内存泄漏，我们需要在页面销毁时清理定时器：

1. aboutToDisappear() {
2.   // 清理定时器
3.   if (this.spinTimer !== 0) {
4.     clearInterval(this.spinTimer)
5.     this.spinTimer = 0
6.   }
7. }

复制代码

12. 添加底部概率说明(可选)

最后，我们在页面底部添加奖品概率说明：

1. // 底部说明
2. Text('奖品说明：概率从高到低排序')
3.   .fontSize(14)
4.   .fontColor(Color.White)
5.   .opacity(0.7)
6.   .margin({ top: 20 })
8. // 概率说明
9. Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Center }) {
10.   ForEach(this.prizes, (prize: PrizesItem, index) => {
11.     Text(`${prize.name}: ${prize.probability}%`)
12.       .fontSize(12)
13.       .fontColor(Color.White)
14.       .backgroundColor(prize.color)
15.       .borderRadius(12)
16.       .padding({
17.         left: 10,
18.         right: 10,
19.         top: 4,
20.         bottom: 4
21.       })
22.       .margin(4)
23.   })
24. }
25. .width('90%')
26. .margin({ top: 10 })

复制代码

这段代码在页面底部添加了奖品概率说明，直观展示各个奖品的中奖概率。
13. 美化优化

为了让转盘更加美观，我们可以进一步优化转盘的视觉效果：

1. // 绘制转盘
2. private drawWheel(): void {
3.   // ...之前的代码
4.   
5.   // 绘制转盘外圆边框
6.   this.ctx.beginPath()
7.   this.ctx.arc(centerX, centerY, radius + 5, 0, 2 * Math.PI)
8.   this.ctx.fillStyle = '#2A2A2A'
9.   this.ctx.fill()
10.   this.ctx.strokeStyle = '#FFD700' // 金色边框
11.   this.ctx.lineWidth = 3
12.   this.ctx.stroke()
13.   
14.   // ...其余绘制代码
15.   
16.   // 给指针添加渐变色和阴影
17.   let pointerGradient = this.ctx.createLinearGradient(
18.     centerX, centerY - radius - 15,
19.     centerX, centerY - radius * 0.8
20.   )
21.   pointerGradient.addColorStop(0, '#FF0000')
22.   pointerGradient.addColorStop(1, '#FF6666')
23.   this.ctx.fillStyle = pointerGradient
24.   this.ctx.fill()
25.   
26.   this.ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'
27.   this.ctx.shadowBlur = 5
28.   this.ctx.shadowOffsetX = 2
29.   this.ctx.shadowOffsetY = 2
30.   
31.   // ...其余代码
32. }

复制代码

完整代码

以下是完整的实现代码：

1. interface PrizesItem {
2.   name: string // 奖品名称
3.   color: string // 转盘颜色
4.   probability: number // 概率权重
5. }
7. @Entry
8. @Component
9. struct Index {
10.   // Canvas 相关设置
11.   private readonly settings: RenderingContextSettings = new RenderingContextSettings(true); // 启用抗锯齿
12.   private readonly ctx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
13.   // 奖品数据
14.   private prizes: PrizesItem[] = [
15.     { name: '谢谢参与', color: '#FFD8A8', probability: 30 },
16.     { name: '10积分', color: '#B2F2BB', probability: 20 },
17.     { name: '5元红包', color: '#D0BFFF', probability: 1 },
18.     { name: '优惠券', color: '#A5D8FF', probability: 15 },
19.     { name: '免单券', color: '#FCCFE7', probability: 5 },
20.     { name: '50积分', color: '#BAC8FF', probability: 15 },
21.     { name: '会员月卡', color: '#99E9F2', probability: 3 },
22.     { name: '1元红包', color: '#FFBDBD', probability: 2 }
23.   ]
24.   // 转盘属性
25.   @State isSpinning: boolean = false // 是否正在旋转
26.   @State rotation: number = 0 // 当前旋转角度
27.   @State result: string = '点击开始抽奖' // 抽奖结果
28.   private spinDuration: number = 4000 // 旋转持续时间(毫秒)
29.   private targetIndex: number = 0 // 目标奖品索引
30.   private spinTimer: number = 0 // 旋转定时器
31.   private canvasWidth: number = 0 // 画布宽度
32.   private canvasHeight: number = 0 // 画布高度
34.   // 生成随机目标索引(基于概率权重)
35.   private generateTargetIndex(): number {
36.     const weights = this.prizes.map(prize => prize.probability)
37.     const totalWeight = weights.reduce((a, b) => a + b, 0)
38.     const random = Math.random() * totalWeight
40.     let currentWeight = 0
41.     for (let i = 0; i < weights.length; i++) {
42.       currentWeight += weights[i]
43.       if (random < currentWeight) {
44.         return i
45.       }
46.     }
47.     return 0
48.   }
50.   // 开始抽奖
51.   private startSpin(): void {
52.     if (this.isSpinning) {
53.       return
54.     }
56.     this.isSpinning = true
57.     this.result = '抽奖中...'
59.     // 生成目标奖品索引
60.     this.targetIndex = this.generateTargetIndex()
62.     console.info(`抽中奖品索引: ${this.targetIndex}, 名称: ${this.prizes[this.targetIndex].name}`)
64.     // 计算目标角度
65.     // 每个奖品占据的角度 = 360 / 奖品数量
66.     const anglePerPrize = 360 / this.prizes.length
68.     // 因为Canvas中0度是在右侧，顺时针旋转，而指针在顶部(270度位置)
69.     // 所以需要将奖品旋转到270度位置对应的角度
70.     // 目标奖品中心点的角度 = 索引 * 每份角度 + 半份角度
71.     const prizeAngle = this.targetIndex * anglePerPrize + anglePerPrize / 2
73.     // 需要旋转到270度位置的角度 = 270 - 奖品角度
74.     // 但由于旋转方向是顺时针，所以需要计算为正向旋转角度
75.     const targetAngle = (270 - prizeAngle + 360) % 360
77.     // 获取当前角度的标准化值(0-360范围内)
78.     const currentRotation = this.rotation % 360
80.     // 计算从当前位置到目标位置需要旋转的角度(确保是顺时针旋转)
81.     let deltaAngle = targetAngle - currentRotation
82.     if (deltaAngle <= 0) {
83.       deltaAngle += 360
84.     }
86.     // 最终旋转角度 = 当前角度 + 5圈 + 到目标的角度差
87.     const finalRotation = this.rotation + 360 * 5 + deltaAngle
89.     console.info(`当前角度: ${currentRotation}°, 奖品角度: ${prizeAngle}°, 目标角度: ${targetAngle}°, 旋转量: ${deltaAngle}°, 最终角度: ${finalRotation}°`)
91.     // 使用基于帧动画的方式旋转，确保视觉上平滑旋转
92.     let startTime = Date.now()
93.     let initialRotation = this.rotation
95.     // 清除可能存在的定时器
96.     if (this.spinTimer) {
97.       clearInterval(this.spinTimer)
98.     }
100.     // 创建新的动画定时器
101.     this.spinTimer = setInterval(() => {
102.       const elapsed = Date.now() - startTime
104.       if (elapsed >= this.spinDuration) {
105.         // 动画结束
106.         clearInterval(this.spinTimer)
107.         this.spinTimer = 0
108.         this.rotation = finalRotation
109.         this.drawWheel()
110.         this.isSpinning = false
111.         this.result = `恭喜获得: ${this.prizes[this.targetIndex].name}`
112.         return
113.       }
115.       // 使用easeOutExpo效果：慢慢减速
116.       const progress = this.easeOutExpo(elapsed / this.spinDuration)
117.       this.rotation = initialRotation + progress * (finalRotation - initialRotation)
119.       // 重绘转盘
120.       this.drawWheel()
121.     }, 16) // 大约60fps的刷新率
122.   }
124.   // 缓动函数：指数减速
125.   private easeOutExpo(t: number): number {
126.     return t === 1 ? 1 : 1 - Math.pow(2, -10 * t)
127.   }
129.   // 绘制转盘
130.   private drawWheel(): void {
131.     if (!this.ctx) {
132.       return
133.     }
135.     const centerX = this.canvasWidth / 2
136.     const centerY = this.canvasHeight / 2
137.     const radius = Math.min(centerX, centerY) * 0.85
139.     // 清除画布
140.     this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
142.     // 保存当前状态
143.     this.ctx.save()
145.     // 移动到中心点
146.     this.ctx.translate(centerX, centerY)
147.     // 应用旋转
148.     this.ctx.rotate((this.rotation % 360) * Math.PI / 180)
150.     // 绘制转盘扇形
151.     const anglePerPrize = 2 * Math.PI / this.prizes.length
152.     for (let i = 0; i < this.prizes.length; i++) {
153.       const startAngle = i * anglePerPrize
154.       const endAngle = (i + 1) * anglePerPrize
156.       this.ctx.beginPath()
157.       this.ctx.moveTo(0, 0)
158.       this.ctx.arc(0, 0, radius, startAngle, endAngle)
159.       this.ctx.closePath()
161.       // 填充扇形
162.       this.ctx.fillStyle = this.prizes[i].color
163.       this.ctx.fill()
165.       // 绘制边框
166.       this.ctx.strokeStyle = "#FFFFFF"
167.       this.ctx.lineWidth = 2
168.       this.ctx.stroke()
170.       // 绘制文字
171.       this.ctx.save()
172.       this.ctx.rotate(startAngle + anglePerPrize / 2)
173.       this.ctx.textAlign = 'center'
174.       this.ctx.textBaseline = 'middle'
175.       this.ctx.fillStyle = '#333333'
176.       this.ctx.font = '30px'
178.       // 旋转文字，使其可读性更好
179.       // 第一象限和第四象限的文字需要额外旋转180度，保证文字朝向
180.       const needRotate = (i >= this.prizes.length / 4) && (i < this.prizes.length * 3 / 4)
181.       if (needRotate) {
182.         this.ctx.rotate(Math.PI)
183.         this.ctx.fillText(this.prizes[i].name, -radius * 0.6, 0, radius * 0.5)
184.       } else {
185.         this.ctx.fillText(this.prizes[i].name, radius * 0.6, 0, radius * 0.5)
186.       }
188.       this.ctx.restore()
189.     }
191.     // 恢复状态
192.     this.ctx.restore()
194.     // 绘制中心圆盘
195.     this.ctx.beginPath()
196.     this.ctx.arc(centerX, centerY, radius * 0.2, 0, 2 * Math.PI)
197.     this.ctx.fillStyle = '#FF8787'
198.     this.ctx.fill()
199.     this.ctx.strokeStyle = '#FFFFFF'
200.     this.ctx.lineWidth = 3
201.     this.ctx.stroke()
203.     // 绘制指针 - 固定在顶部中央
204.     this.ctx.beginPath()
205.     // 三角形指针
206.     this.ctx.moveTo(centerX, centerY - radius - 10)
207.     this.ctx.lineTo(centerX - 15, centerY - radius * 0.8)
208.     this.ctx.lineTo(centerX + 15, centerY - radius * 0.8)
209.     this.ctx.closePath()
210.     this.ctx.fillStyle = '#FF6B6B'
211.     this.ctx.fill()
212.     this.ctx.strokeStyle = '#FFFFFF'
213.     this.ctx.lineWidth = 2
214.     this.ctx.stroke()
216.     // 绘制中心文字
217.     this.ctx.textAlign = 'center'
218.     this.ctx.textBaseline = 'middle'
219.     this.ctx.fillStyle = '#FFFFFF'
220.     this.ctx.font = '18px sans-serif'
222.     // 绘制两行文字
223.     this.ctx.fillText('开始', centerX, centerY - 10)
224.     this.ctx.fillText('抽奖', centerX, centerY + 10)
225.   }
227.   aboutToDisappear() {
228.     // 清理定时器
229.     if (this.spinTimer !== 0) {
230.       clearInterval(this.spinTimer) // 改成 clearInterval
231.       this.spinTimer = 0
232.     }
233.   }
235.   build() {
236.     Column() {
237.       // 标题
238.       Text('幸运大转盘')
239.         .fontSize(28)
240.         .fontWeight(FontWeight.Bold)
241.         .fontColor(Color.White)
242.         .margin({ bottom: 20 })
244.       // 抽奖结果显示
245.       Text(this.result)
246.         .fontSize(20)
247.         .fontColor(Color.White)
248.         .backgroundColor('#1AFFFFFF')
249.         .width('90%')
250.         .textAlign(TextAlign.Center)
251.         .padding(15)
252.         .borderRadius(16)
253.         .margin({ bottom: 30 })
255.       // 转盘容器
256.       Stack({ alignContent: Alignment.Center }) {
257.         // 使用Canvas绘制转盘
258.         Canvas(this.ctx)
259.           .width('100%')
260.           .height('100%')
261.           .onReady(() => {
262.             // 获取Canvas尺寸
263.             this.canvasWidth = this.ctx.width
264.             this.canvasHeight = this.ctx.height
265.             // 初始绘制转盘
266.             this.drawWheel()
267.           })
269.         // 中央开始按钮
270.         Button({ type: ButtonType.Circle }) {
271.           Text('开始\n抽奖')
272.             .fontSize(18)
273.             .fontWeight(FontWeight.Bold)
274.             .textAlign(TextAlign.Center)
275.             .fontColor(Color.White)
276.         }
277.         .width(80)
278.         .height(80)
279.         .backgroundColor('#FF6B6B')
280.         .onClick(() => this.startSpin())
281.         .enabled(!this.isSpinning)
282.         .stateEffect(true) // 启用点击效果
283.       }
284.       .width('90%')
285.       .aspectRatio(1)
286.       .backgroundColor('#0DFFFFFF')
287.       .borderRadius(16)
288.       .padding(15)
290.       // 底部说明
291.       Text('奖品概率说明')
292.         .fontSize(14)
293.         .fontColor(Color.White)
294.         .opacity(0.7)
295.         .margin({ top: 20 })
297.       // 概率说明
298.       Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Center }) {
299.         ForEach(this.prizes, (prize: PrizesItem) => {
300.           Text(`${prize.name}: ${prize.probability}%`)
301.             .fontSize(12)
302.             .fontColor(Color.White)
303.             .backgroundColor(prize.color)
304.             .borderRadius(12)
305.             .padding({
306.               left: 10,
307.               right: 10,
308.               top: 4,
309.               bottom: 4
310.             })
311.             .margin(4)
312.         })
313.       }
314.       .width('90%')
315.       .margin({ top: 10 })
316.     }
317.     .width('100%')
318.     .height('100%')
319.     .justifyContent(FlexAlign.Center)
320.     .backgroundColor(Color.Black)
321.     .linearGradient({
322.       angle: 135,
323.       colors: [
324.         ['#1A1B25', 0],
325.         ['#2D2E3A', 1]
326.       ]
327.     })
328.     .expandSafeArea()
329.   }
330. }

复制代码

总结

本教程对 Canvas 的使用有一定难度，建议先点赞收藏。

这个幸运大转盘效果包含以下知识点：

• 使用Canvas绘制转盘，支持自定义奖品数量和概率
  
• 平滑的旋转动画和减速效果
  
• 基于概率权重的抽奖算法
  
• 美观的UI设计和交互效果
  

在实际应用中，你还可以进一步扩展这个组件：

• 添加音效
  
• 实现3D效果
  
• 添加中奖历史记录
  
• 连接后端API获取真实抽奖结果
  
• 添加抽奖次数限制
  

希望这篇 HarmonyOS Next 教程对你有所帮助，期待您的点赞、评论、收藏。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！