ArkTS Multi-Layer Image Rendering Class Implementation (Part II)

public async turn90Area(fromX: number, fromY: number, toX: number, toY: number, counterclockwise?: boolean) {
  const image = this.hiddenContext.getPixelMap(fromX, fromY, toX - fromX, toY - fromY);
  if (image) await image.rotate(90); // GPU-accelerated rotation via system APIs
  // Clear original area and render rotated content
}

public async flipArea(fromX: number, fromY: number, toX: number, toY: number, horizontally?: boolean) {
  const image = await XImageBitmap.cropImageBitmap(...);
  this.hiddenContext.save();
  // Clear original area
  this.hiddenContext.scale(horizontal ? -1 : 1, horizontal ? 1 : -1); // Mirror transformation
  this.hiddenContext.drawImage(image, horizontal ? -toX : fromX, horizontal ? fromY : -toY);
  this.hiddenContext.restore();
}

public async cropArea(fromX: number, fromY: number, toX: number, toY: number) {
  const img = await XImageBitmap.cropImageBitmap(...);
  // Resize canvas and redraw content
  this.widthPX = toX - fromX;
  this.heightPX = toY - fromY;
  this.hiddenCanvas = new OffscreenCanvas(this.widthPX, this.heightPX);
  this.hiddenContext.drawImage(img, 0, 0);
  img.close(); // Resource cleanup
}

// Copy selected area to clipboard
this.copyArea(fromX, fromY, toX, toY).then(() => {
  this.setEmptyArea(fromX, fromY, toX, toY); // Cut operation
});

// Paste clipboard content
public pasteArea(fromX: number, fromY: number, content: ImageBitmap) {
  this.hiddenContext.drawImage(content, fromX, fromY);
}

public fillArea(fromX: number, fromY: number, toX: number, toY: number, color: string) {
  this.hiddenContext.fillStyle = color;
  this.hiddenContext.fillRect(fromX, fromY, toX - fromX, toY - fromY);
}

// Basic image placement
public drawImage(img: ImageBitmap, fromX: number, fromY: number) {
  this.hiddenContext.drawImage(img, fromX, fromY);
  img.close(); // Immediate resource release
}

// Advanced image composition
public setImage(img: ImageBitmap, fromX: number, fromY: number) {
  this.hiddenContext.globalCompositeOperation = 'source-in'; // Clipping mask effect
  this.hiddenContext.drawImage(img, fromX, fromY);
  this.hiddenContext.globalCompositeOperation = 'source-over'; // Restore normal mode
}

// Get raw pixel data
public async getPixelMap() {
  return this.hiddenContext.getPixelMap(0, 0, this.widthPX, this.heightPX);
}

// Export as ImageBitmap
public getImageBitmapWithPromise() {
  const image = this.hiddenCanvas.transferToImageBitmap();
  return XImageBitmap.cropImageBitmap(image, 0, 0, this.widthPX, this.heightPX);
}