OpenHarmony ArkUI+原生绘图之幸运大转盘

效果展示

此外，转盘的奖项的数量，内容都是可以变动的(菜单就是用来编辑奖项的，后续完善)，如下：

主要功能

1. 实现转盘抽奖功能，可以设定中奖概率。
2. 奖项的数量、内容可自由设定。
3. 原生html\css\js代码，没有使用资源文件，可复用。

设计时考虑到的问题

1.控件是使用现有图片还是通过CSS画出?

先是用的图片充当控件，考虑到奖项的内容可编辑性，还是老老实实画控件比较好。

2.每个奖项的概率如何设计?

先生成一个随机数，根据随机数取值大小，决定奖品内容。假设所有奖项的取值范围坐落到0100的数轴上，并且1号奖品的取值范围是010，2号：10~30， 3号：30~35，。。。通过设定每个奖项取值区间的大小来决定中奖的权重，这样就能控制中奖概率了。

3.如何实现奖项可编辑?

我将所有奖项存放在一个数据数组中，先能通过遍历数组中奖项信息，画出转盘，这是第一步。

之后，通过菜单功能提供一个列表控件，使其能够对数组中的信息进行增删改查，这是第二步。

在界面加载的onShow()函数中进行初始化，这样每次界面显示的时候就能更新转盘了。

具体代码

index.hml

1. "container">
2. "title"> 幸运大转盘
3. "outer" id="outer">
4. --画布-->
5. "canvas" class="canvas">
6. --内圆-->
7. "circle">
8. --长方形-->
9. "rectangle">
10. --正方形箭头-->
11. "square">
13. "btns">
14. "button" type="capsule" onclick="start"> 抽奖
15. "button" type="capsule" onclick="menu"> 菜单

outer就是转盘整体，包含转盘和箭头。我箭头是通过将圆+长方形+正方形平移、旋转组合而成的(虽然有点笨，没有想到其它办法)。转盘是一个画布canvas，通过移动画笔起点，旋转，一个扇区接一个扇区画出的。按键有两个，抽奖就是转动转盘，实现抽奖逻辑。菜单按键跳转到新的界面，实现奖项内容的编辑，当然还没写完。。。 

index.css

1. .container {
2. flex-direction: column;
3. align-items: center;
4. justify-content: space-between;
5. }
7. .title {
8. font-size: 38px;
9. font-weight: 600;
10. height: 20%;
11. }
13. .outer {
14. position: relative;
15. }
17. .canvas {
18. width: 360px;
19. height: 400px;
20. }
22. .circle {
23. position: absolute;
24. width: 40px;
25. height: 40px;
26. background-color: darkred;
27. border-radius: 20px;
28. transform: translate(160px,180px);
29. }
31. .rectangle {
32. position: absolute;
33. width: 20px;
34. height: 40px;
35. background-color: darkred;
36. transform: translate(170px,150px);
37. }
39. .square {
40. position:absolute;
41. width: 20px;
42. height: 20px;
43. background-color: darkred;
44. top: 140px;
45. left: 170px;
46. transform: rotate(45deg);
47. }
49. .btns {
50. justify-content:space-around;
51. }
53. .button{
54. margin-top: 10%;
55. height: 10%;
56. font-size: 30px;
57. font-weight: 600;
58. }

canvas中的宽、高决定了转盘大小，代码中将转盘的半径设置为画布一半宽的长度。同时，由于箭头是由圆、长方形、正方形平移旋转组成，那他们的偏移量、大小也是相对.canvas的属性取的，如果大小有变动需要调整。

为什么不将箭头也画出来?

如果将箭头也画在画布上，那么我不能实现转盘转动，箭头不动的动画了，画布是一个整体。

index.js

