基于ArkUI框架開發(fā)-ImageKnife渲染層重構(gòu)

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%')
  }
}

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))
   }
}

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%')
  }
}

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 = []
  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 })
  }
}