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%')
  }
}
```
```
相关推荐
银嘟嘟左卫门21 分钟前
上手 Rokid JSAR:新手也能快速入门的 AR 开发之旅
前端
右子22 分钟前
HTML Canvas API 技术简述与关系性指南
前端·javascript·canvas
Lotzinfly23 分钟前
10个JavaScript浏览器API奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
合肥烂南瓜24 分钟前
浏览器的事件循环EventLoop
前端·面试
golang学习记24 分钟前
从0死磕全栈之Next.js after 函数详解:在响应完成后执行异步任务
前端
TeleostNaCl25 分钟前
实战 | 使用 Chrome 开发者工具修改网页源码跳过前端校验
前端·chrome·经验分享·后端·js
阿星AI工作室1 小时前
1分钟搞定高级感PPT演示!Obsidian+Excalidraw神级玩法,手残党亲测有效
前端
liangshanbo12151 小时前
React 19 新特性:原生支持在组件中渲染 <meta> 与 <link>
前端·javascript·react.js
浩男孩1 小时前
🍀发现个有趣的工具可以用来随机头像🚀🚀
前端
前端 贾公子1 小时前
《Vuejs设计与实现》第 18 章(同构渲染)(下)
前端·javascript·html