【仓颉三方库】图像处理库 —— gifdrawable4cj

介绍

基于cangjie的GIF图像渲染库

特性

• 🚀 支持播放GIF图片

• 💪 支持控制GIF播放/暂停

• 🛠️ 支持调节GIF播放速率

• 🌍 支持设置显示大小

• 💡 支持不同的拉伸类型

软件架构

架构图

GIF图片内部结构图（主要部分）

解析GIF图片流程图

源码目录

├─AppScope
├─doc
├─entry
│  └─src
│      └─main
│          ├─cangjie
│          └─resources
├─gifdrawable
│  └─src
│      └─main
│          ├─cangjie
│          │  └─src
│          │      ├─gifdisplay
│          │      ├─parser
│          │      ├─sparkmd5
│          │      └─utils
│          └─resources
└─hvigor

• AppScope 全局资源存放目录和应用全局信息配置目录
• doc API文档和使用手册存放目录
• entry 工程模块 - 编译生成一个HAP
• entry src APP代码目录
• entry src main APP项目目录
• entry src main cangjie 仓颉代码目录
• entry src main resources 资源文件目录
• gifdrawable 工程模块 - 编译生成一个har包
• gifdrawable src 模块代码目录
• gifdrawable src main 模块项目目录
• gifdrawable src main cangjie 仓颉代码目录
• gifdrawable src main resources 资源文件目录
• gifdrawable src main cangjie src gifdisplay 组件主体代码目录
• gifdrawable src main cangjie src parser 帧解码目录
• gifdrawable src main cangjie src sparkmd5 文件哈希计算代码目录
• gifdrawable src main cangjie src utils 解码工具目录
• hvigor 构建工具目录

接口说明

主要类和函数接口说明详见 API

使用说明

编译构建

通过module引入

1. 克隆下载项目
2. 将gifdrawable模块拷贝到应用项目下
3. 修改自身应用 entry 下的 oh-package.json5 文件，在 dependencies 字段添加 “gifdrawable”: “file:…/gifdrawable”

{
    "name": "entry",
    "version": "1.0.0",
    "description": "Please describe the basic information.",
    "main": "",
    "author": "",
    "license": "",
    "dependencies": {
      "gifdrawable": "file:../gifdrawable"
    }
}

4. 修改自身应用 entry/src/main/cangjie 下的 cjpm.toml 文件，在 [dependencies] 字段下添加 gifdrawable = {path = “…/…/…/…/gifdrawable/src/main/cangjie”, version = “1.0.0”}

[dependencies]
  gifdrawable = {path = "../../../../gifdrawable/src/main/cangjie", version = "1.0.0"}

5. 在项目中引用

import gifdrawable.gifdisplay.*
import gifdrawable.parser.*

功能示例

GIF动图数据解析 功能示例

1. 在UI中添加GIFComponent组件，添加需要的变量

// 创建一个控制器保证GIFComponent初始化
@State var model: ControllerOptions = ControllerOptions()

// 是否自动播放
@State var gifAutoPlay: Bool = true

// 重置GIF播放，每次取反都能生效
@State var gifReset: Bool = false

// 绘制区域宽度
@State var compWidth: Float64 = 300.0

// 绘制区域高度
@State var compHeight: Float64 = 300.0

// 添加GIFComponent组件
GIFComponent(
    model: model,  // 控制器
    autoPlay: gifAutoPlay, // 自动播放标志
    resetGif: gifReset,  // 重置标志
    canvasWidth: compWidth,  // 绘制区域宽度
    canvasHeight: compHeight // 绘制区域高度
)

2. 初始化控制器

注：这里新建控制器是方便数据处理后直接赋值给组件关联的初始化控制器，减少组件刷新次数

// 创建控制器
let modelx: ControllerOptions = ControllerOptions()

// 设置是否使用硬解码
modelx.setOpenHardware(true)

// 设置拉伸方式
modelx.setScaleType(ScaleType.FIT_CENTER)

// 设置速率
modelx.setSpeedFactor(1)

// 设置完成一次播放后的回调函数
modelx.setLoopFinish({loopTime: Option<Int64> => })

3. 加载数据（三种方式）

// 读取工程内资源
let buffer: Array<UInt8> = ResourceLoader.loadMedia(UInt32(@r(app.media.xxx).id), globalAbilityContext)

// 读取沙箱路径下资源
let buffer: Array<UInt8> = ResourceLoader.loadRawFile("/data/storage/el2/base/files/xxx.gif")

// 下载网络资源
ResourceLoader.downloadDataWithContext(
    Model("网络资源地址"),  // 下载设置
    globalAbilityContext,  // AbilityContext
    {buffer: Array<Byte> => })},  // 下载成功并读取成Array<Byte>后回调函数
    { str: String => }) // 下载错误回调函数

4. 数据转换成可显示内容

// 调用数据处理方法
modelx.loadBuffer(
    buffer, // 步骤3中获取的数据
    {error: Option<String> =>
        if (let Some(v) <- error) {
            // 错误信息处理
        } else {
            // 处理完成，开始显示
            gifAutoPlay = true
            // 将已完成数据处理的控制器赋值给组件关联的初始化控制器
            model = modelx
        }
    }
)

显示控制

// 开始
gifAutoPlay = true

// 暂停
gifAutoPlay = false

// 重置
gifReset = !gifReset

// 修改宽高
compWidth = 100.0
compHeight = 200.0

// 修改速率
model.setSpeedFactor(2)

// 修改拉伸方式
model.setScaleType(ScaleType.FIT_START)

约束与限制

在下述版本验证通过：

DevEco Studio: 5.0.3.500

Cangjie support Plugin: 5.0.3.500