HarmonyOS鸿蒙Next中画Circle改变了坐标中心点位置，怎么二次更新

HarmonyOS鸿蒙Next中画Circle改变了坐标中心点位置，怎么二次更新画Cicle:

@Entry
@Component
struct SideBarContainerExample {
  normalIcon: Resource = $r("app.media.background")
  selectedIcon: Resource = $r("app.media.background")
  @State arr: number[] = [1, 2, 3]
  @State current: number = 1

  build() {
    Row() {
      Circle({
        width: this.radiusMax * 2,
        height: this.radiusMax * 2
      })
        .fill('#fff')
        .fillOpacity(0)
        .backgroundImage($r('app.media.eight_direction'))
        .backgroundImageSize({ width: 160, height: 160 })
        .position({ x: this.centerX - this.radiusMax, y: this.centerY - this.radiusMax })
      Circle({ width: this.radiusMin * 2, height: this.radiusMin * 2 })
        .fill('#0094ff')
        .position({ x: this.positionX - this.radiusMin, y: this.positionY - this.radiusMin })
    }.width('100%').layoutWeight(1).justifyContent(FlexAlign.Center).onTouch(this.handleTouchEvent.bind(this))
  }

  //你好动态改变了this.centerXthis.positionX

  eventFunc(argOne: string) {
    Logger.info(TAG, `eventFunc is called, ${argOne}`);
    if (BreakpointTypeEnum.SM === argOne) {
      Logger.info(TAG, ' sm sm  sm  sm  sm  sm  sm ');
      this.centerX = px2vp(display.getDefaultDisplaySync().width / 2)
      this.centerY = px2vp(display.getDefaultDisplaySync().width / 2)
      Logger.info(TAG, ' sm sm  sm  sm  sm  sm  sm   this.centerX==>', this.centerX);
      this.positionX = this.centerX
      this.positionY = this.centerY
    } else {
      Logger.info(TAG, ' this.centerY = 70');
      this.centerX = px2vp(display.getDefaultDisplaySync().width / 2)
      this.centerY = 70
      Logger.info(TAG, 'this.centerY = 70  this.centerX==>', this.centerX);
      this.positionX = this.centerX
      this.positionY = this.centerY
    }
  }
}

改变了 this.centerX this.positionX 。为啥circle 没有ui动态更新绘制。

更多关于HarmonyOS鸿蒙Next中画Circle改变了坐标中心点位置，怎么二次更新的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

gougou168 1楼•7 天前

对圆心位置使用@state，这样动态改变圆心位置后，就会自动更新

更多关于HarmonyOS鸿蒙Next中画Circle改变了坐标中心点位置，怎么二次更新的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

htzhanglong 2楼•7 天前

在HarmonyOS鸿蒙Next中，若画Circle时改变了坐标中心点位置，可以通过以下步骤进行二次更新：

获取Canvas对象：确保你已经获取了Canvas对象，用于绘制图形。
设置新的坐标中心点：使用Canvas.translate()方法将Canvas的坐标中心点移动到新的位置。
重新绘制Circle：在新的坐标中心点位置重新绘制Circle。
恢复Canvas状态：如果需要，可以使用Canvas.restore()方法恢复Canvas的原始状态。

示例代码：

// 假设canvas是已经获取的Canvas对象
canvas.save(); // 保存当前Canvas状态
canvas.translate(newX, newY); // 移动坐标中心点到(newX, newY)
canvas.drawCircle(0, 0, radius, paint); // 在新的中心点绘制Circle
canvas.restore(); // 恢复Canvas状态

通过以上步骤，可以在改变坐标中心点后进行Circle的二次更新。

gougou168 3楼•7 天前

在HarmonyOS鸿蒙Next中，如果你已经绘制了一个Circle并需要更新其坐标中心点位置，可以通过以下步骤实现：

获取Canvas对象：确保你已经获取了Canvas对象，用于绘制图形。
更新Circle位置：通过修改Circle的centerX和centerY属性来更新中心点位置。
重新绘制：调用Canvas的drawCircle方法，传入更新后的Circle对象。

示例代码：

// 假设已经有一个Circle对象
Circle circle = new Circle(100, 100, 50);

// 更新中心点位置
circle.setCenterX(200);
circle.setCenterY(200);

// 重新绘制
canvas.drawCircle(circle, paint);