HarmonyOS 鸿蒙Next this.context.stroke() 会将前面设置的颜色和线宽度重置以最新重新绘制

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

HarmonyOS 鸿蒙Next this.context.stroke() 会将前面设置的颜色和线宽度重置以最新重新绘制

CanvasRenderingContext2D

this.context.stroke() 会将前面设置的颜色和线宽度重置以最新重新绘制


this.context.moveTo(125, 25)
this.context.lineTo(125, 105)
this.context.strokeStyle = 'rgb(255,0,0)'
this.context.lineWidth = 1
this.context.stroke()

this.context.moveTo(10, 25)
this.context.lineTo(10, 105)
this.context.strokeStyle = 'rgb(255,255,0)'
this.context.lineWidth = 5
this.context.stroke()

导致前面设置的lineWidth 和 strokeStyle 被后面的覆盖,这个如何解决,或者有什么替代方案?


更多关于HarmonyOS 鸿蒙Next this.context.stroke() 会将前面设置的颜色和线宽度重置以最新重新绘制的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

将两段代码用 ```javascript this.context.beginPath(); this.context.stroke(); ``` 包起来即可。

参考代码:

[@Entry](/user/Entry)
[@Component](/user/Component)
struct LineWidthExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() => {
          this.context.beginPath()
          this.context.moveTo(125, 25)
          this.context.lineTo(125, 105)
          this.context.strokeStyle = 'rgb(255,0,0)'
          this.context.lineWidth = 1
          this.context.stroke()
          this.context.beginPath()
          this.context.moveTo(10, 25)
          this.context.lineTo(10, 105)
          this.context.strokeStyle = 'rgb(0,255,0)'
          this.context.lineWidth = 5
          this.context.stroke()
        })
    }
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next this.context.stroke() 会将前面设置的颜色和线宽度重置以最新重新绘制的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS(鸿蒙)系统中,如果你遇到this.context.stroke()方法调用后,前面设置的颜色和线宽度被重置的问题,这通常与图形绘制上下文(Canvas Context)的状态管理有关。

在鸿蒙的图形绘制API中,stroke()方法用于绘制当前路径的轮廓。如果在调用stroke()后,之前设置的属性(如颜色和线宽)被重置,可能是因为绘图上下文(Context)的某些状态在调用后被自动清除或重置。

为了解决这个问题,你可以尝试以下步骤:

  1. 确保在调用stroke()之前,所有需要的属性(颜色、线宽等)都已正确设置。
  2. 检查是否有其他代码(可能在stroke()调用之后)意外地修改了这些属性。
  3. 如果可能,尝试将设置属性和绘制操作封装在一个函数或代码块中,以确保状态的一致性。
  4. 查阅鸿蒙的官方文档,了解Canvas Context的状态管理规则,特别是关于属性持久性的部分。

如果上述步骤无法解决问题,可能是由于鸿蒙系统特定的行为或BUG导致的。此时,你可以考虑查阅鸿蒙的更新日志或社区论坛,看看是否有其他开发者遇到并解决了类似的问题。

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

回到顶部