鸿蒙4.0实战应用(ArkTS)-抽奖转盘

news2024/11/29 4:33:50

构建主界面

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

功能要求:

  1. 通过画布组件Canvas,画出抽奖圆形转盘。
  2. 通过显式动画启动抽奖功能。
  3. 通过自定义弹窗弹出抽中的奖品。

image.png

在绘制抽奖圆形转盘前,首先需要在CanvasPage.ets的aboutToAppear方法中获取屏幕的宽高。

// 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));
    })
}

在CanvasPage.ets布局界面中添加Canvas组件,在onReady方法中进行绘制。

// 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'))
    ...
}
...

在DrawModel.ets中,通过draw方法逐步进行自定义圆形抽奖转盘的绘制。

// 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);
}

画外部圆盘

画外部圆盘的花瓣:通过调用rotate()方法,将画布旋转指定角度。再通过调用save()和restore()方法,使画布保存最新的绘制状态。根据想要绘制的花瓣个数,改变旋转角度,循环画出花瓣效果。

// 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();
  }
}

画外部圆盘、圆盘边上的小圈圈:在指定的X、Y(0, 0)坐标处,画一个半径为this.screenWidth * CommonConstants.OUT_CIRCLE_RATIOS的圆形。接下来通过一个for循环,且角度每次递增CommonConstants.CIRCLE / CommonConstants.SMALL_CIRCLE_COUNT,来绘制圆环上的小圈圈。

// 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();
  }
}

画内部扇形抽奖区域

画内部圆盘、内部扇形抽奖区域:使用fillArc方法绘制内部圆盘。通过一个for循环,角度每次递增this.avgAngle。然后不断更改弧线的起始弧度this.startAngle * Math.PI / CommonConstants.HALF_CIRCLE和弧线的终止弧度(this.startAngle + this.avgAngle) * Math.PI / CommonConstants.HALF_CIRCLE。最后用fill()方法对路径进行填充。

// 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;
  }
}

画内部抽奖区域文字:用for循环,通过drawCircularText()方法绘制每组文字。drawCircularText()方法接收三个参数,分别是字符串,起始弧度和终止弧度。绘制文本前需要设置每个字母占的弧度angleDecrement,然后设置水平和垂直的偏移量。垂直偏移量circleText.y - Math.sin(angle) * radius就是朝着圆心移动的距离;水平偏移circleText.x + Math.cos(angle) * radius,是为了让文字在当前弧范围文字居中。最后使用fillText方法绘制文本。

// 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();
  }
}

画内部抽奖区域文字对应图片:使用drawImage方法绘制抽奖区域文字对应图片,该方法接收五个参数,分别是图片资源、绘制区域左上角的X和Y轴坐标、绘制区域的宽度和高度。

// 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();
  }
}

实现抽奖功能

在CanvasPage.ets的Canvas组件中添加rotate属性,在Image组件中添加点击事件onClick。点击“开始抽奖”图片,圆形转盘开始转动抽奖。

// 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();
    })
}
...

圆形转盘开始转动抽奖:给转盘指定一个随机的转动角度randomAngle,保证每次转动的角度是随机的,即每次抽到的奖品也是随机的。动画结束后,转盘停止转动,抽奖结束,弹出抽中的奖品信息。

// 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;
  })
}

弹出抽中的奖品信息:抽奖结束后,弹出抽中的文本和图片信息,通过自定义弹窗实现。

// 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;
        })
    }
    ...
  }
}

本文主要是对鸿蒙开发中的ArkTS基础运用,制作出一个抽奖转盘,有关更多的鸿蒙实操技术或者学习文档。可以前往主页或者直接找我私信;下面分享一份鸿蒙开发技术学习路线图:(略缩版)

高清完整版获取在主页找我拿取

最后展示

基于画布组件、显式动画,实现的一个自定义抽奖圆形转盘。效果图如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1341239.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之线性布局容器Column组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之线性布局容器Column组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Column组件 沿垂直方向布局的容器。 子组件 可以包含子组件。 接…

github登录需要双因素认证(Two-factor authentication)

前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 github登录需要双因素认证&#xff08;Two-factor authentication&#xff09; 今天登录github发现需要绑定双因素才能够登录 我们…

uniapp 底部导航栏 tabBar

在 static 文件夹中新建文件夹 tabBar&#xff0c;放入标签图片 源素材如下&#xff1a; 在 pages.json 中添加 // 底部导航"tabBar": {// tab默认文字颜色"color": "#bfbfbf",// tab选中后的文字颜色"selectedColor": "#153c65&…

【SpringCloud】-Nacos客户端与服务端源码解析

Nacos系列 Nacos—简述、注册中心、配置中心 Nacos安装教程 SpringBoot项目与Nacos配置 一、背景介绍 Nacos&#xff08;Naming and Configuration Service&#xff09;是阿里巴巴开源的服务发现和配置管理工具&#xff0c;它是一个全面的微服务基础设施组件&#xff0c;提供…

HTML-基础知识-基本结构,注释,文档说明,字符编码(一)

1.超文本标记语言不分大小写。 2.超文本标签属性名和属性值不区分大小写。 3.超文本标签属性值重复&#xff0c;听取第一个。 4.html结构 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"vi…

MySQL数据库多版本并发控制(MVCC)

在数据库中&#xff0c;并发控制是确保多个事务能够同时执行&#xff0c;而不会导致数据不一致或冲突的关键机制。多版本并发控制(MVCC)是一种流行的并发控制方法&#xff0c;它可以允许多个事务同时读取同一数据项的不同版本&#xff0c;而不会相互阻塞。本文将讨论MVCC的原理…

