HarmonyOS 关于使用OffscreenCanvasRenderingContext2D绘制问题

绘制了一个矩形,但是不知道如何给这个矩形设置圆角,原始需求是绘制一个圆角是8的矩形

HarmonyOS
2024-12-20 16:07:02
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
shlp

实现圆角就不能再用fillRect这个方法了,这是绘制长方形的,无论如何都是直角

能想到的解决方案就是用moveTo,arcTo,lineTo和stroke去绘制圆角矩形的轮廓,最后填充颜色圆角矩形的实现我这简单写了一个角,可以参考实现

@Entry
@Component
struct FillStyleExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() => {
          let offContext = this.offCanvas.getContext("2d", this.settings)
          offContext.fillStyle = 0x0000FF
          offContext.moveTo(100, 20)
          offContext.arcTo(300, 20, 300, 70, 8)
          offContext.lineTo(300, 80)
          offContext.stroke()
          // offContext.fill()
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}
分享
微博
QQ
微信
回复
2024-12-20 18:41:08
相关问题
使用Drawing进行2d图像绘制
1420浏览 • 1回复 待解决
HarmonyOS CanvasRenderingContext2D使用问题
448浏览 • 1回复 待解决
XComponent、NativeDrawing实现2D图形绘制
1592浏览 • 1回复 待解决
HarmonyOS Matrix2D的用法问题
433浏览 • 1回复 待解决
HarmonyOS 关于xml2js使用问题
291浏览 • 1回复 待解决
HarmonyOS cocod2d-x适配问题
222浏览 • 1回复 待解决
ArkGraphics 2D都有哪些使用场景?
1226浏览 • 1回复 待解决