introduce
This codelab is a custom lottery round turntable based on canvas components and explicit animation. Contains the following functions:
1. Use the canvas component Canvas to draw the lottery round turntable.
2. Start the lottery function through explicit animation.
3. Pop up the prizes won through a customized pop-up window.
Related concepts
● Stack component: stacking container, sub-components are pushed onto the stack in order, and the latter sub-component covers the previous sub-component.
● Canvas: Canvas component, used for custom drawing graphics.
● CanvasRenderingContext2D object: Use RenderingContext to draw on the Canvas component. The drawing object can be a rectangle, text, picture, etc.
● Explicit animation: Provides the global animateTo explicit animation interface to specify the state change caused by the closure code to insert transition animation.
● Custom pop-up window: Display custom pop-up window through CustomDialogController class.
Complete example
Source code download
Custom lottery wheel (ArkTS).zip
Environment setup
We first need to complete the establishment of the HarmonyOS development environment. Please refer to the following steps.
Software requirements
● DevEco Studio版本：DevEco Studio 3.1 Release。
● HarmonyOS SDKVersion: API version 9.
Hardware requirements
● Device type: Huawei mobile phone or Huawei mobile phone device simulator running on DevEco Studio.
● HarmonyOS system: 3.1.0 Developer Release.
Environment setup
1. Install DevEco Studio. For details, please refer toDownload and install the software.
2. Set up the DevEco Studio development environment. The DevEco Studio development environment depends on the network environment. You need to be connected to the network to ensure the normal use of the tool. You can configure the development environment according to the following two situations: If you can directly access the Internet , just download the HarmonyOS SDK.
a. If the network cannot directly access the Internet and needs to be accessed through a proxy server, please refer to Configuring the Development Environment.
3. Developers can refer to the following link to complete the relevant configuration for device debugging:Use a real device for debugging
a. Use the simulator for debugging
Interpretation of code structure
This codelab only explains the core code. For the complete code, we will provide it in the source code download or gitee.
├──entry/src/main/ets // 代码区
│ ├──common
│ │ ├──constants
│ │ │ ├──ColorConstants.ets // 颜色常量类
│ │ │ ├──CommonConstants.ets // 公共常量类
│ │ │ └──StyleConstants.ets // 样式常量类
│ │ └──utils
│ │ ├──CheckEmptyUtils.ets // 数据判空工具类
│ │ └──Logger.ets // 日志打印类
│ ├──entryability
│ │ └──EntryAbility.ts // 程序入口类
│ ├──pages
│ │ └──CanvasPage.ets // 主界面
│ ├──view
│ │ └──PrizeDialog.ets // 中奖信息弹窗类
│ └──viewmodel
│ ├──DrawModel.ets // 画布相关方法类
│ ├──FillArcData.ets // 绘制圆弧数据实体类
│ └──PrizeData.ets // 中奖信息实体类
└──entry/src/main/resources // 资源文件目录
Build the main interface
In this chapter, we will complete the development of the sample main interface, as shown in the figure:
Before drawing the lottery round wheel, you first need to obtain the width and height of the screen in the aboutToAppear method of CanvasPage.ets.
// CanvasPage.ets
// 获取context
let context = getContext(this);
aboutToAppear() {
// 获取屏幕的宽高
window.getLastWindow(context)
.then((windowClass: window.Window) => {
let windowProperties = windowClass.getWindowProperties();
this.screenWidth = px2vp(windowProperties.windowRect.width);
this.screenHeight = px2vp(windowProperties.windowRect.height);
})
.catch((error: Error) => {
Logger.error('Failed to obtain the window size. Cause: ' + JSON.stringify(error));
})
}Add the Canvas component to the CanvasPage.ets layout interface and draw in the onReady method.
// CanvasPage.ets
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private canvasContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
Stack({ alignContent: Alignment.Center }) {
Canvas(this.canvasContext)
...
.onReady(() => {
// 通过draw方法进行绘制
this.drawModel.draw(this.canvasContext, this.screenWidth, this.screenHeight);
})
// 开始抽奖图片
Image($r('app.media.ic_center'))
...
}
...In DrawModel.ets, draw the custom circular lottery wheel step by step through the draw method.
// DrawModel.ets
// 画抽奖圆形转盘
draw(canvasContext: CanvasRenderingContext2D, screenWidth: number, screenHeight: number) {
if (CheckEmptyUtils.isEmptyObj(canvasContext)) {
Logger.error('[DrawModel][draw] canvasContext is empty.');
return;
}
this.canvasContext= canvasContext;
this.screenWidth = screenWidth;
this.canvasContext.clearRect(0, 0, this.screenWidth, screenHeight);
// 将画布沿X、Y轴平移指定距离
this.canvasContext.translate(this.screenWidth / CommonConstants.TWO,
screenHeight / CommonConstants.TWO);
// 画外部圆盘的花瓣
this.drawFlower();
// 画外部圆盘、小圈圈
this.drawOutCircle();
// 画内部圆盘
this.drawInnerCircle();
// 画内部扇形抽奖区域
this.drawInnerArc();
// 画内部扇形区域文字
this.drawArcText();
// 画内部扇形区域奖品对应的图片
this.drawImage();
this.canvasContext.translate(-this.screenWidth / CommonConstants.TWO,
-screenHeight / CommonConstants.TWO);
}Draw the outer disk
Draw the petals of the outer disk: Rotate the canvas by a specified angle by calling the rotate() method. Then by calling the save() and restore() methods,
Causes the canvas to save the latest drawing state. According to the number of petals you want to draw, change the rotation angle and draw the petal effect in a loop.
// DrawModel.ets
// 画外部圆盘的花瓣
drawFlower() {
let beginAngle = this.startAngle + this.avgAngle;
const pointY = this.screenWidth * CommonConstants.FLOWER_POINT_Y_RATIOS;
const radius = this.screenWidth * CommonConstants.FLOWER_RADIUS_RATIOS;
const innerRadius = this.screenWidth * CommonConstants.FLOWER_INNER_RATIOS;
for (let i = 0; i < CommonConstants.COUNT; i++) {
this.canvasContext?.save();
this.canvasContext?.rotate(beginAngle * Math.PI / CommonConstants.HALF_CIRCLE);
this.fillArc(new FillArcData(0, -pointY, radius, 0, Math.PI * CommonConstants.TWO),
ColorConstants.FLOWER_OUT_COLOR);
this.fillArc(new FillArcData(0, -pointY, innerRadius, 0, Math.PI * CommonConstants.TWO),
ColorConstants.FLOWER_INNER_COLOR);
beginAngle += this.avgAngle;
this.canvasContext?.restore();
}
}
// 画弧线方法
fillArc(fillArcData: FillArcData, fillColor: string) {
if (CheckEmptyUtils.isEmptyObj(fillArcData) || CheckEmptyUtils.isEmptyStr(fillColor)) {
Logger.error('[DrawModel][fillArc] fillArcData or fillColor is empty.');
return;
}
if (this.canvasContext !== undefined) {
this.canvasContext.beginPath();
this.canvasContext.fillStyle = fillColor;
this.canvasContext.arc(fillArcData.x, fillArcData.y, fillArcData.radius,
fillArcData.startAngle, fillArcData.endAngle);
this.canvasContext.fill();
}
}Draw an outer disk and a small circle on the edge of the disk: at the specified X, Y (0, 0) coordinates, draw a circle with a radius of this.screenWidth * CommonConstants.OUT_CIRCLE_RATIOS. Next, a for loop is used, and the angle is incremented by CommonConstants.CIRCLE / CommonConstants.SMALL_CIRCLE_COUNT each time to draw small circles on the ring.
// DrawModel.ets
drawOutCircle() {
// 画外部圆盘
this.fillArc(new FillArcData(0, 0, this.screenWidth * CommonConstants.OUT_CIRCLE_RATIOS, 0,
Math.PI * CommonConstants.TWO), ColorConstants.OUT_CIRCLE_COLOR);
let beginAngle = this.startAngle;
// 画小圆圈
for (let i = 0; i < CommonConstants.SMALL_CIRCLE_COUNT; i++) {
this.canvasContext?.save();
this.canvasContext?.rotate(beginAngle * Math.PI / CommonConstants.HALF_CIRCLE);
this.fillArc(new FillArcData(this.screenWidth * CommonConstants.SMALL_CIRCLE_RATIOS, 0,
CommonConstants.SMALL_CIRCLE_RADIUS, 0, Math.PI * CommonConstants.TWO),
ColorConstants.WHITE_COLOR);
beginAngle = beginAngle + CommonConstants.CIRCLE / CommonConstants.SMALL_CIRCLE_COUNT;
this.canvasContext?.restore();
}
}Draw an internal fan-shaped lottery area
Draw the inner disk and the inner fan-shaped draw area: use the fillArc method to draw the inner disk. Through a for loop, the angle increments this.avgAngle each time. Then continuously change the starting arc of the arc this.startAngle * Math.PI / CommonConstants.HALF_CIRCLE and the ending arc of the arc (this.startAngle + this.avgAngle) * Math.PI / CommonConstants.HALF_CIRCLE. Finally, use the fill() method to fill the path.
// DrawModel.ets
// 画内部圆盘
drawInnerCircle() {
this.fillArc(new FillArcData(0, 0, this.screenWidth * CommonConstants.INNER_CIRCLE_RATIOS, 0,
Math.PI * CommonConstants.TWO), ColorConstants.INNER_CIRCLE_COLOR);
this.fillArc(new FillArcData(0, 0, this.screenWidth * CommonConstants.INNER_WHITE_CIRCLE_RATIOS, 0,
Math.PI * CommonConstants.TWO), ColorConstants.WHITE_COLOR);
}
// 画内部扇形抽奖区域
drawInnerArc() {
// 颜色集合
let colors = [
ColorConstants.ARC_PINK_COLOR, ColorConstants.ARC_YELLOW_COLOR,
ColorConstants.ARC_GREEN_COLOR, ColorConstants.ARC_PINK_COLOR,
ColorConstants.ARC_YELLOW_COLOR, ColorConstants.ARC_GREEN_COLOR
];
let radius = this.screenWidth * CommonConstants.INNER_ARC_RATIOS;
for (let i = 0; i < CommonConstants.COUNT; i++) {
this.fillArc(new FillArcData(0, 0, radius, this.startAngle * Math.PI / CommonConstants.HALF_CIRCLE,
(this.startAngle + this.avgAngle) * Math.PI / CommonConstants.HALF_CIRCLE), colors[i]);
this.canvasContext?.lineTo(0, 0);
this.canvasContext?.fill();
this.startAngle += this.avgAngle;
}
}Draw the text in the internal lottery area: use a for loop to draw each group of text through the drawCircularText() method. The drawCircularText() method receives three parameters, which are strings, starting radians and ending radians. Before drawing text, you need to set the arc angleDecrement occupied by each letter, and then set the horizontal and vertical offsets. The vertical offset circleText.y - Math.sin(angle) * radius is the distance moved towards the center of the circle; the horizontal offset circleText.x + Math.cos(angle) * radius is to center the text within the current arc range. . Finally, use the fillText method to draw the text.
// DrawModel.ets
// 画内部扇形区域文字
drawArcText() {
if (this.canvasContext !== undefined) {
this.canvasContext.textAlign = CommonConstants.TEXT_ALIGN;
this.canvasContext.textBaseline = CommonConstants.TEXT_BASE_LINE;
this.canvasContext.fillStyle = ColorConstants.TEXT_COLOR;
this.canvasContext.font = StyleConstants.ARC_TEXT_SIZE + CommonConstants.CANVAS_FONT;
}
// 需要绘制的文本数组集合
let textArrays = [
$r('app.string.text_smile'),
$r('app.string.text_hamburger'),
$r('app.string.text_cake'),
$r('app.string.text_smile'),
$r('app.string.text_beer'),
$r('app.string.text_watermelon')
];
let arcTextStartAngle = CommonConstants.ARC_START_ANGLE;
let arcTextEndAngle = CommonConstants.ARC_END_ANGLE;
for (let i = 0; i < CommonConstants.COUNT; i++) {
this.drawCircularText(this.getResourceString(textArrays[i]),
(this.startAngle + arcTextStartAngle) * Math.PI / CommonConstants.HALF_CIRCLE,
(this.startAngle + arcTextEndAngle) * Math.PI / CommonConstants.HALF_CIRCLE);
this.startAngle += this.avgAngle;
}
}
// 绘制圆弧文本
drawCircularText(textString: string, startAngle: number, endAngle: number) {
if (CheckEmptyUtils.isEmptyStr(textString)) {
Logger.error('[DrawModel][drawCircularText] textString is empty.');
return;
}
class CircleText {
x: number = 0;
y: number = 0;
radius: number = 0;
};
let circleText: CircleText = {
x: 0,
y: 0,
radius: this.screenWidth * CommonConstants.INNER_ARC_RATIOS
};
// 圆的半径
let radius = circleText.radius - circleText.radius / CommonConstants.COUNT;
// 每个字母占的弧度
let angleDecrement = (startAngle - endAngle) / (textString.length - 1);
let angle = startAngle;
let index = 0;
let character: string;
while (index < textString.length) {
character = textString.charAt(index);
this.canvasContext?.save();
this.canvasContext?.beginPath();
this.canvasContext?.translate(circleText.x + Math.cos(angle) * radius,
circleText.y - Math.sin(angle) * radius);
this.canvasContext?.rotate(Math.PI / CommonConstants.TWO - angle);
this.canvasContext?.fillText(character, 0, 0);
angle -= angleDecrement;
index++;
this.canvasContext?.restore();
}
}Draw an image corresponding to the text in the internal lottery area: Use the drawImage method to draw an image corresponding to the text in the lottery area. This method receives five parameters, namely the image resource, the X and Y axis coordinates of the upper left corner of the drawing area, and the width and height of the drawing area.
// DrawModel.ets
// 画内部扇形区域文字对应的图片
drawImage() {
let beginAngle = this.startAngle;
let imageSrc = [
CommonConstants.WATERMELON_IMAGE_URL, CommonConstants.BEER_IMAGE_URL,
CommonConstants.SMILE_IMAGE_URL, CommonConstants.CAKE_IMAGE_URL,
CommonConstants.HAMBURG_IMAGE_URL, CommonConstants.SMILE_IMAGE_URL
];
for (let i = 0; i < CommonConstants.COUNT; i++) {
let image = new ImageBitmap(imageSrc[i]);
this.canvasContext?.save();
this.canvasContext?.rotate(beginAngle * Math.PI / CommonConstants.HALF_CIRCLE);
this.canvasContext?.drawImage(image, this.screenWidth * CommonConstants.IMAGE_DX_RATIOS,
this.screenWidth * CommonConstants.IMAGE_DY_RATIOS, CommonConstants.IMAGE_SIZE,
CommonConstants.IMAGE_SIZE);
beginAngle += this.avgAngle;
this.canvasContext?.restore();
}
}Implement lottery function
Add the rotate attribute in the Canvas component of CanvasPage.ets, and add the click event onClick in the Image component. Click the "Start Lottery" picture, and the round wheel will start spinning to draw the prize.
// CanvasPage.ets
Stack({ alignContent: Alignment.Center }) {
Canvas(this.canvasContext)
...
.onReady(() => {
this.drawModel.draw(this.canvasContext, this.screenWidth, this.screenHeight);
})
.rotate({
x: 0,
y: 0,
z: 1,
angle: this.rotateDegree,
centerX: this.screenWidth / CommonConstants.TWO,
centerY: this.screenHeight / CommonConstants.TWO
})
// 开始抽奖图片
Image($r('app.media.ic_center'))
...
.enabled(this.enableFlag)
.onClick(() => {
this.enableFlag = !this.enableFlag;
// 开始抽奖
this.startAnimator();
})
}
...
The circular turntable starts to rotate and draw a lottery: assign a random rotation angle randomAngle to the turntable to ensure that the angle of each rotation is random, that is, the prize drawn each time is also random. After the animation ends, the turntable stops rotating, the lottery ends, and the information about the prizes won pops up.
// CanvasPage.ets
dialogController: CustomDialogController = new CustomDialogController({
builder: PrizeDialog({
prizeData: $prizeData,
enableFlag: $enableFlag
}),
autoCancel: false
});
// 开始抽奖
startAnimator() {
let randomAngle = Math.round(Math.random() * CommonConstants.CIRCLE);
// 获取中奖信息
this.prizeData = this.drawModel.showPrizeData(randomAngle);
animateTo({
duration: CommonConstants.DURATION,
curve: Curve.Ease,
delay: 0,
iterations: 1,
playMode: PlayMode.Normal,
onFinish: () => {
this.rotateDegree = CommonConstants.ANGLE - randomAngle;
// 打开自定义弹窗，弹出抽奖信息
this.dialogController.open();
}
}, () => {
this.rotateDegree = CommonConstants.CIRCLE * CommonConstants.FIVE +
CommonConstants.ANGLE - randomAngle;
})
}
Pop up the prize information in the draw: After the draw is over, the text and picture information in the draw will pop up, through a customized pop-up window.
// PrizeDialog.ets
@CustomDialog
export default struct PrizeDialog {
@Link prizeData: PrizeData;
@Link enableFlag: boolean;
private controller?: CustomDialogController;
build() {
Column() {
Image(this.prizeData.imageSrc !== undefined ? this.prizeData.imageSrc : '')
...
Text(this.prizeData.message)
...
Text($r('app.string.text_confirm'))
...
.onClick(() => {
// 关闭自定义弹窗
this.controller?.close();
this.enableFlag = !this.enableFlag;
})
}
...
}
}Summarize
You have completed this Codelab and learned the following knowledge points:
1. Use the canvas component Canvas to draw the lottery round turntable.
2. Use explicit animation to start the lottery function.
3. Use a custom pop-up window to pop up the drawn prizes.