# WeightUiDemo

**Repository Path**: scenario-samples/weight-ui-demo

## Basic Information

- **Project Name**: WeightUiDemo
- **Description**: 【鸿蒙 Harmony Next 示例 代码】本示例通过Canvas组件展示了体重圆盘UI组件。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-10
- **Last Updated**: 2025-05-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 体重圆盘UI组件demo

## 介绍

本示例通过[Canvas](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-components-canvas-canvas-V13)组件展示了体重圆盘UI组件。

## 效果预览

![image](screenshots/ScreenShot.gif)

## 约束与限制

1.仅支持标准系统上运行，支持设备：华为手机或运行在DevEco Studio上的华为手机设备模拟器。  
2.支持 API Version 12 Release及以上版本。  
3.支持 HarmonyOS 5.0.0 Release SDK及以上版本。  
4.需要使用DevEco Studio 5.0.0 Release及以上版本进行编译运行。

## 使用说明

点击按钮查看对应效果。

## 实现思路

1. 读取体重读数，通过arc绘制弧线路径。
```typescript
let endAngle: number = this.nowWeight //读取当前体重数
if (endAngle > Draw_Data.MAX_WEIGHT) {
  endAngle = Draw_Data.MAX_WEIGHT
} //防止溢出
...
this.context.arc(circleX, circleY, Draw_Data.CIRCL_RADIUS, Draw_Data.STAER_ANGLE * Draw_Data.SWITCH,
  angleChange1)
```
2. 通过更新Canvas的宽度，让画布重新绘制。
```typescript
if (this.weight === '100%'){
  this.weight = '99%'
}else {
  this.weight = '100%'
}
```
## 工程目录

```
entry/src/main/ets/
|---pages
|   |---Index.ets                            // 主页                
```

## 参考文档

[Canvas](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-components-canvas-canvas-V13)

## ChangeLog

| 修改内容   | 时间         |
|--------|------------|
| 第一次提交  | 2025.03.10 |


## 一份简单的问卷反馈

亲爱的Harmony Next开发者，您好！<br>
为了协助您高效开发，提高鸿蒙场景化示例的质量，希望您在浏览或使用后抽空填写一份简单的问卷，我们将会收集您的宝贵意见进行优化:heart:

[:arrow_right: **点击此处填写问卷** ](https://wj.qq.com/s2/19042938/95ab/)

<div style="text-align: left;">