HarmonyOS 关于使用OffscreenCanvasRenderingContext2D绘制问题

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

HarmonyOS
2天前
浏览
收藏 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
微信
回复
2天前
相关问题
使用Drawing进行2d图像绘制
921浏览 • 1回复 待解决
XComponent、NativeDrawing实现2D图形绘制
1144浏览 • 1回复 待解决
ArkGraphics 2D都有哪些使用场景?
630浏览 • 1回复 待解决
HarmonyOS Canvas中关于绘制图片问题
385浏览 • 1回复 待解决
XComponent、openGL实现3D图形绘制
1674浏览 • 1回复 待解决
HarmonyOS Path2D的addPath方法报错
261浏览 • 1回复 待解决
ArkGraphics 2D有什么优势?
397浏览 • 1回复 待解决
HarmonyOS关于API使用问题
396浏览 • 1回复 待解决
HarmonyOS 关于使用@BuilderParam的问题
383浏览 • 1回复 待解决
HarmonyOS 关于Iconfont如何使用问题
312浏览 • 1回复 待解决
关于 Extend 使用问题
285浏览 • 1回复 待解决