DEV Community

SoulHarbor
SoulHarbor

Posted on

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

#harmonyos #arkts

I. Advanced Rendering Features

1. Rotation & Mirroring 

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();
}
Enter fullscreen mode Exit fullscreen mode

2. Cropping 

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
}
Enter fullscreen mode Exit fullscreen mode

3. Copy/Paste Operations 

// 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);
}
Enter fullscreen mode Exit fullscreen mode

4. Region Filling 

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);
}
Enter fullscreen mode Exit fullscreen mode

II. Image Management

1. Image Operations 

// 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
}
Enter fullscreen mode Exit fullscreen mode

2. Image Export 

// 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);
}
Enter fullscreen mode Exit fullscreen mode

This implementation completes the professional rendering system with:

  • Advanced geometric transformations (rotation/mirroring)
  • Precision content manipulation (cropping/copy-paste)
  • Efficient image import/export capabilities
  • Comprehensive resource management

The architecture demonstrates best practices for HarmonyOS development:

  • Leverages system APIs for hardware acceleration
  • Implements proper resource cleanup patterns
  • Maintains clear separation between core rendering and application logic
  • Supports both basic and advanced creative workflows

This system forms the foundation for applications ranging from graphic design tools to image annotation utilities, providing the necessary performance and flexibility for professional-grade implementations.

Top comments (0)