OpenHarmony开发实战：自定义抽奖转盘（JS）

1. 获取OpenHarmony系统版本：标准系统解决方案（二进制）。以3.2 Release版本为例：

2. 搭建烧录环境。

1. [完成DevEco Device Tool的安装]( )
2. [完成RK3568开发板的烧录]( )

3. 搭建开发环境。

   1. 开始前请参考工具准备，完成DevEco Studio的安装和开发环境配置。
   2. 开发环境配置完成后，请参考使用工程向导创建工程（模板选择“Empty Ability”）。
   3. 工程创建完成后，选择使用真机进行调测。

代码结构解读

本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在gitee中提供。

├──entry/src/main/js                // 代码区
│  └──MainAbility
│     ├──common
│     │  ├──constants
│     │  │  ├──colorConstants.js    // 颜色常量类
│     │  │  └──commonConstants.js   // 公共常量类
│     │  ├──images                  // 图片资源目录
│     │  └──utils
│     │     └──logger.js            // 日志工具类
│     ├──i18n
│     │  ├──en-US.json              // 英文国际化
│     │  └──zh-CN.json	            // 中文国际化	
│     ├──pages
│     │  └──index
│     │     ├──index.css            // index页面样式
│     │     ├──index.hml            // index页面
│     │     └──index.js             // index页面逻辑
│     └──app.js                     // 程序入口
└──entry/src/main/resources         // 应用资源目录

构建主界面

在这个章节中，我们将完成示例主界面的开发，效果如图所示：

在index.hml布局界面中添加画布组件canvas，画出抽奖圆形转盘，然后添加image组件，实现“开始抽奖”的布局。

<!-- index.hml -->
<stack class="container">
    <canvas ref="canvas" class="canvas-box simple-animation" ...></canvas>
    <image id="center" src="/https/blog.csdn.net/common/images/ic_center.png" ...></image>
    ...
</stack>

在绘制抽奖圆形转盘前，首先需要在index.js的onInit()方法中获取当前设备的屏幕密度和屏幕的宽高。

// index.js
import resourceManager from '@ohos.resourceManager';
import featureAbility from '@ohos.ability.featureAbility';

// 页面初始化时触发
onInit() {
  // 获取当前设备的屏幕密度
  resourceManager.getResourceManager((error, mgr) => {
    if(error) {
      Logger.error(`[index][onInit]getResourceManager error is ${JSON.stringify(error)}`);
      return;
    }
    mgr.getDeviceCapability().then(value => {
      let screenDensity = value.screenDensity;
      // 获取屏幕的大小，不包含状态栏大小
      featureAbility.getWindow().then((data) => {
        let windowProperties = data.getWindowProperties();
        this.screenWidth = windowProperties.windowRect.width / screenDensity;
        this.screenHeight = windowProperties.windowRect.height / screenDensity;
      });
    }).catch(err => {
      Logger.error(`[index][onInit]getDeviceCapability error is ${JSON.stringify(err)}`);
    });
  });
}

在index.js的onShow()方法中，获取CanvasRenderingContext2D对象，用于在画布组件上绘制矩形、文本、图片等。然后通过draw()方法逐步绘制自定义抽奖圆形转盘。

// index.js
// 页面显示时触发
onShow() {
  if (this.ctx !== null) {
    return;
  }
  // 获取Canvas