HarmonyOS 鸿蒙Next如何根据圆心坐标画实心圆

发布于 1周前 作者 bupafengyu 来自 鸿蒙OS

HarmonyOS 鸿蒙Next如何根据圆心坐标画实心圆

目前计算出了圆心的坐标集合如下:

@State centersX:Array<number> = [] //存放的为圆的X坐标集合

@State centersY:Array<number> = [] // 存放的为圆的Y坐标集合

centersX 的值为:21 、31、 41 、51 、61 、71 、82 、92、102

centersY 的值为:43 、43 、 43 、 126 、126 、126 、126 、15   126

根据centersX 和 centersY 的值在 Column布局中画出8个半径为2VP 的圆

这个怎么画呀？


更多关于HarmonyOS 鸿蒙Next如何根据圆心坐标画实心圆的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复 
@Entry
@Component
struct Arc {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State centersX:Array<number> = [21,31,41,51,61,71,82,92,102] //存放的为圆的X坐标集合
  @State centersY:Array<number> = [43,43,43,126,126,126,126,15,126] // 存放的为圆的Y坐标集合
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.centersX.forEach((value,index) => {
            this.context.beginPath()
            this.context.strokeStyle = '#00ff00'
            this.context.fillStyle = '#00ff00'
            this.context.moveTo(this.centersX[index], this.centersY[index])
            this.context.arc(this.centersX[index], this.centersY[index], 3, 0, 7)
            this.context.fill()
            this.context.stroke()
          })
        })
    }
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next如何根据圆心坐标画实心圆的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中，根据圆心坐标绘制实心圆可以通过Canvas绘图API来实现。以下是核心代码片段，用于在自定义组件或视图上绘制实心圆：

// 假设你有一个自定义组件或视图，重写其onDraw方法
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    // 圆心坐标 (cx, cy) 和半径 r
    float cx = 150f;
    float cy = 200f;
    float r = 50f;

    // 创建画笔，设置颜色为实心
    Paint paint = new Paint();
    paint.setColor(Color.RED); // 设置为红色，可以根据需要更改颜色
    paint.setStyle(Paint.Style.FILL); // 设置为实心

    // 绘制实心圆
    canvas.drawCircle(cx, cy, r, paint);
}

注意：

  • Canvas 是鸿蒙绘图的核心类，提供了一系列绘图方法。
  • Paint 类用于设置绘图参数，如颜色、样式等。
  • drawCircle 方法用于绘制圆形，参数依次为圆心横坐标、圆心纵坐标、半径和画笔对象。

如果需要在其他场景绘制实心圆，确保Canvas对象和相关绘制逻辑在正确的绘图周期内执行。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部