2024年鸿蒙最新OpenHarmony开发实战：自定义抽奖转盘（JS），阿里员工面试

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

构建主界面

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

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

<!-- index.hml -->
<stack class="container">
    <canvas ref="canvas" class="canvas-box simple-animation" ...></canvas>
    <image id="center" src="/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;
  }
  // 获取CanvasRenderingContext2D对象
  this.ctx = this.$refs.canvas.getContext('2d');
  this.avgAngle = CommonConstants.CIRCLE / CommonConstants.COUNT;
  this.draw();
}

// 画抽奖圆形转盘
draw() {
  // 将画布沿X、Y轴平移指定距离
  this.ctx.translate(this.screenWidth / CommonConstants.HALF, 
    this.screen