HarmonyOS鸿蒙Next中离屏渲染canvas能嵌套canvas吗？

HarmonyOS鸿蒙Next中离屏渲染canvas能嵌套canvas吗？离屏渲染中canvas能嵌套canvas吗？

有一个场景是这样的，在页面上有一个canvas1宽高比如是400*500，最先在canvas1上绘制一张图片，图片ImageFit.Contain自适应显示在canvas1上，然后是会有另一个离屏渲染的canvas2，它主要是一个绘制的文本。在canvas2上只是针对于text进行旋转，字体加粗下划线颜色或者描边颜色宽度的修改。canvas2绘制在canvas1内部，通过手势操作在canvas1中移动缩放旋转canvas2。也可以复制显示多个canvas2。因为如果直接在一个画布上显示canvas2的话，它内部的text的所有操作位置可能都是要相对于主画布来做的。逻辑复杂度高不利于复用。所以离屏渲染中canvas能嵌套canvas吗？有没有简单的demo可以参考

更多关于HarmonyOS鸿蒙Next中离屏渲染canvas能嵌套canvas吗？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

ionicwang 1楼•8 天前

更多关于HarmonyOS鸿蒙Next中离屏渲染canvas能嵌套canvas吗？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

离屏渲染大概就是创建一个新的canvas，然后将要绘制的图形，先在新的canvas中绘制，然后使用drawImage()将新的canvas画到当前的canvas上，这边使用OffscreenCanvas作为新的canvas绘制参考离屏渲染：https://blog.csdn.net/qq_26733915/article/details/81675124

@Entry
@Component
struct CanPage {
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(200, 300)
  build() {
    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {
      Stack() {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .borderWidth(5)
          .borderColor('#057D02')
          .backgroundColor('#FFFFFF')
          .onReady(() => {
            let offContext = this.offCanvas.getContext("2d", this.settings)
            offContext.fillStyle = '#CDCDCD'
            offContext.fillRect(0, 0, this.offCanvas.width, 150)
            let image = this.offCanvas.transferToImageBitmap()
            this.context.setTransform(1, 0, 0, 1, 50, 200)
            this.context.transferFromImageBitmap(image)

            let img = new OffscreenCanvas(50, 80)
            let off = img.getContext("2d", this.settings)
            off.fillStyle = '#ff04269d'
            off.fillRect(0, 0, 100, img.height)
            this.context.drawImage(img.transferToImageBitmap(), 0, 0, 50, 50)
          })
      }
    }.width('100%').height('100%')
  }
}