ImageKnife是一款圖像加載緩存庫，主要功能特性如下：

●支持內(nèi)存緩存，使用LRUCache算法，對(duì)圖片數(shù)據(jù)進(jìn)行內(nèi)存緩存。

●支持磁盤緩存，對(duì)于下載圖片會(huì)保存一份至磁盤當(dāng)中。

●支持進(jìn)行圖片變換：支持圖像像素源圖片變換效果。

●支持用戶配置參數(shù)使用：(例如：配置是否開啟一級(jí)內(nèi)存緩存，配置磁盤緩存策略，配置僅使用緩存加載數(shù)據(jù)，配置圖片變換效果，配置占位圖，配置加載失敗占位圖等)。

更多細(xì)節(jié)請(qǐng)?jiān)L問源碼倉庫地址：OpenHarmony-TPC/ImageKnife

背景說明

早期ImageKnife三方庫在實(shí)現(xiàn)渲染部分的時(shí)候，使用的是image組件來展示圖片的。由于image組件其實(shí)是一個(gè)完整的集加載解析和圖片展示的組件，渲染的模式只能通過配置固定參數(shù)進(jìn)行，面對(duì)復(fù)雜的需求場(chǎng)景，可能會(huì)出現(xiàn)擴(kuò)展性不夠的情況。

現(xiàn)在隨著時(shí)間的推移渲染組件又多了一位重量級(jí)選手Canvas組件?？梢酝ㄟ^2個(gè)組件渲染層的能力對(duì)比進(jìn)行判斷渲染層最終交由哪個(gè)組件展示。

如果想了解更多ImageKnife的背景知識(shí)，可以點(diǎn)擊鏈接查看之前的文章介紹：

舊版本ImageKnife加載流程介紹

華為開發(fā)者論壇

組件選型，能力對(duì)比

首先我們來看看Image組件和Canvas組件對(duì)于渲染這一塊的支持情況。

從上表我們可以看出：

Image組件雖然支持了PixelMap的繪制，但是基本沒有繪制控制能力，而且擴(kuò)展性能力也比較弱，并且渲染過程不可見，也無法對(duì)繪制內(nèi)容進(jìn)行更多操作。

而Canvas組件屬于更加底層的渲染組件，可以完美地控制繪制內(nèi)容，并且渲染過程可見，符合了開發(fā)者對(duì)于擴(kuò)展性要求較高的定制場(chǎng)景。

重構(gòu)前后能力對(duì)比

重構(gòu)完成的內(nèi)容

1. 使用canvas組件替代Image組件進(jìn)行渲染展示圖片。

2. 所有圖像數(shù)據(jù)在渲染層都轉(zhuǎn)換為PixelMap，方便統(tǒng)一管理和擴(kuò)展。

3. 所有回調(diào)節(jié)點(diǎn)，統(tǒng)一抽象成接口，方便后續(xù)進(jìn)行擴(kuò)展，提高代碼可維護(hù)性。

4. 所有的回調(diào)節(jié)點(diǎn)繪制的實(shí)現(xiàn)，都采用了責(zé)任鏈模式，提高了自定義繪制擴(kuò)展能力。

5. 將部分通用方法封裝成工廠方法，減少開發(fā)者代碼量。

6. 通用方法從配置參數(shù)剝離，可采用鏈?zhǔn)秸{(diào)用方式使用這些方法。

7. 為了支持列表ImageKnifeOption參數(shù)使用@LinkObject修飾，同時(shí)ImageKnifeOption類型被@Observed修飾繼承，不可被繼承。

重構(gòu)中比較重要的點(diǎn)

點(diǎn)1：回調(diào)接口抽象為IDrawLifeCycle接口

渲染繪制是主線程才能操作。因此我們可以對(duì)渲染順序進(jìn)行了梳理，大致流程：展示占位圖->展示網(wǎng)絡(luò)加載進(jìn)度->展示縮略圖->展示主圖->展示重試圖層->展示失敗占位圖

這里每個(gè)藍(lán)色的小方格都代表著一個(gè)數(shù)據(jù)返回的回調(diào)接口，我們需要在這個(gè)回調(diào)接口，處理接下來內(nèi)容渲染的展示操作。因?yàn)槊總€(gè)回調(diào)的流程是固定的，有點(diǎn)像生命周期的流程。所以我這邊抽象成接口IDrawLifeCycle繪制生命周期進(jìn)行表達(dá)。這其實(shí)也是為了后面擴(kuò)展做了準(zhǔn)備。

