HarmonyOS 根据圆心坐标绘制圆问题

private settingsRound: RenderingContextSettings | null  = null
private contextRound: CanvasRenderingContext2D | null  = null
@State centersX:Array<number> = []
@State centersY:Array<number> = []

if (this.model.showState==1) {
  this.centersX = []
  this.centersY = []

  this.settingsRound =  new RenderingContextSettings(true)
  this.contextRound = new CanvasRenderingContext2D(this.settingsRound)

  if (this.contextLine && this.contextRound){
    Logger.info('Safe', '-----------------------清空画布' );
    this.contextLine.clearRect(0,0,this.mWidth,this.mHeight)
    this.contextRound.clearRect(0,0,this.mWidth,this.mHeight)
  }


  //画圆
  Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
    Canvas(this.contextRound)
      .width('100%')
      .height('100%')
      .backgroundColor($r('app.color.color_00000000'))
      .onReady(() =>{
        this.centersX.forEach((value,index) => {
          this.contextRound?.beginPath()
          if(this.contextRound){
            this.contextRound.strokeStyle = this.roundbgcolor(index)//设置线条的颜色。
            this.contextRound.fillStyle = this.roundbgcolor(index)//绘制的填充色。
          }
          this.contextRound?.moveTo(this.centersX[index], this.centersY[index])
          this.contextRound?.arc(this.centersX[index], this.centersY[index], 2.5, 0, 7)
          this.contextRound?.fill()
          this.contextRound?.stroke()
        })
      })
  }
  .width('100%')
  .height('100%')
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

首次进入可正常绘制圆，但当切换页面时centersX、centersY的值发生了变化，然后就画不出圆了。

HarmonyOS

FengTianYa

2024-12-25 14:29:28

浏览

回答 1

按赞同

按时间

Heiang

可以将变化的数据通过@Watch监听，同时绑定一个自己封装的draw()方法，当数据刷新时就会调用Watch绑定的方法执行绘制逻辑，参考代码：

@Entry
@Component
struct CanvasDemo {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State @Watch('draw') content: string = ""

  draw() {
    this.context.clearRect(0, 0, 200,
      200)
    // 清理画布内容
    this.context.fillText(this.content, 50, 50)
    // 重新填充
  }

  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height('25%')
        .backgroundColor('#F5DC62')
        .onReady(() => {
          //可以在这里绘制内容。
          this.context.font = '55px sans-serif'
          this.context.fillText(this.content, 50, 50)
        })
      TextInput({ text: $$this.content })
    }.borderColor('#31525B').borderWidth(12).width('100%').height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

2024-12-25 15:59:12

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 根据圆心坐标绘制圆问题

订阅鸿蒙技术特刊，精选内容抢先看