@ohos.arkui.drawableDescriptor (DrawableDescriptor)

The DrawableDescriptor module provides APIs for obtaining pixelMap objects, including the foreground, background, mask, and layered icons.

NOTE

The initial APIs of this module are supported since API version 10. Newly added APIs will be marked with a superscript to indicate their earliest API version.

You can preview how this component looks on a real device, but not in DevEco Studio Previewer.

Modules to Import

import { DrawableDescriptor, LayeredDrawableDescriptor } from '@kit.ArkUI';

DrawableDescriptor

Resources in PNG, JPG, BMP, SVG, GIF, WEBP, ASTC, and SUT formats are supported.

getPixelMap

getPixelMap(): image.PixelMap

Obtains this pixelMap object.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Example

import { DrawableDescriptor, LayeredDrawableDescriptor } from '@kit.ArkUI'
let resManager = this.getUIContext().getHostContext()?.resourceManager
let pixmap: DrawableDescriptor = (resManager?.getDrawableDescriptor($r('app.media.icon')
    .id)) as DrawableDescriptor;
let pixmapNew: object = pixmap.getPixelMap()

Creates a DrawableDescriptor object when the passed resource ID or name belongs to a common image.

PixelMapDrawableDescriptor¹²⁺

Implements a PixelMapDrawableDescriptor object , which can be created by passing in a pixelMap object. Inherits from DrawableDescriptor.

constructor¹²⁺

constructor(src?: image.PixelMap)

A constructor used to create a PixelMapDrawableDescriptor object.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

LayeredDrawableDescriptor

Creates a LayeredDrawableDescriptor object when the passed resource ID or name belongs to a JSON file that contains foreground and background resources. Inherits from DrawableDescriptor.

The drawable.json file is located under entry/src/main/resources/base/media in the project directory. Below shows the file content:

{
  "layered-image":
  {
    "background" : "$media:background",
    "foreground" : "$media:foreground"
  }
}

Example

1. Create a LayeredDrawableDescriptor object from a JSON file.

   // xxx.ets
   import { DrawableDescriptor, LayeredDrawableDescriptor } from '@kit.ArkUI';
   
   
   @Entry
   @Component
   struct Index {
     private resManager = this.getUIContext().getHostContext()?.resourceManager;
   
   
     build() {
       Row() {
         Column() {
           Image((this.resManager?.getDrawableDescriptor($r('app.media.drawable').id) as LayeredDrawableDescriptor))
           Image(((this.resManager?.getDrawableDescriptor($r('app.media.drawable')
           .id) as LayeredDrawableDescriptor).getForeground()).getPixelMap())
         }.height('50%')
       }.width('50%')
     }
   }
   

2. Creates a LayeredDrawableDescriptor object using PixelMapDrawableDescriptor.

   import { DrawableDescriptor, LayeredDrawableDescriptor, PixelMapDrawableDescriptor } from '@kit.ArkUI';
   import { image } from '@kit.ImageKit';
   
   
   @Entry
   @Component
   struct Index {
     @State fore1: image.PixelMap|undefined = undefined;
     @State back1: image.PixelMap|undefined = undefined;
   
   
     @State foregroundDraw:DrawableDescriptor|undefined=undefined;
     @State backgroundDraw:DrawableDescriptor|undefined=undefined;
     @State maskDraw:DrawableDescriptor|undefined=undefined;
     @State maskPixel: image.PixelMap|undefined = undefined;
     @State draw : LayeredDrawableDescriptor|undefined = undefined;
     async aboutToAppear() {
       this.fore1 = await this.getPixmapFromMedia($r('app.media.foreground'));
       this.back1 = await this.getPixmapFromMedia($r('app.media.background'));
       this.maskPixel = await this.getPixmapFromMedia($r('app.media.ohos_icon_mask'));
       // Create a LayeredDrawableDescriptor object using PixelMapDrawableDescriptor.
       this.foregroundDraw = new PixelMapDrawableDescriptor(this.fore1);
       this.backgroundDraw = new PixelMapDrawableDescriptor(this.back1);
       this.maskDraw = new PixelMapDrawableDescriptor(this.maskPixel);
   
   
       this.draw = new LayeredDrawableDescriptor(this.foregroundDraw,this.backgroundDraw,this.maskDraw);
     }
     build() {
       Row() {
         Column() {
             Image(this.draw)
               .width(300)
               .height(300)
         }.height('100%').justifyContent(FlexAlign.Center)
       }.width('100%').height("100%").backgroundColor(Color.Pink)
     }
     // Obtain pixelMap from a resource through the image framework based on the resource
     private async getPixmapFromMedia(resource: Resource) {
       let unit8Array = await this.getUIContext().getHostContext()?.resourceManager?.getMediaContent({
         bundleName: resource.bundleName,
         moduleName: resource.moduleName,
         id: resource.id
       });
       let imageSource = image.createImageSource(unit8Array?.buffer.slice(0, unit8Array.buffer.byteLength));
       let createPixelMap: image.PixelMap = await imageSource.createPixelMap({
         desiredPixelFormat: image.PixelMapFormat.BGRA_8888
       });
       await imageSource.release();
       return createPixelMap;
     }
   }
   