點(diǎn)2：繪制實(shí)現(xiàn)采用責(zé)任鏈模式

我們支持了用戶配置自定義繪制和全局配置自定義繪制的能力。采用了責(zé)任鏈模式實(shí)現(xiàn)，用戶參數(shù)設(shè)置->全局參數(shù)設(shè)置->自定義組件內(nèi)部設(shè)置。這樣設(shè)計(jì)的好處就是保留了用戶擴(kuò)展的能力，用戶可以參與自定義繪制。

點(diǎn)3：提供了ImageKnifeDrawFactory工廠類

在開發(fā)者需要進(jìn)行自定義繪制時(shí)，必須實(shí)現(xiàn)IDrawLifeCycle的6個(gè)接口。為了簡(jiǎn)化開發(fā)者操作，這里提供了ImageKnifeDrawFactory工廠類。

ImageKnifeDrawFactory里面封裝了圓角、橢圓、百分比下載等實(shí)現(xiàn)，簡(jiǎn)化用戶操作。當(dāng)然更多的需求，可以參考該工廠類自行擴(kuò)展實(shí)現(xiàn)。

這里我們提供簡(jiǎn)單的場(chǎng)景示例：

場(chǎng)景1：一句代碼，加個(gè)圓角效果

代碼如下:

import {ImageKnifeComponent} from '@ohos/imageknife'
import {ImageKnifeOption} from '@ohos/imageknife'
import {ImageKnifeDrawFactory} from '@ohos/imageknife'
@Entry
@Component
struct Index {
  @State imageKnifeOption1: ImageKnifeOption =
    { // 加載一張本地的png資源（必選）
      loadSrc: $r('app.media.pngSample'),
      // 主圖的展示模式是 縮放至適合組件大小，并且在組件底部繪制
      mainScaleType: ScaleType.FIT_END,
      // 占位圖使用本地資源icon_loading（可選）
      placeholderSrc: $r('app.media.icon_loading'),
      // 失敗占位圖使用本地資源icon_failed（可選）
      errorholderSrc: $r('app.media.icon_failed'),
      // 繪制圓角30，邊框5，邊框"#ff00ff".用戶自定義繪制（可選）
      drawLifeCycle:ImageKnifeDrawFactory.createRoundLifeCycle(5,"#ff00ff",30)
    };
  build() {
    Scroll() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
          .width(300) // 自定義組件已支持設(shè)置通用屬性和事件，這里寬高設(shè)置放在鏈?zhǔn)秸{(diào)用中完成
          .height(300)
      }
    }
    .width('100%')
    .height('100%')
  }
}

場(chǎng)景2：全局配置網(wǎng)絡(luò)下載百分比效果展示

僅需一句代碼所有網(wǎng)絡(luò)圖片加載都能新增網(wǎng)絡(luò)下載百分比效果展示。代碼如下:

import AbilityStage from '@ohos.application.Ability'
import { ImageKnife,ImageKnifeDrawFactory} from '@ohos/imageknife'

export default class EntryAbility extends Ability {
    onCreate(want,launchParam) {
        globalThis.ImageKnife = ImageKnife.with(this.context);
        // 全局配置網(wǎng)絡(luò)加載進(jìn)度條       
        globalThis.ImageKnife.setDefaultLifeCycle(ImageKnifeDrawFactory.createProgressLifeCycle("#10a5ff", 0.5))
    }
}

