OpenHarmony基础组件—图片加载ImageKnife

MatrixData

已于 2024-08-17 22:15:14 修改

阅读量666

点赞数 4

CC 4.0 BY-SA版权

文章标签：鸿蒙

于 2024-08-17 21:43:26 首次发布

本文链接：https://blog.csdn.net/MatrixMind/article/details/141286202

1、参考资源

OpenHarmony图形基础组件—ImageKnife_imageknife progresslistener-CSDN博客

OpenHarmony ArkUI框架开发-ImageKnife渲染层重构_imageknifecomponent 圆角-CSDN博客

鸿蒙版本：Api12

2、功能源码解析

1、ImageAnimator动画加载和控制；

组件：ImageKnifeAnimatorComponent；

主要设置：

1、ImageKnifeOption； 1、图片加载相关设置：图片地址、占位图、失败图；2、缓存相关设置：缓存策略，加载策略；3、加载任务优先级设置、加载状态回调；上下文；图片转化设置；

2、AnimatorOption；主要动画控制回调方法；state；iterations；reverseonStart；onFinish；onPause；onCancel；onRepeat；

3、Component组件相关设置；width、height、backgroundColor、margin；

加载流程

1、ImageKnifeAnimatorComponent中通过组件的生命周期处理图片加载；状态设置等；

2、使用@Monitor监听外部参数设置改变；

3、使用系统控件ImageAnimator显示加载的图片和设置图片相关属性和状态回调；

4、使用ImageKnife管理图片加载任务和图片缓存；

2、Hsp预加载图片

ImageKnife.getInstance()
  .preLoadCache('https://img.xxx')
  .then((data) => {
    console.log("preLoadImage_FileCache:" + data)
    this.imageKnifeOption.loadSrc = data
  })

由于ImageKnife是框架图片加载任务和缓存的管理类；预加载可以使用该工具中提供的加载方法实现；