HarmonyOS Next 刻度盘

最近在学习鸿蒙开发,已经学到画图这部分,刚好以前的项目也有这个功能,就写了个demo。 上效果图:

代码也简单,可能有些许不够完美,请见谅。能用的上伙伴拿去改改用。

kotlin 复制代码
@Entry
@Component
export struct CirleProgressPage {

  private settings:RenderingContextSettings = new RenderingContextSettings()
  private context:CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  @Builder setupCirleView(){
    Canvas(this.context)
      .width('90%')
      .height('90%')
      .backgroundColor(Color.Pink)
      .onReady(()=>{

        const  baseRadians:number = 90;
        this.context.beginPath()
        this.context.arc(ResManager.getScreenWidth() / 2,170,baseRadians, this.degreesToRadians(270), this.degreesToRadians(210),false);//逆时针
        this.context.lineWidth = 15
        this.context.strokeStyle = Color.Gray
        this.context.lineCap = 'round'
        this.context.stroke()

        this.context.beginPath()
        this.context.arc(ResManager.getScreenWidth() / 2,ResManager.getScreenHeight() / 2,baseRadians, this.degreesToRadians(90), this.degreesToRadians(360),true);
        this.context.lineWidth = 5
        this.context.strokeStyle = Color.Gray
        this.context.lineCap = 'round'
        this.context.stroke()

        const count = 50;
        const start1 = 360;//开始
        const offset = (5 * 60)/49;
        const radius = baseRadians + 10;
        const centerx = ResManager.getScreenWidth() / 2;
        const centery = 170;


        for (let i = 0; i < count; i++) {
          const angle = offset * i + start1;

          let start:[number,number] = this.getPointWithRadius(radius,centerx,centery,this.degreesToRadians(angle));
          const end:[number,number] = this.getPointWithRadius(radius + 5,centerx,centery,this.degreesToRadians(angle));

          this.context.beginPath();
          if (i % 5 == 0 || i === count - 1){
            this.context.lineWidth = 3;
          }else{
            start = this.getPointWithRadius(radius + 2,centerx,centery,this.degreesToRadians(angle));
            this.context.lineWidth = 2;
          }

          if (i === 0) {
            this.context.strokeStyle = Color.Red
          }else{
            this.context.strokeStyle = Color.Blue
          }

          this.context.moveTo(start[0],start[1])
          this.context.lineTo(end[0],end[1])
          this.context.stroke()

        }

        for (let i = 0; i < count; i++) {
          if (i % 10 == 0 || i === count - 1){
            const angle = offset * i + start1;
            this.context.beginPath();
            this.context.strokeStyle = Color.Green
            let font_start:[number,number] = this.getPointWithRadius(radius + 15,centerx,centery,this.degreesToRadians(angle));

            this.context.font = '35px sans-serif'
            if (i === count - 1) {
              i += 1;
            }
            this.context.fillText(i.toString(),font_start[0] - 5,font_start[1] + 3,30)
            this.context.stroke()

          }


        }



      })

  }


   /**
    * 单位:弧度
    * @param radius
    * @param center_x
    * @param center_y
    * @param angle
    * @returns
    */
  private getPointWithRadius(radius:number,center_x:number,center_y:number,angle:number):[number,number]{
    const x = radius * Math.cos(Math.PI * 2 + Math.PI / 2 - angle)
    const y = radius * Math.sin(Math.PI * 2 + Math.PI / 2 - angle)
    return [center_x + x,center_y - y]
  }

  // 角度 → 弧度
  private  degreesToRadians(degrees: number): number {
    return degrees * Math.PI / 180;
 }

  build() {
    Column() {
      this.setupCirleView()
    }
    .height('100%')
    .width('100%')
  }
}
```
```
相关推荐
Patrick_Wilson1 分钟前
青苔漫染待客迟
前端·设计模式·架构
写不出来就跑路22 分钟前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
OpenTiny社区25 分钟前
盘点字体性能优化方案
前端·javascript
FogLetter29 分钟前
深入浅出React Hooks:useEffect那些事儿
前端·javascript
Savior`L30 分钟前
CSS知识复习4
前端·css
0wioiw01 小时前
Flutter基础(前端教程④-组件拼接)
前端·flutter
花生侠1 小时前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
一涯1 小时前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调1 小时前
记一次 Vite 下的白屏优化
前端·css