constructor¹²⁺

constructor(foreground?: DrawableDescriptor, background?: DrawableDescriptor, mask?: DrawableDescriptor)

A constructor used to create a LayeredDrawableDescriptor object.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

getForeground

getForeground(): DrawableDescriptor

Obtains the DrawableDescriptor object of the foreground.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Example

import { DrawableDescriptor, LayeredDrawableDescriptor } from '@kit.ArkUI';
let resManager = this.getUIContext().getHostContext()?.resourceManager;
let drawable: LayeredDrawableDescriptor = (resManager?.getDrawableDescriptor($r('app.media.drawable')
    .id)) as LayeredDrawableDescriptor;
let drawableNew: object = drawable.getForeground();

getBackground

getBackground(): DrawableDescriptor

Obtains the DrawableDescriptor object of the background.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Example

import { DrawableDescriptor, LayeredDrawableDescriptor } from '@kit.ArkUI';
let resManager = this.getUIContext().getHostContext()?.resourceManager;
let drawable: LayeredDrawableDescriptor = (resManager?.getDrawableDescriptor($r('app.media.drawable')
    .id)) as LayeredDrawableDescriptor;
let drawableNew: object = drawable.getBackground();

getMask

getMask(): DrawableDescriptor

Obtains the DrawableDescriptor object of the mask.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Example

import { DrawableDescriptor, LayeredDrawableDescriptor } from '@kit.ArkUI';
let resManager = this.getUIContext().getHostContext()?.resourceManager;
let drawable: LayeredDrawableDescriptor = (resManager?.getDrawableDescriptor($r('app.media.drawable')
    .id)) as LayeredDrawableDescriptor;
let drawableNew: object = drawable.getMask();

getMaskClipPath

static getMaskClipPath(): string

Obtains the built-in clipping path parameters of the system. It is a static method of LayeredDrawableDescriptor.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Example

// xxx.ets
import { DrawableDescriptor, LayeredDrawableDescriptor } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Image($r('app.media.icon'))
          .width('200px').height('200px')
          .clipShape(new Path({commands:LayeredDrawableDescriptor.getMaskClipPath()}))
        Text(`Obtain the built-in clip path parameters:`)
          .fontWeight(800)
        Text(JSON.stringify(LayeredDrawableDescriptor.getMaskClipPath()))
          .padding({ left: 20, right: 20 })
      }.height('100%').justifyContent(FlexAlign.Center)
    }.width('100%')
  }
}

AnimationOptions¹²⁺

Provides the playback options of the animation with a pixel map image array in an Image component.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Example

import { AnimationOptions } from '@kit.ArkUI';
@Entry
@Component
struct Example {
  options: AnimationOptions = { duration: 2000, iterations: 1 };
  build() {
  }
}

AnimatedDrawableDescriptor¹²⁺

Implements an AnimatedDrawableDescriptor object, which can be passed in when the Image component is used to play the pixel map image array. Inherits from DrawableDescriptor.

constructor¹²⁺

constructor(pixelMaps: Array<image.PixelMap>, options?: AnimationOptions)

A constructor used to create an AnimatedDrawableDescriptor instance.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Example

import { AnimationOptions, AnimatedDrawableDescriptor } from '@kit.ArkUI';
import { image } from '@kit.ImageKit';

@Entry
@Component
struct Example {
  pixelmaps: Array<image.PixelMap>  = [];
  options: AnimationOptions = {duration:1000, iterations:-1};
  @State animated: AnimatedDrawableDescriptor  = new AnimatedDrawableDescriptor(this.pixelmaps, this.options);
  async aboutToAppear() {
    this.pixelmaps.push(await this.getPixmapFromMedia($r('app.media.icon')));
    this.animated = new AnimatedDrawableDescriptor(this.pixelmaps, this.options);
  }
  build() {
    Column() {
      Row() {
        Image(this.animated)
      }
    }
  }
  private async getPixmapFromMedia(resource: Resource) {
    let unit8Array = await this.getUIContext().getHostContext()?.resourceManager?.getMediaContent({
      bundleName: resource.bundleName,
      moduleName: resource.moduleName,
      id: resource.id
    });
    let imageSource = image.createImageSource(unit8Array?.buffer.slice(0, unit8Array.buffer.byteLength));
    let createPixelMap: image.PixelMap = await imageSource.createPixelMap({
      desiredPixelFormat: image.PixelMapFormat.RGBA_8888
    });
    await imageSource.release();
    return createPixelMap;
  }
}

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ArkUI

harmony 鸿蒙ARKUI_TextPickerCascadeRangeContent

harmony 鸿蒙ARKUI_TextPickerRangeContent

harmony 鸿蒙ArkUI_AnimateCompleteCallback

harmony 鸿蒙ArkUI_AttributeItem

harmony 鸿蒙ArkUI_ColorStop

harmony 鸿蒙ArkUI_ContextCallback

harmony 鸿蒙ArkUI_EventModule

harmony 鸿蒙ArkUI_ExpectedFrameRateRange

harmony 鸿蒙ArkUI_IntOffset