dubbo-admin连接虚拟机中的zookeeper报错zookeeper not connected

目录 前言 解决过程 总结 前言 可以优先查看总结看能否解决大家的问题&#xff0c;如果不能解决不需要查看解决过程浪费时间了。 解决过程 该问题卡住我很久&#xff0c;网上大多数文章都是修改配置文件中的连接超时时间&#xff0c;即修改如下内容 dubbo.registry.tim…

【2023】通过docker安装hadoop以及常见报错

&#x1f4bb;目录 1、准备2、安装镜像2.1、创建centos-ssh的镜像2.2、创建hadoop的镜像 3、配置ssh网络3.1、搭建同一网段的网络3.2、配置host实现互相之间可以免密登陆3.3、查看是否成功 4、安装配置Hadoop4.1、添加存储文件夹4.2、添加指定配置4.3、同步数据 5、测试启动5.1…

windirstat磁盘管理工具,清理磁盘神器(附网盘链接)

Windirstat是一款用于可视化磁盘空间使用情况的开源工具。它允许用户以图形方式查看磁盘上的文件和文件夹&#xff0c;以便更容易地识别和理解哪些文件或文件夹占用了最多的磁盘空间。该工具通过在磁盘上创建一个可交互的树状图&#xff0c;以及颜色编码和图表&#xff0c;帮助…

短说社区运营的使用工具分享(一)

本文是一篇针对短说社区运营的使用工具分享帖&#xff0c;是小编结合日常使用&#xff0c;总结的一些可以帮助网站管理员和运营人员进行日常操作和管理的工具。 1. 想天工作台之运营面板 想天工作台可以将桌面划分不同的类型来辅助办公&#xff0c;我分享下我当前的桌面情况&…

Linux下安装RocketMQ

1、创建文件夹app/rocketMQ 在xshell里可以找到这里&#xff0c;xftp可以直接创建文件夹&#xff0c;并上传文件&#xff0c;也可以使用命令创建文件夹&#xff0c; 创建文件夹命令&#xff1a;mkdir app、mkdir rocketMQ 2、上传好后解压 使用命令解压 unzip 压缩包名 3、获…

python进阶 — Python解释器

1、Python解释器 Python解释器是一个计算机程序&#xff0c;它将Python代码转换为计算机可以理解的机器代码&#xff0c;并执行这些机器代码。 1. 这篇文章介绍如何下载和安装Python解释器&#xff1a; python基础&#xff08;2&#xff09;— 环境搭建 2 . 这篇文章介绍如…

三年Java开发的技术职业规划

开篇 时间如白驹过隙般&#xff0c;不知不觉又到了一年的结尾。回头展望&#xff0c;已经从业Java开发三年。这三年内酸甜苦辣也都领会过&#xff0c;整体这一年&#xff0c;一句话评价的话&#xff0c;那就是也无风雨也无晴。 不管怎样&#xff0c;疫情三年后的第一个年&…

案例253:基于微信小程序的懂球短视频管理系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SpringBoot JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder …

DDR3通信协议介绍篇

一.DDR3简介 DDR核心技术点就在于&#xff1a;(1)双沿传输。(2)预取prefetch. DDR的频率&#xff1a;(1)核心频率 (2)时钟频率 (3)数据传输频率&#xff1b;核心频率就是内存的工作频率&#xff1b;DDR1内存的核心频率是和时钟频率相同的&#xff0c;到了DDR2和DDR3时才有了时…

【kubernetes】集群网络(一):基础篇

Flannel 1 路由表 & arp & fdb 1.1 路由表 任何网络设备都需要路由表&#xff0c;路由表用来决定&#xff0c;当收到数据包时&#xff0c;该向哪里进行转发。路由表项通常会包含以下几个字段&#xff1a; Destination&#xff1a;目的地Gateway&#xff1a;网关Mas…

GA/T1400公安视图库在视频监控系统中对接及方案

公安视频图像信息应用系统系列标准&#xff0c;标号为GA/T 1400&#xff0c;现行版本为2017年版&#xff0c;由公安部发布。现较广泛地使用于平安城市安防监控系统、智慧城市安防监控系统、雪亮工程安防监控系统之中。 公安视频图像信息应用系统系列标准&#xff0c;共分为4个部…

QLabelQPushButton和QLineEdit

QLabel 设置文件格式字体颜色背景 源码 设置图片 源码 设置gif 设置文本 源码 富文本 (Rich Text): 格式化选项&#xff1a;富文本支持各种格式化选项&#xff0c;如字体样式&#xff08;粗体、斜体&#xff09;、字体大小、颜色、超链接、图片插入、列表、表格等。文件格式&a…

八种常见顺序存储的算法

目录 1、线性枚举 1&#xff09;问题描述 2&#xff09;动图演示 3&#xff09;示例说明 4&#xff09;算法描述 5&#xff09;源码详解 2、前缀和差分 1&#xff09;问题描述 2&#xff09;动图演示 3&#xff09;样例分析 4&#xff09;算法描述 5&#xff09;源码…

抖音、小红书、视频号是如何判定是否限流的?

在这个新媒体营销的时代&#xff0c;抖音、小红书和视频号作为中国最受欢迎的社交媒体平台&#xff0c;为品牌和内容创作者提供了极具潜力的展示空间。然而&#xff0c;无论在哪个平台&#xff0c;限流成为很多人的苦恼。 抖音的推荐算法基于人群画像和初始流量池&#xff0c;同…