這里大家可能會(huì)問，為什么會(huì)將這個(gè)IDrawLifeCycle放在EntryAbility里面實(shí)現(xiàn)？

這是因?yàn)榫W(wǎng)絡(luò)下載百分比進(jìn)度很多時(shí)候都是全局通用，如果有需要全局配置的自定義展示方案。推薦在EntryAbility里面，往ImageKnife的setDefaultLifeCycle函數(shù)中注入，即可將ImageKnifeComponent中的默認(rèn)繪制方案替換。

在這里我們實(shí)現(xiàn)的效果如下圖所示。

點(diǎn)4：通用屬性方法和屬性已經(jīng)支持鏈?zhǔn)秸{(diào)用

比如下面的代碼的寬高已經(jīng)不用設(shè)置在ImageKnifeOption對(duì)象中了，直接在自定義組件下方鏈?zhǔn)秸{(diào)用設(shè)置即可。

import {ImageKnifeComponent,ImageKnifeOption,ImageKnifeDrawFactory} from '@ohos/imageknife'
@Entry
@Component
struct Index {
  @State imageKnifeOption1: ImageKnifeOption =
    { // 加載一張本地的png資源（必選）
      loadSrc: $r('app.media.pngSample'),
    };
  build() {
    Scroll() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
          .width(300) // 自定義組件已支持設(shè)置通用屬性和事件，這里寬高設(shè)置放在鏈?zhǔn)秸{(diào)用中完成
          .height(300)
      }
    }
    .width('100%')
    .height('100%')
  }
}

點(diǎn)5：如何在列表使用

支持列表使用圖片加載，只需要維護(hù)一個(gè)@State options:Array<ImageKnifeOption> = []

對(duì)象即可

import {ImageKnifeOption,ImageKnifeComponent} from '@ohos/imageknife'
@Entry
@Component
struct BasicTestFeatureAbilityPage {
  urls=[
   "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
   "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
   "http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
   "http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
   "http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
 ]
  @State options:Array<ImageKnifeOption> = []
  aboutToAppear(){
    this.options =  this.urls.map((url)=>{
      return {
        loadSrc:url
      }
    })
    console.log('this.options length ='+this.options.length)
  }
  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Column() {
        List({ space: 20, initialIndex: 0 }) {
          ForEach(this.options, (item) => {
            ListItem() {
              ImageKnifeComponent({imageKnifeOption:item}).width(300).height(300)
            }
          }, item => item.loadSrc)
        }
        .listDirection(Axis.Vertical) // 排列方向
        .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之間的分界線
        .edgeEffect(EdgeEffect.None) // 滑動(dòng)到邊緣無效果
        .chainAnimation(false) // 聯(lián)動(dòng)特效關(guān)閉
      }.width('100%')
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}

渲染層重構(gòu)的總結(jié)

綜上可知，此次重構(gòu)渲染層，一共新增了6個(gè)基礎(chǔ)能力，適配了IDE最新版特性自定義組件可鏈?zhǔn)秸{(diào)用通用屬性和方法，并且采用適合的設(shè)計(jì)模式保留了自定義組件繪制部分的拓展能力。展示了部分常用場(chǎng)景下使用代碼的方式，幫助開發(fā)者更快上手開發(fā)。

最后在OpenHarmony不斷推陳出新之際，三方庫ImageKnife也應(yīng)該激流勇進(jìn)，不斷地提升組件的實(shí)用性和適用性，為開發(fā)者創(chuàng)造一個(gè)良好的開發(fā)體驗(yàn)。

我們將會(huì)持續(xù)更新ImageKnife三方庫，后續(xù)會(huì)切換成GPU來渲染圖片變換能力，不斷進(jìn)行性能優(yōu)化，提升ImageKnife三方庫。

同時(shí)也歡迎開發(fā)者使用和提issue。文章來源地址http://www.zghlxwxcb.cn/news/detail-409765.html