caishi
/
ImageKnife
forked from floraachy/ImageKnife
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

新增ImageKnifeAnimatorComponent控制动图组件及修复部分heif无法解码 

Signed-off-by: zgf <zenggaofeng2@h-partners.com>
This commit is contained in:
zgf 2024-07-18 16:10:11 +08:00
parent 7930c50f11
commit e22c1184f4
21 changed files with 368 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG.md
View File

@ -1,5 +1,9 @@
## 3.0.1-rc.1
- 新增ImageKnifeAnimatorComponent控制动图组件
- 修复部分heif图无法解码
## 3.0.1-rc.0
- 文件缓存设置最大缓存数量改为无上限
- 文件缓存设置最大缓存数量改为无限制
## 3.0.0
- 修复图形变换的闪退问题

25
README.md
View File

@ -255,7 +255,29 @@ ImageKnifeComponent({
},syncLoad:true
})
```
#### 10.ImageKnifeAnimatorComponent 示例
```
ImageKnifeAnimatorComponent({
imageKnifeOption:{
loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
placeholderSrc:$r('app.media.loading'),
errorholderSrc:$r('app.media.failed')
},animatorOption:this.animatorOption
}).width(300).height(300).backgroundColor(Color.Orange).margin({top:30})
```
## 接口说明
### ImageKnife组件
| 组件名称 | 入参内容 | 功能简介 |
|-----------------------------|---------------------------------|--------|
| ImageKnifeComponent | ImageKnifeOption | 图片显示组件 |
| ImageKnifeAnimatorComponent | ImageKnifeOption、AnimatorOption | 动图控制组件 |
### AnimatorOption参数列表
| 参数名称 | 入参内容 | 功能简介 |
|-----------------------|-------------------------------------------------------|----------|
| state | AnimationStatus | 播放状态（可选） |
| iterations | number | 播放次数（可选） |
| reverse | boolean | 播放顺序（可选） |
### ImageKnifeOption参数列表
@ -342,4 +364,5 @@ DevEco Studio 5.0 Canary3（5.0.3.221）--SDK:API12
## 遗留问题
- 添加组件闪动问题
- ImageKnifeAnimator组件无法设置ImageFit属性
- ImageKnifeAnimator组件设置border属性无法将图片变为圆角

8
entry/src/main/ets/common/CustomEngineKeyImpl.ets
View File

@ -19,14 +19,14 @@ import { IEngineKey, ImageKnifeOption, PixelMapTransformation,SparkMD5 ,ImageKni
export class CustomEngineKeyImpl implements IEngineKey {
// 生成内存缓存key
generateMemoryKey(loadSrc: string | PixelMap | Resource, requestSource: ImageKnifeRequestSource,
imageKnifeOption: ImageKnifeOption, width?: number, height?: number): string {
imageKnifeOption: ImageKnifeOption,isAnimator?: boolean, width?: number, height?: number): string {
let key = ""
if(imageKnifeOption.signature == "aaa" && typeof loadSrc == "string") {
let num = loadSrc.indexOf("?")
let src = loadSrc.substring(0,num)
key = "loadSrc=" + src
} else {
key = "loadSrc=" + (typeof loadSrc == "string" ? loadSrc : JSON.stringify(loadSrc)) + ";"
key = (isAnimator == true ? "Animator=" : "loadSrc==") + (typeof loadSrc == "string" ? loadSrc : JSON.stringify(loadSrc)) + ";"
}
if (requestSource === ImageKnifeRequestSource.SRC) {
if (imageKnifeOption.signature !== undefined && imageKnifeOption.signature !== "") {
@ -40,14 +40,14 @@ export class CustomEngineKeyImpl implements IEngineKey {
}
// 生成文件缓存key
generateFileKey(loadSrc: string | PixelMap | Resource, signature?: string): string {
generateFileKey(loadSrc: string | PixelMap | Resource, signature?: string,isAnimator?: boolean): string {
let src = ""
if(signature == "aaa" && typeof loadSrc == "string") {
let num = loadSrc.indexOf("?")
let key = loadSrc.substring(0,num)
src = "loadSrc=" + key
} else {
src = "loadSrc=" + (typeof loadSrc == "string" ? loadSrc : JSON.stringify(loadSrc)) + ";"
src = (isAnimator == true ? "Animator=" : "loadSrc==") + (typeof loadSrc == "string" ? loadSrc : JSON.stringify(loadSrc)) + ";"
}
if (signature !== undefined && signature !== "") {
src += "signature=" + signature + ";"

41
entry/src/main/ets/pages/ImageAnimatorPage.ets Normal file
View File

@ -0,0 +1,41 @@
import { AnimatorOption, ImageKnifeAnimatorComponent } from "@ohos/libraryimageknife"
@Entry
@Component
struct ImageAnimatorPage {
@State animatorOption: AnimatorOption = {
state: AnimationStatus.Running,
iterations: -1
}
build() {
Column(){
Flex(){
Button("播放").onClick(()=>{
this.animatorOption.state = AnimationStatus.Running
})
Button("暂停").onClick(()=>{
this.animatorOption.state = AnimationStatus.Paused
})
Button("停止").onClick(()=>{
this.animatorOption.state = AnimationStatus.Stopped
})
Button("无限循环").onClick(()=>{
this.animatorOption.iterations = -1
})
Button("播放一次").onClick(()=>{
this.animatorOption.iterations = 1
})
Button("播放两次").onClick(()=>{
this.animatorOption.iterations = 2
})
}
ImageKnifeAnimatorComponent({
imageKnifeOption:{
loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
placeholderSrc:$r('app.media.loading'),
errorholderSrc:$r('app.media.failed')
},animatorOption:this.animatorOption
}).width(300).height(300).backgroundColor(Color.Orange).margin({top:30})
}.width("100%").height("100%")
}
}

8
entry/src/main/ets/pages/Index.ets
View File

@ -26,10 +26,14 @@ struct Index {
build() {
Scroll(){
Column() {
Button("测试加载多张相同图片").onClick(()=>{
Button("测试ImageAnimator组件").onClick(()=>{
router.push({
uri: 'pages/ImageAnimatorPage',
});
})
Button("测试加载多张相同图片").margin({top:10}).onClick(()=>{
router.push({
uri: 'pages/TestCommonImage',
});
})
Button("测试HSP场景预加载").margin({top:10}).onClick(()=>{

3
entry/src/main/resources/base/profile/main_pages.json
View File

@ -19,6 +19,7 @@
"pages/TestHspPreLoadImage",
"pages/TestRemoveCache",
"pages/dataShareUriLoadPage",
"pages/TestCommonImage"
"pages/TestCommonImage",
"pages/ImageAnimatorPage"
]
}

11
entry/src/ohosTest/ets/test/FileLruCache.test.ets
View File

@ -18,6 +18,8 @@ import Constants from '../../../main/ets/common/Constants';
import taskpool from '@ohos.taskpool';
import { GlobalContext } from '../../../main/ets/common/GlobalContext';
import { FileCache } from '@ohos/imageknife/src/main/ets/utils/FileCache';
import { IEngineKey, ImageKnifeOption } from '@ohos/imageknife';
import { DefaultEngineKey } from '@ohos/imageknife/src/main/ets/key/DefaultEngineKey';
export default function FileLruCacheTest() {
@ -149,6 +151,15 @@ export default function FileLruCacheTest() {
fileCache.put(JSON.stringify("xxxxx"),buf)
expect(fileCache.get(JSON.stringify("xxxxx"))?.byteLength).assertEqual(1024 * 1024)
});
it('fileCacheEngineKey', 0, () => {
let engineKey: IEngineKey = new DefaultEngineKey()
let imageKnifeOption: ImageKnifeOption = {
loadSrc:"abc"
}
let imageKey = engineKey.generateFileKey(imageKnifeOption.loadSrc,"")
let imageAnimatorKey = engineKey.generateFileKey(imageKnifeOption.loadSrc,"",true)
expect(imageKey == imageAnimatorKey).assertFalse()
});
});
}

12
entry/src/ohosTest/ets/test/MemoryLruCache.test.ets
View File

@ -19,6 +19,8 @@ import image from '@ohos.multimedia.image';
import Constants from '../../../main/ets/common/Constants';
import { MemoryLruCache } from '@ohos/imageknife/src/main/ets/utils/MemoryLruCache';
import { ImageKnifeData } from '@ohos/imageknife/src/main/ets/model/ImageKnifeData';
import { IEngineKey, ImageKnifeOption,ImageKnifeRequestSource } from '@ohos/imageknife';
import { DefaultEngineKey } from '@ohos/imageknife/src/main/ets/key/DefaultEngineKey';
export default function MemoryLruCacheTest() {
@ -118,6 +120,16 @@ export default function MemoryLruCacheTest() {
expect(memoryCache.get("ccc")).assertEqual(data)
});
it('memoryCacheEngineKey', 0, () => {
let engineKey: IEngineKey = new DefaultEngineKey()
let imageKnifeOption: ImageKnifeOption = {
loadSrc:"abc"
}
let imageKey = engineKey.generateMemoryKey(imageKnifeOption.loadSrc,ImageKnifeRequestSource.SRC,imageKnifeOption)
let imageAnimatorKey = engineKey.generateMemoryKey(imageKnifeOption.loadSrc,ImageKnifeRequestSource.SRC,imageKnifeOption,true)
expect(imageKey == imageAnimatorKey).assertFalse()
});
});
}

4
library/index.ets
View File

@ -14,9 +14,11 @@
*/
export { ImageKnifeComponent } from './src/main/ets/components/ImageKnifeComponent'
export { ImageKnifeAnimatorComponent } from './src/main/ets/components/ImageKnifeAnimatorComponent'
export { ImageKnife } from './src/main/ets/ImageKnife'
export { ImageKnifeOption } from './src/main/ets/ImageKnifeOption'
export { ImageKnifeOption , AnimatorOption } from './src/main/ets/ImageKnifeOption'
export { ImageKnifeRequest } from './src/main/ets/ImageKnifeRequest'

2
library/oh-package.json5
View File

@ -14,7 +14,7 @@
"main": "index.ets",
"repository": "https://gitee.com/openharmony-tpc/ImageKnife",
"type": "module",
"version": "3.0.1-rc.0",
"version": "3.0.1-rc.1",
"dependencies": {
"@ohos/gpu_transform": "^1.0.2"
},

4
library/src/main/ets/ImageKnife.ets
View File

@ -364,12 +364,12 @@ export class ImageKnife {
return false
}
async execute(request: ImageKnifeRequest): Promise<void> {
async execute(request: ImageKnifeRequest,isAnimator?: boolean): Promise<void> {
LogUtil.log("ImageKnife_DataTime_execute.start:"+request.imageKnifeOption.loadSrc)
if (this.headerMap.size > 0) {
request.addHeaderMap(this.headerMap)
}
this.dispatcher.enqueue(request)
this.dispatcher.enqueue(request,isAnimator)
LogUtil.log("ImageKnife_DataTime_execute.end:"+request.imageKnifeOption.loadSrc)
}

84
library/src/main/ets/ImageKnifeDispatcher.ets
View File

@ -51,7 +51,7 @@ export class ImageKnifeDispatcher {
// 开发者可配置全局缓存
private engineKey: IEngineKey = new DefaultEngineKey();
showFromMemomry(request: ImageKnifeRequest, imageSrc: string | PixelMap | Resource, requestSource: ImageKnifeRequestSource): boolean {
showFromMemomry(request: ImageKnifeRequest, imageSrc: string | PixelMap | Resource, requestSource: ImageKnifeRequestSource,isAnimator?: boolean): boolean {
LogUtil.log("ImageKnife_DataTime_showFromMemomry.start:" + request.imageKnifeOption.loadSrc)
let memoryCache: ImageKnifeData | undefined;
if ((typeof (request.imageKnifeOption.loadSrc as image.PixelMap).isEditable) == 'boolean') {
@ -62,7 +62,7 @@ export class ImageKnifeDispatcher {
}
} else {
memoryCache = ImageKnife.getInstance()
.loadFromMemoryCache(this.engineKey.generateMemoryKey(imageSrc, requestSource, request.imageKnifeOption));
.loadFromMemoryCache(this.engineKey.generateMemoryKey(imageSrc, requestSource, request.imageKnifeOption,isAnimator));
}
@ -75,7 +75,7 @@ export class ImageKnifeDispatcher {
LogUtil.log("ImageKnife_DataTime_MemoryCache_onLoadStart:" + request.imageKnifeOption.loadSrc)
}
LogUtil.log("ImageKnife_DataTime_MemoryCache_showPixelMap.start:" + request.imageKnifeOption.loadSrc)
request.ImageKnifeRequestCallback?.showPixelMap(request.componentVersion, memoryCache.source, requestSource)
request.ImageKnifeRequestCallback?.showPixelMap(request.componentVersion, memoryCache.source, requestSource,memoryCache.imageAnimator)
LogUtil.log("ImageKnife_DataTime_MemoryCache_showPixelMap.end:" + request.imageKnifeOption.loadSrc)
if (requestSource == ImageKnifeRequestSource.SRC) {
@ -97,10 +97,10 @@ export class ImageKnifeDispatcher {
}
enqueue(request: ImageKnifeRequest): void {
enqueue(request: ImageKnifeRequest,isAnimator?: boolean): void {
//1.内存有的话直接渲染
if (this.showFromMemomry(request, request.imageKnifeOption.loadSrc, ImageKnifeRequestSource.SRC)) {
if (this.showFromMemomry(request, request.imageKnifeOption.loadSrc, ImageKnifeRequestSource.SRC,isAnimator)) {
return
}
// 2.内存获取占位图
@ -114,10 +114,10 @@ export class ImageKnifeDispatcher {
this.jobQueue.add(request)
return
}
this.executeJob(request)
this.executeJob(request,isAnimator)
}
executeJob(request: ImageKnifeRequest): void {
executeJob(request: ImageKnifeRequest,isAnimator?: boolean): void {
LogUtil.log("ImageKnife_DataTime_executeJob.start:" + request.imageKnifeOption.loadSrc)
// 加载占位符
if (request.imageKnifeOption.placeholderSrc !== undefined && request.drawPlayHolderSuccess == false) {
@ -125,16 +125,16 @@ export class ImageKnifeDispatcher {
}
// 加载主图
this.getAndShowImage(request, request.imageKnifeOption.loadSrc, ImageKnifeRequestSource.SRC)
this.getAndShowImage(request, request.imageKnifeOption.loadSrc, ImageKnifeRequestSource.SRC,isAnimator)
LogUtil.log("ImageKnife_DataTime_executeJob.end:" + request.imageKnifeOption.loadSrc)
}
/**
* 获取和显示图片
*/
getAndShowImage(currentRequest: ImageKnifeRequest, imageSrc: string | PixelMap | Resource, requestSource: ImageKnifeRequestSource): void {
getAndShowImage(currentRequest: ImageKnifeRequest, imageSrc: string | PixelMap | Resource, requestSource: ImageKnifeRequestSource,isAnimator?: boolean): void {
LogUtil.log("ImageKnife_DataTime_getAndShowImage.start:" + currentRequest.imageKnifeOption.loadSrc)
let memoryKey: string = this.engineKey.generateMemoryKey(imageSrc, requestSource, currentRequest.imageKnifeOption)
let memoryKey: string = this.engineKey.generateMemoryKey(imageSrc, requestSource, currentRequest.imageKnifeOption,isAnimator)
let requestList: List<ImageKnifeRequestWithSource> | undefined = this.executingJobMap.get(memoryKey)
if (requestList == undefined) {
requestList = new List()
@ -175,7 +175,8 @@ export class ImageKnifeDispatcher {
requestSource: requestSource,
isWatchProgress: isWatchProgress,
memoryKey: memoryKey,
fileCacheFolder: ImageKnife.getInstance().getFileCache().getCacheFolder()
fileCacheFolder: ImageKnife.getInstance().getFileCache().getCacheFolder(),
isAnimator:isAnimator
}
@ -192,7 +193,7 @@ export class ImageKnifeDispatcher {
LogUtil.log("ImageKnife_DataTime_getAndShowImage_execute.start:" + currentRequest.imageKnifeOption.loadSrc)
taskpool.execute(task).then((res: Object) => {
this.doTaskCallback(res as RequestJobResult | undefined, requestList!, currentRequest, memoryKey, imageSrc, requestSource);
this.doTaskCallback(res as RequestJobResult | undefined, requestList!, currentRequest, memoryKey, imageSrc, requestSource,isAnimator);
if (isWatchProgress){
emitter.off(Constants.PROGRESS_EMITTER + memoryKey)
}
@ -208,7 +209,7 @@ export class ImageKnifeDispatcher {
})
} else { //主线程请求
requestJob(request, requestList).then((res: RequestJobResult | undefined) => {
this.doTaskCallback(res, requestList!, currentRequest, memoryKey, imageSrc, requestSource);
this.doTaskCallback(res, requestList!, currentRequest, memoryKey, imageSrc, requestSource,isAnimator);
LogUtil.log("ImageKnife_DataTime_getAndShowImage_execute.end:"+currentRequest.imageKnifeOption.loadSrc)
LogUtil.log("ImageKnife_DataTime_getAndShowImage.end:"+currentRequest.imageKnifeOption.loadSrc)
}).catch((err:BusinessError)=>{
@ -234,7 +235,7 @@ export class ImageKnifeDispatcher {
}
private doTaskCallback(requestJobResult: RequestJobResult | undefined, requestList: List<ImageKnifeRequestWithSource> ,
currentRequest: ImageKnifeRequest, memoryKey: string, imageSrc: string | PixelMap | Resource, requestSource: ImageKnifeRequestSource):void {
currentRequest: ImageKnifeRequest, memoryKey: string, imageSrc: string | PixelMap | Resource, requestSource: ImageKnifeRequestSource,isAnimator?: boolean):void {
LogUtil.log("ImageKnife_DataTime_getAndShowImage_CallBack.start:"+currentRequest.imageKnifeOption.loadSrc)
if (requestJobResult === undefined){
return
@ -275,12 +276,21 @@ export class ImageKnifeDispatcher {
imageHeight: requestJobResult.size == undefined ? 0 : requestJobResult.size.height,
type:requestJobResult.type
};
if(requestJobResult.pixelMapList != undefined) {
let imageAnimator: Array<ImageFrameInfo> = []
requestJobResult.pixelMapList.forEach((item,index)=>{
imageAnimator.push({
src:requestJobResult.pixelMapList![index],
duration:requestJobResult.delayList![index]
})
})
ImageKnifeData.imageAnimator = imageAnimator
}
// 保存内存缓存
if (currentRequest.imageKnifeOption.writeCacheStrategy !== CacheStrategy.File) {
LogUtil.log("ImageKnife_DataTime_getAndShowImage_saveMemoryCache.start:"+currentRequest.imageKnifeOption.loadSrc)
ImageKnife.getInstance()
.saveMemoryCache(this.engineKey.generateMemoryKey(imageSrc, requestSource, currentRequest.imageKnifeOption),
.saveMemoryCache(this.engineKey.generateMemoryKey(imageSrc, requestSource, currentRequest.imageKnifeOption,isAnimator),
ImageKnifeData);
LogUtil.log("ImageKnife_DataTime_getAndShowImage_saveMemoryCache.end:"+currentRequest.imageKnifeOption.loadSrc)
}
@ -297,7 +307,7 @@ export class ImageKnifeDispatcher {
requestWithSource.request.requestState === ImageKnifeRequestState.PROGRESS)) {
LogUtil.log("ImageKnife_DataTime_getAndShowImage_showPixelMap.start:"+currentRequest.imageKnifeOption.loadSrc)
requestWithSource.request.ImageKnifeRequestCallback.showPixelMap(requestWithSource.request.componentVersion,
ImageKnifeData.source, requestWithSource.source);
ImageKnifeData.source, requestWithSource.source,ImageKnifeData.imageAnimator);
LogUtil.log("ImageKnife_DataTime_getAndShowImage_showPixelMap.end:"+currentRequest.imageKnifeOption.loadSrc)
}
@ -380,7 +390,7 @@ async function requestJob(request: RequestJobRequest, requestList?: List<ImageKn
}
// 生成文件key
let fileKey = request.engineKey.generateFileKey(request.src, request.signature)
let fileKey = request.engineKey.generateFileKey(request.src, request.signature,request.isAnimator)
// 判断自定义下载
if (request.customGetImage !== undefined && request.requestSource == ImageKnifeRequestSource.SRC) {
@ -556,7 +566,43 @@ async function requestJob(request: RequestJobRequest, requestList?: List<ImageKn
let decodingOptions: image.DecodingOptions = {
editable: true,
}
if(request.isAnimator) {
if (typeValue === 'gif' || typeValue === 'webp') {
let pixelMapList: Array<PixelMap> = []
let delayList: Array<number> = []
await imageSource.createPixelMapList(decodingOptions).then(async (pixelList: Array<PixelMap>) => {
//sdk的api接口发生变更：从.getDelayTime() 变为.getDelayTimeList()
await imageSource.getDelayTimeList().then(delayTimes => {
if (pixelList.length > 0) {
for (let i = 0; i < pixelList.length; i++) {
pixelMapList.push(pixelList[i]);
if (i < delayTimes.length) {
delayList.push(delayTimes[i]);
} else {
delayList.push(delayTimes[delayTimes.length - 1])
}
}
imageSource.release();
}
})
})
return {
pixelMap: "",
bufferSize: bufferSize,
fileKey: fileKey,
type: typeValue,
pixelMapList,
delayList
}
} else {
return {
pixelMap: undefined,
bufferSize: 0,
fileKey: '',
loadFail: "ImageKnifeAnimatorComponent组件仅支持动态图",
}
}
}
let resPixelmap: PixelMap | undefined = undefined
if (typeValue === 'gif' || typeValue === 'webp') {
let size = (await imageSource.getImageInfo()).size

9
library/src/main/ets/ImageKnifeOption.ets
View File

@ -23,6 +23,15 @@ export interface HeaderOptions {
value: Object;
}
@Observed
export class AnimatorOption {
@Track
state?: AnimationStatus = AnimationStatus.Running
@Track
iterations?: number = -1
@Track
reverse?: boolean = false
}
@Observed
export class ImageKnifeOption {

2
library/src/main/ets/ImageKnifeRequest.ets
View File

@ -64,5 +64,5 @@ export enum ImageKnifeRequestState {
export interface ImageKnifeRequestCallback {
showPixelMap: (version: number, pixelMap: PixelMap | string , requestSource: ImageKnifeRequestSource) => void;
showPixelMap: (version: number, pixelMap: PixelMap | string , requestSource: ImageKnifeRequestSource,imageAnimator?: Array<ImageFrameInfo>) => void;
}

154
library/src/main/ets/components/ImageKnifeAnimatorComponent.ets Normal file
View File

@ -0,0 +1,154 @@
/*
* Copyright (C) 2024 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the 'License');
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an 'AS IS' BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { AnimatorOption, ImageKnifeOption } from '../ImageKnifeOption';
import { ImageKnifeRequest, ImageKnifeRequestState } from '../ImageKnifeRequest';
import common from '@ohos.app.ability.common';
import { ImageKnife } from '../ImageKnife';
import { LogUtil } from '../utils/LogUtil';
import { ImageKnifeRequestSource } from '../model/ImageKnifeData';
@Component
export struct ImageKnifeAnimatorComponent {
@Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption;
@Watch('watchAnimatorOption') @State animatorOption: AnimatorOption = new AnimatorOption();
@State pixelMap: PixelMap | string | undefined = undefined
@State imageAnimator: Array<ImageFrameInfo> | undefined = undefined
@State state: AnimationStatus = AnimationStatus.Running
@State iterations: number = -1
@State reverse: boolean = false
@State adaptiveWidth: Length = '100%'
@State adaptiveHeight: Length = '100%'
@State objectFit: ImageFit = ImageFit.Contain
private request: ImageKnifeRequest | undefined
private lastWidth: number = 0
private lastHeight: number = 0
private currentWidth: number = 0
private currentHeight: number = 0
private componentVersion: number = 0
private currentContext: common.UIAbilityContext | undefined = undefined
aboutToAppear(): void {
this.objectFit = this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit
}
aboutToDisappear(): void {
if (this.request !== undefined) {
this.request.requestState = ImageKnifeRequestState.DESTROY
this.request = undefined
}
}
aboutToRecycle() {
if (this.request !== undefined) {
this.request.requestState = ImageKnifeRequestState.DESTROY
this.request = undefined
}
this.objectFit = this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit
}
build() {
ImageAnimator()
.images(this.imageAnimator)
.width(this.adaptiveWidth)
.height(this.adaptiveHeight)
.border(this.imageKnifeOption.border)
.state(this.state)
.iterations(this.iterations)
.reverse(this.reverse)
.onSizeChange((oldValue:SizeOptions, newValue:SizeOptions) => {
this.currentWidth = newValue.width as number
this.currentHeight = newValue.height as number
this.lastWidth = oldValue.width as number
this.lastHeight = oldValue.height as number
if (this.currentWidth <= 0 || this.currentHeight <= 0) {
// 存在宽或者高为0,此次重回无意义,无需进行request请求
} else {
// 前提：宽高值均有效,值>0. 条件1：当前宽高与上一次宽高不同 条件2:当前是第一次绘制
if (this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth) {
LogUtil.log("execute request:width=" + this.currentWidth + " height= " + this.currentHeight)
ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight),true)
}
}
})
}
watchAnimatorOption(){
if(this.animatorOption.state != undefined) {
this.state = this.animatorOption.state
}
if(this.animatorOption.iterations != undefined) {
this.iterations = this.animatorOption.iterations
}
if(this.animatorOption.reverse != undefined) {
this.reverse = this.animatorOption.reverse
}
}
watchImageKnifeOption() {
if (this.request !== undefined) {
this.request.requestState = ImageKnifeRequestState.DESTROY
}
this.request = undefined
this.componentVersion++
ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight),true)
}
getCurrentContext(): common.UIAbilityContext {
if (this.currentContext == undefined) {
this.currentContext = getContext(this) as common.UIAbilityContext
}
return this.currentContext
}
getRequest(width: number, height: number): ImageKnifeRequest {
if (this.request == undefined) {
this.request = new ImageKnifeRequest(
this.imageKnifeOption,
this.imageKnifeOption.context !== undefined ? this.imageKnifeOption.context : this.getCurrentContext(),
width,
height,
this.componentVersion,
{
showPixelMap: async (version: number, pixelMap: PixelMap | string, requestSource: ImageKnifeRequestSource,imageAnimator?: Array<ImageFrameInfo>) => {
if (version !== this.componentVersion) {
return //针对reuse场景，不显示历史图片
}
if (imageAnimator != undefined) {
this.imageAnimator = imageAnimator
} else {
this.imageAnimator = [
{
src: pixelMap
}
]
}
if (requestSource == ImageKnifeRequestSource.SRC) {
this.objectFit =
this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit
} else if (requestSource == ImageKnifeRequestSource.PLACE_HOLDER) {
this.objectFit =
this.imageKnifeOption.placeholderObjectFit === undefined ? (this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit) : this.imageKnifeOption.placeholderObjectFit
} else {
this.objectFit =
this.imageKnifeOption.errorholderObjectFit === undefined ? (this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit) : this.imageKnifeOption.errorholderObjectFit
}
}
})
}
return this.request
}
}

8
library/src/main/ets/key/DefaultEngineKey.ets
View File

@ -22,8 +22,8 @@ import { ImageKnifeRequestSource } from '../model/ImageKnifeData';
export class DefaultEngineKey implements IEngineKey {
// 生成内存缓存key
generateMemoryKey(loadSrc: string | PixelMap | Resource, requestSource: ImageKnifeRequestSource,
imageKnifeOption: ImageKnifeOption, width?: number, height?: number): string {
let key = "loadSrc=" + (typeof loadSrc == "string" ? loadSrc : JSON.stringify(loadSrc)) + ";"
imageKnifeOption: ImageKnifeOption,isAnimator?: boolean, width?: number, height?: number): string {
let key = (isAnimator == true ? "Animator=" : "loadSrc==") + (typeof loadSrc == "string" ? loadSrc : JSON.stringify(loadSrc)) + ";"
if (requestSource === ImageKnifeRequestSource.SRC) {
if (imageKnifeOption.signature !== undefined && imageKnifeOption.signature !== "") {
key += "signature=" + imageKnifeOption.signature + ";"
@ -36,8 +36,8 @@ export class DefaultEngineKey implements IEngineKey {
}
// 生成文件缓存key
generateFileKey(loadSrc: string | PixelMap | Resource, signature?: string): string {
let src = "loadSrc=" + (typeof loadSrc == "string" ? loadSrc : JSON.stringify(loadSrc)) + ";"
generateFileKey(loadSrc: string | PixelMap | Resource, signature?: string,isAnimator?: boolean): string {
let src = (isAnimator == true ? "Animator=" : "loadSrc==") + (typeof loadSrc == "string" ? loadSrc : JSON.stringify(loadSrc)) + ";"
if (signature !== undefined && signature !== "") {
src += "signature=" + signature + ";"
}

4
library/src/main/ets/key/IEngineKey.ets
View File

@ -18,10 +18,10 @@ import { ImageKnifeRequestSource } from '../model/ImageKnifeData'
export interface IEngineKey {
// 生成内存缓存key
generateMemoryKey(loadSrc: string | PixelMap | Resource, requestSource: ImageKnifeRequestSource,
imageKnifeOption: ImageKnifeOption, width?: number, height?: number): string
imageKnifeOption: ImageKnifeOption,isAnimator?: boolean, width?: number, height?: number): string
// 生成文件缓存key
generateFileKey(loadSrc: string | PixelMap | Resource, signature?: string): string
generateFileKey(loadSrc: string | PixelMap | Resource, signature?: string,isAnimator?: boolean): string
}

10
library/src/main/ets/model/ImageKnifeData.ets
View File

@ -23,7 +23,8 @@ export interface ImageKnifeData {
source: PixelMap | string,
imageWidth: number,
imageHeight: number,
type?:string
type?:string,
imageAnimator?: Array<ImageFrameInfo>
}
/**
* onComplete成功回调
@ -75,7 +76,9 @@ export interface RequestJobResult {
fileKey: string
loadFail?: string,
size?:Size,
type?: string
type?: string,
pixelMapList?:Array<PixelMap>,
delayList?: Array<number>
}
/**
@ -97,6 +100,7 @@ export interface RequestJobRequest {
engineKey: IEngineKey
isWatchProgress: boolean
memoryKey: string
fileCacheFolder: string
fileCacheFolder: string,
isAnimator?: boolean
}

2
library/src/main/ets/utils/FileTypeUtil.ets
View File

@ -25,7 +25,7 @@ export class FileTypeUtil {
'webp': [new Uint8Array([0x52, 0x49, 0x46, 0x46])],
'tiff': [new Uint8Array([0x49, 0x20, 0x49]), new Uint8Array([0x49, 0x49, 0x2A, 0x00]), new Uint8Array([0x4D, 0x4D, 0x00, 0x2A]), new Uint8Array([0x4D, 0x4D, 0x00, 0x2B])],
// 添加更多的文件类型和特征
'heic': [new Uint8Array([0x00, 0x00, 0x00, 0x18, 0x66, 0x74, 0x79, 0x70, 0x68, 0x65, 0x69, 0x63, 0x00, 0x00, 0x00, 0x00])],
'heic': [new Uint8Array([0x00, 0x00, 0x00, 0x18, 0x66, 0x74, 0x79, 0x70, 0x68, 0x65, 0x69, 0x63, 0x00, 0x00, 0x00, 0x00]),new Uint8Array([0x00, 0x00, 0x00, 0x1C, 0x66, 0x74, 0x79, 0x70, 0x68, 0x65, 0x69, 0x63, 0x00, 0x00, 0x00, 0x00])],
};

14
library/src/main/ets/utils/MemoryLruCache.ets
View File

@ -104,8 +104,13 @@ export class MemoryLruCache implements IMemoryCache {
private removeMemorySize(value: ImageKnifeData): void {
if (value.source != undefined) {
if (typeof value.source === 'string') {
if (typeof value.source === 'string' && value.source != "") {
this.currentMemory -= value.source.length
} else if (value.source == "") {
for (let index = 0;index < value.imageAnimator!.length;index++) {
let pixelMap = value.imageAnimator![index].src as PixelMap
this.currentMemory -= pixelMap.getPixelBytesNumber()
}
} else {
this.currentMemory -= value.source.getPixelBytesNumber();
value.source.release()
@ -116,8 +121,13 @@ export class MemoryLruCache implements IMemoryCache {
private addMemorySize(value: ImageKnifeData): void {
if (value.source != undefined) {
if (typeof value.source === 'string') {
if (typeof value.source === 'string' && value.source != "") {
this.currentMemory += value.source.length
} else if (value.source == "") {
for (let index = 0;index < value.imageAnimator!.length;index++) {
let pixelMap = value.imageAnimator![index].src as PixelMap
this.currentMemory += pixelMap.getPixelBytesNumber()
}
} else {
this.currentMemory += value.source.getPixelBytesNumber();
}

4
sharedlibrary/Index.ets
View File

@ -18,11 +18,11 @@ export { InitImageKnife } from "./src/main/ets/pages/InitImageKnife"
export { IndexComponent } from "./src/main/ets/pages/Index"
export { ImageKnifeComponent } from '@ohos/imageknife'
export { ImageKnifeComponent,ImageKnifeAnimatorComponent } from '@ohos/imageknife'
export { ImageKnife } from '@ohos/imageknife'
export { ImageKnifeOption } from '@ohos/imageknife'
export { ImageKnifeOption,AnimatorOption } from '@ohos/imageknife'
export { ImageKnifeRequest } from '@ohos/imageknife'