鸿蒙5.0开发进阶：ArkTS API UI界面-@ohos.arkui.drawableDescriptor (DrawableDescriptor)

原创 于 2024-12-09 16:40:45 发布 · 838 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #android #鸿蒙系统 #前端 #ArkTS #ArkUI

往期鸿蒙全套实战文章必看：（文中附带全栈鸿蒙学习资料）

@ohos.arkui.drawableDescriptor (DrawableDescriptor)

本模块提供获取pixelMap的能力，包括前景、背景、蒙版和分层图标。

说明

本模块首批接口从API version 10开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。

示例效果请以真机运行为准，当前IDE预览器不支持。

导入模块

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

DrawableDescriptor

支持传入png，jpg，bmp，svg，gif，webp，astc，sut格式的资源类型。

getPixelMap

getPixelMap(): image.PixelMap

获取pixelMap。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

返回值：

类型说明
image.PixelMapPixelMap

示例：

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

当传入资源id或name为普通图片时，生成DrawableDescriptor对象。

PixelMapDrawableDescriptor12+

支持通过传入pixelMap创建PixelMapDrawableDescriptor对象。继承自DrawableDescriptor。

constructor12+

constructor(src?: image.PixelMap)

PixelMapDrawableDescriptor的构造函数。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
srcimage.PixelMap否PixelMap类型参数，存储 PixelMap 图片数据。

LayeredDrawableDescriptor

当传入资源id或name为包含前景和背景资源的json文件时，生成LayeredDrawableDescriptor对象。继承自DrawableDescriptor。

drawable.json位于项目工程entry/src/main/resources/base/media目录下。定义请参考：

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

示例：

  1. 通过json文件创建LayeredDrawableDescriptor。

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

@Entry
@Component
struct Index {
  private resManager = getContext().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. 通过PixelMapDrawableDescriptor创建LayeredDrawableDescriptor。

    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'))
    // 使用PixelMapDrawableDescriptor创建LayeredDrawableDescriptor
    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)
  }
  // 根据资源，通过图片框架获取pixelMap
  private async getPixmapFromMedia(resource: Resource) {
    let unit8Array = await getContext(this)?.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
  }
}

getForeground

getForeground(): DrawableDescriptor;

获取前景的DrawableDescriptor对象。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

返回值：

类型说明
DrawableDescriptorDrawableDescriptor对象

示例：

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

getBackground

getBackground(): DrawableDescriptor;

获取背景的DrawableDescriptor对象。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

返回值：

类型说明
DrawableDescriptorDrawableDescriptor对象

示例：

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

getMask

getMask(): DrawableDescriptor

获取蒙版的DrawableDescriptor对象。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

返回值：

类型说明
DrawableDescriptorDrawableDescriptor对象

示例：

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

getMaskClipPath

static getMaskClipPath(): string

LayeredDrawableDescriptor的静态方法，获取系统内置的裁切路径参数。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

返回值：

类型说明
string返回裁切路径的命令字符串

示例：

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

@Entry
@Component
struct Index {
build() {
  Row() {
    Column() {
      Image($r('app.media.icon'))
        .width('200px').height('200px')
        .clip(new Path({commands:LayeredDrawableDescriptor.getMaskClipPath()}))
      Text(`获取系统内置的裁剪路径参数：`)
        .fontWeight(800)
      Text(JSON.stringify(LayeredDrawableDescriptor.getMaskClipPath()))
        .padding({ left: 20, right: 20 })
    }.height('100%').justifyContent(FlexAlign.Center)
  }.width('100%')
}
}

AnimationOptions12+

PixelMap 数组通过Image组件显示时用来控制动画的播放。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
durationnumber否设置图片数组播放总时间。默认每张图片1秒。
iterationsnumber否设置图片数组播放次数。默认为1，为-1时无限播放。

示例：

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

AnimatedDrawableDescriptor12+

Image组件播放PixelMap数组时传入AnimatedDrawableDescriptor对象。继承自DrawableDescriptor。

constructor12+

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

AnimatedDrawableDescriptor的构造函数。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
pixelMapsArray<image.PixelMap>是PixelMap 数组类型参数，存储 PixelMap 图片数据。
optionsAnimationOptions否动画控制选项。

示例：

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 getContext(this)?.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
  }
}

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值