1. import prompt from '@system.prompt';
2. import router from '@system.router';
4. export default {
5. data: {
6. //1.1创建奖项信息
7. infoArr: [
8. { name: '1号奖品' },
9. { name: '2号奖品' },
10. { name: '3号奖品' },
11. { name: '4号奖品' },
12. { name: '5号奖品' },
13. { name: '6号奖品' },
14. { name: '7号奖品' },
15. { name: '未中奖' },
16. ],
17. //1.2画布大小
18. circleHeight: 400,
19. circleWidth: 360,
20. //1.3扇区弧度
21. arcAngle: 0,
22. //1.4扇区角度
23. jiaoDu: 0,
24. //1.4动画参数
25. animation: '',
26. options: {
27. duration: 5000,
28. fill: 'forwards',
29. easing: 'cubic-bezier(.2,.93,.43,1);',
30. },
31. },
33. onShow() {
34. const ca = this.$element('canvas');
35. const ctx = ca.getContext('2d');
37. //2.设定参数
38. //2.1定义圆心,显示在画布中间
39. var x0 = this.circleWidth * 0.5;
40. var y0 = this.circleHeight * 0.5;
41. //2.2定义半径
42. var radius = this.circleWidth * 0.5;
43. //2.3扇形弧度
44. this.arcAngle = 360 / this.infoArr.length * Math.PI / 180;
45. //2.4扇区角度
46. this.jiaoDu = 360 / this.infoArr.length;
47. //2.5定义起始弧度,箭头向上,初始度数需要-90deg
48. var beginAngle = this.arcAngle * 0.5 - 90 * Math.PI / 180;
50. //3.遍历,绘制扇区
51. for (var i = 0; i < this.infoArr.length; i++) {
52. //3.1结束弧度
53. var endAngle = beginAngle + this.arcAngle;
54. //3.2开启路径
55. ctx.beginPath();
56. //3.3起点
57. ctx.moveTo(x0, y0);
58. //3.4绘制扇区
59. ctx.arc(x0, y0, radius, beginAngle, endAngle);
60. //3.5设置颜色
61. if (i == this.infoArr.length - 1) {
62. ctx.fillStyle = '#2f4f4f'; //未中奖灰色
63. } else if (i % 2) {
64. ctx.fillStyle = '#ffa500';
65. } else {
66. ctx.fillStyle = '#ff4500';
67. }
68. //3.6填充颜色
69. ctx.fill();
71. //4.绘制文字
72. //4.1文字弧度
73. var textAngle = beginAngle + this.arcAngle * 0.5;
74. var text = this.infoArr[i].name;
75. //4.2文字坐标
76. var textX = x0 + (radius * 2 / 3) * Math.cos(textAngle);
77. var textY = y0 + (radius * 2 / 3) * Math.sin(textAngle);
78. //4.3平移画布起点到文字位置
79. ctx.translate(textX, textY);
80. //4.4旋转画布
81. ctx.rotate((this.jiaoDu * (i + 1) - 90) * Math.PI / 180);
82. //4.5设置文字字号和字体
83. ctx.font = "25px '微软雅黑'";
84. //4.6文字居中对齐
85. ctx.textAlign = 'center';
86. ctx.textBaseline = 'middle';
87. //4.7绘制文字
88. ctx.strokeText(text, 0, 0);
89. //4.8还原旋转、平移,方便下次旋转
90. ctx.rotate(-(this.jiaoDu * (i + 1) - 90) * Math.PI / 180);
91. ctx.translate(-textX, -textY);
93. //5.更新起始弧度, 将当前扇形的结束弧度作为下一个扇形的起始弧度
94. beginAngle = endAngle;
95. }
96. },
98. start: function () {
99. //6.旋转事件
100. //6.1奖品总数
101. let count = this.infoArr.length;
102. //6.2生成随机数
103. let randomNum = Math.floor(Math.random() * count);
104. //6.3转动角度(+ 360*3)
105. let deg = randomNum * this.jiaoDu + 360 * 3 + "deg";
106. //6.4奖品名
107. let index = count - randomNum - 1;
108. let name = this.infoArr[index].name;
109. console.log("name == " + name);
110. //6.5动画帧
111. var frames = [
112. {
113. transform: {
114. rotate: '0deg'
115. },
116. },
117. {
118. transform: {
119. rotate: deg
120. },
121. }
122. ];
123. //6.5动画绑定
124. this.animation = this.$element('canvas').animate(frames, this.options);
125. //6.6添加完成事件
126. this.animation.onfinish = function () {
127. if (randomNum % count) {
128. prompt.showDialog({
129. message: "恭喜抽中" + name + "!"
130. });
131. } else {
132. prompt.showDialog({
133. message: "下次再来！"
134. });
135. }
136. };
137. //6.7调用播放开始的方法
138. this.animation.play();
139. },
141. menu: function () {
142. router.push ({
143. uri: 'pages/menuPage/menuPage',
144. });
145. },
146. }

js中存放主要逻辑，所以对注释也比较详细。下面是个人踩坑中学习的点：

1. //1.1创建奖项信息
2. 可以增加减少奖项来预览将要实现的菜单功能，不要搞事情哈，奖项至少为1，代码中没有除0保护。
3. //1.4动画参数
4. duration是时长。easing，是描述动画的时间曲线，实现动画由快变慢。fill：forwards在动画结束后，目标将保留动画结束时的状态。
5. //3.4绘制扇区
6. x0, y0,扇区的起点坐标。radius,扇区半径。beginAngle,扇区起始的弧度，endAngle，扇区结束的弧度。
7. //3.5设置颜色
8. 每个扇区设置两个相间的颜色，未中奖特殊扇区用灰色调标识。
9. //4.2文字坐标
10. 由于文字在扇区中间，所以需要利用正弦余弦计算坐标，再进行画面旋转，才能调整正确的文字方向。
11. //4.8还原旋转、平移,方便下次旋转
12. translate函数是基于当前坐标进行偏移，旋转也是基于当前坐标进行旋转。所以当一个扇区的文字填写结束后，需要将坐标还原，这样才方便定位到一下处扇区位置。

原文链接： https://harmonyos.51cto.com