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%')
  }
}
```
```
相关推荐
rzl028 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang9 分钟前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼12 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿13 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再16 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55520 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录25 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空000026 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl27 分钟前
深度剖析Kafka读写机制
前端
FogLetter27 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css