HarmonyOS鸿蒙Next中想要把图片画满Canvas，需要怎么设置drawImage的参数

HarmonyOS鸿蒙Next中想要把图片画满Canvas，需要怎么设置drawImage的参数

想要在canvas上绘制网络图片，但是绘制的图片没有撑满Canvas, api16, 请赐教

// TestPage.ets
import { util } from '@kit.ArkTS';
import { image } from '@kit.ImageKit';

async function loadImageToBitmap(url: string): Promise<ImageBitmap> {
  // 1. 发起网络请求获取图片数据
  const httpRequest = http.createHttp();
  const response = await httpRequest.request(url, {
    method: http.RequestMethod.GET,
    expectDataType: http.HttpDataType.ARRAY_BUFFER // 接收二进制数据
  });

  // 2. 获取二进制数据
  const arrayBuffer = response.result as ArrayBuffer;
  if (!arrayBuffer) {
    throw new Error('Failed to download image');
  }

  // 3. 创建 ImageSource 对象并解码为 PixelMap
  const imageSource = image.createImageSource(arrayBuffer);
  const pixelMap: PixelMap = await imageSource.createPixelMap();

  pixelMap.getImageInfo().then(res => {
    console.log("pixel imageInfo: ", JSON.stringify(res.size))
  })

  // 4. 将 PixelMap 转换为 ImageBitmap
  const imageBitmap: ImageBitmap = new ImageBitmap(pixelMap)
  return imageBitmap;
}

const imageUrl = 'https://img2.baidu.com/it/u=3826169544,1465685839&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1309'

const COMPONENT_WIDTH = 600;
const COMPONENT_HEIGHT = 400;

@ObservedV2
class Pos {
  @Trace
  x: number = 0;
  @Trace
  y: number = 0;
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}

@Entry
@ComponentV2
struct Sliver {
  @Local startPos: Pos = new Pos(10, 50); // 移动方块起始点
  @Local targetPos: Pos = new Pos(130, 50)
  @Local x: number = 0;
  @Local intervalId: number = -1;
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @Local outSetValueOne: number = 0;
  @Local message: string = 'Base64ToPixelMap';
  @Local private pixelMap: PixelMap | null = null;

  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)

  init = async () => {
    try {
      const res = await loadImageToBitmap(imageUrl)

      let offContext: OffscreenCanvasRenderingContext2D = this.offCanvas.getContext("2d", this.settings)

      offContext.save() // save the default state
      // 绘制底图
      offContext.drawImage(res,
        0, 0, COMPONENT_WIDTH, COMPONENT_HEIGHT /COMPONENT_WIDTH *(COMPONENT_WIDTH),
        0, 0, COMPONENT_WIDTH, COMPONENT_HEIGHT,
      )

      let image = this.offCanvas.transferToImageBitmap()
      this.context.transferFromImageBitmap(image)
      res.close()
    } catch (e) {
      console.log('draw sliver fail: ', e.message)
    }
  }

  aboutToAppear(): void {
    this.init()
  }

  build() {
    Row({space: 50}) {
      Image(imageUrl).width(300)
      Column() {
        RelativeContainer() {
          Canvas(this.context)
            .width(600)
            .height(400)
            .backgroundColor('#aaff00')
        }
        .width(COMPONENT_WIDTH).height(COMPONENT_HEIGHT)
        .backgroundColor(Color.Blue)
      }
      // .width(700)
      .alignItems(HorizontalAlign.Start)
    }.width('100%').justifyContent(FlexAlign.Center)
  }
}