floraachy
/
ImageKnife
mirror of https://gitee.com/openharmony-tpc/ImageKnife.git
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

新增gif播放次数 

Signed-off-by: zenggaofeng <zenggaofeng2@h-partners.com>
This commit is contained in:
zenggaofeng 2024-04-07 10:44:47 +08:00
parent 4d5728dc3a
commit f57fa66fab
8 changed files with 109 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -1,4 +1,5 @@
## 2.1.2-rc.12 ## 2.1.2-rc.12
- 新增gif播放次数功能
- 新增磁盘预加载返回文件路径接口prefetchToDiskCache - 新增磁盘预加载返回文件路径接口prefetchToDiskCache
## 2.1.2-rc.11 ## 2.1.2-rc.11

54
README.md
View File

@ -107,33 +107,33 @@ imageKnifeOption = {
### ImageKnifeOption参数列表 ### ImageKnifeOption参数列表
| 参数名称 | 入参内容 | 功能简介 | | 参数名称 | 入参内容 | 功能简介 |
| ---------------------------- | ------------------------------------------------------------ |-----------------------------------------------| | ---------------------------- |----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------|
| loadSrc | string\| PixelMap\ |Resource | 图片数据源 | | loadSrc | string\ | PixelMap\ |Resource | 图片数据源 |
| mainScaleType | ScaleType | 设置主图展示样式（可选） | | mainScaleType | ScaleType | 设置主图展示样式（可选） |
| strategy | DiskStrategy | 设置磁盘缓存策略（可选） | | strategy | DiskStrategy | 设置磁盘缓存策略（可选） |
| dontAnimateFlag | boolean | gif加载展示一帧（可选） | | dontAnimateFlag | boolean | gif加载展示一帧（可选） |
| placeholderSrc | PixelMap\| Resource | 占位图数据源 | | placeholderSrc | PixelMap\ | Resource | 占位图数据源 |
| placeholderScaleType | ScaleType | 设置占位图展示样式（可选） | | placeholderScaleType | ScaleType | 设置占位图展示样式（可选） |
| errorholderSrc | PixelMap\| Resource | 错误占位图数据源 | | errorholderSrc | PixelMap\ | Resource | 错误占位图数据源 |
| errorholderSrcScaleType | ScaleType | 设置失败占位图展示样式（可选） | | errorholderSrcScaleType | ScaleType | 设置失败占位图展示样式（可选） |
| retryholderSrc | PixelMap\| Resource | 重试占位图数据源 | | retryholderSrc | PixelMap\ | Resource | 重试占位图数据源 |
| retryholderScaleType | ScaleType | 设置重试占位图展示样式（可选） | | retryholderScaleType | ScaleType | 设置重试占位图展示样式（可选） |
| thumbSizeMultiplier | number 范围(0,1] | 设置缩略图占比（可选） | | thumbSizeMultiplier | number 范围(0,1] | 设置缩略图占比（可选） |
| thumbSizeDelay | number | 设置缩略图展示时间（可选） | | thumbSizeDelay | number | 设置缩略图展示时间（可选） |
| thumbSizeMultiplierScaleType | ScaleType | 设置缩略图展示样式（可选） | | thumbSizeMultiplierScaleType | ScaleType | 设置缩略图展示样式（可选） |
| displayProgress | boolean | 设置是否展示下载进度条（可选） | | displayProgress | boolean | 设置是否展示下载进度条（可选） |
| canRetryClick | boolean | 设置重试图层是否点击重试（可选） | | canRetryClick | boolean | 设置重试图层是否点击重试（可选） |
| onlyRetrieveFromCache | boolean | 仅使用缓存加载数据（可选） | | onlyRetrieveFromCache | boolean | 仅使用缓存加载数据（可选） |
| isCacheable | boolean | 是否开启一级内存缓存（可选） | | isCacheable | boolean | 是否开启一级内存缓存（可选） |
| gif | {<br/> // 返回一周期动画gif消耗的时间<br/> loopFinish?: (loopTime?) => void<br/> // gif播放速率相关<br/> speedFactory?: number<br/> // 直接展示gif第几帧数据<br/> seekTo?: number<br/> } | GIF播放控制能力（可选） | | gif | {<br/> // 返回一周期动画gif消耗的时间<br/> loopFinish?: (loopTime?) => void<br/> // gif播放速率相关<br/> speedFactory?: number<br/> // 直接展示gif第几帧数据<br/> seekTo?: number<br/> playTimes?: number<br/> } | GIF播放控制能力（可选） |
| transformation | BaseTransform<PixelMap> | 单个变换（可选） | | transformation | BaseTransform<PixelMap> | 单个变换（可选） |
| transformations | Array<BaseTransform<PixelMap>> | 多个变换,目前仅支持单个变换（可选） | | transformations | Array<BaseTransform<PixelMap>> | 多个变换,目前仅支持单个变换（可选） |
| allCacheInfoCallback | IAllCacheInfoCallback | 输出缓存相关内容和信息（可选） | | allCacheInfoCallback | IAllCacheInfoCallback | 输出缓存相关内容和信息（可选） |
| signature | ObjectKey | 自定key（可选） | | signature | ObjectKey | 自定key（可选） |
| **drawLifeCycle** | **IDrawLifeCycle** | **用户自定义实现绘制方案（可选）** | | **drawLifeCycle** | **IDrawLifeCycle** | **用户自定义实现绘制方案（可选）** |
| imageSmoothingEnabled | boolean | 抗锯齿是否开启属性配置，设置为false时，imageSmoothingQuality失效 | | imageSmoothingEnabled | boolean | 抗锯齿是否开启属性配置，设置为false时，imageSmoothingQuality失效 |
| imageSmoothingQuality | AntiAliasing | 抗锯齿属性配置 | | imageSmoothingQuality | AntiAliasing | 抗锯齿属性配置 |
其他参数只需要在ImageKnifeOption对象上按需添加即可。 其他参数只需要在ImageKnifeOption对象上按需添加即可。

5
entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
View File

@ -70,7 +70,10 @@ struct IndexFunctionDemo {
console.log("测试ImageKnifeComponent图片高度自适应") console.log("测试ImageKnifeComponent图片高度自适应")
router.pushUrl({ url: "pages/testImageKnifeAutoHeightPage" }); router.pushUrl({ url: "pages/testImageKnifeAutoHeightPage" });
}).margin({ top: 5, left: 3 }) }).margin({ top: 5, left: 3 })
Button("测试gif播放次数")
.onClick(() => {
router.pushUrl({ url: "pages/testGifPlayTimesPage" });
}).margin({ top: 15 })
}.width('100%').height(60).backgroundColor(Color.Pink) }.width('100%').height(60).backgroundColor(Color.Pink)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

64
entry/src/main/ets/pages/testGifPlayTimesPage.ets Normal file
View File

@ -0,0 +1,64 @@
/*
* 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 { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife'
@Entry
@Component
struct TestGifPlayTimesPage {
@State ImageKnifeOption1: ImageKnifeOption = {
loadSrc: $r('app.media.icon'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed')
}
build() {
Scroll() {
Column() {
Text("测试gif播放次数").fontSize(25)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button("加载网络gif").onClick(() => {
this.ImageKnifeOption1 = {
loadSrc: "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed')
}
})
Button("设置gif播放1次").onClick(() => {
this.ImageKnifeOption1 = {
loadSrc: "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
gif: {
playTimes: 1
}
}
})
Button("设置gif播放2次").onClick(() => {
this.ImageKnifeOption1 = {
loadSrc: "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
gif: {
playTimes: 2
}
}
})
}
ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption1 }).width(300).height(300).borderWidth(3)
}
}
}
}

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

@ -18,6 +18,7 @@
"pages/testImageKnifeOptionChangedPage3", "pages/testImageKnifeOptionChangedPage3",
"pages/testImageKnifeOptionChangedPage4", "pages/testImageKnifeOptionChangedPage4",
"pages/testImageKnifeOptionChangedPage5", "pages/testImageKnifeOptionChangedPage5",
"pages/testGifPlayTimesPage",
"pages/compressPage", "pages/compressPage",
"pages/testAllCacheInfoPage", "pages/testAllCacheInfoPage",
"pages/cropImagePage2", "pages/cropImagePage2",

2
library/src/main/ets/components/imageknife/ImageKnife.ets
View File

@ -600,7 +600,7 @@ export class ImageKnife {
request.progressFunc.asyncSuccess(percent); request.progressFunc.asyncSuccess(percent);
} }
}); });
taskpool.execute(task).then((data: ESObject) => { taskpool.execute(task,request.priority).then((data: ESObject) => {
if (usageType == Constants.PLACE_HOLDER) { if (usageType == Constants.PLACE_HOLDER) {
if ((typeof (data as PixelMap).isEditable) == 'boolean') { if ((typeof (data as PixelMap).isEditable) == 'boolean') {
let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, data as PixelMap); let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, data as PixelMap);

10
library/src/main/ets/components/imageknife/ImageKnifeComponent.ets
View File

@ -46,6 +46,8 @@ export struct ImageKnifeComponent {
private gifLoopDuration: number = 0 private gifLoopDuration: number = 0
private startGifLoopTime: number = 0 private startGifLoopTime: number = 0
private endGifLoopTime: number = 0 private endGifLoopTime: number = 0
// gif 播放次数
private playTimes: number = 0
// 抗锯齿属性 // 抗锯齿属性
private imageSmoothingQuality: ImageSmoothingQuality = 'low'; private imageSmoothingQuality: ImageSmoothingQuality = 'low';
private imageSmoothingEnabled: boolean = true; private imageSmoothingEnabled: boolean = true;
@ -812,6 +814,14 @@ export struct ImageKnifeComponent {
} }
// draw Frame // draw Frame
this.drawFrame(this.renderFrames_frames, this.renderFrames_index, this.renderFrames_context, this.renderFrames_compWidth, this.renderFrames_compHeight); this.drawFrame(this.renderFrames_frames, this.renderFrames_index, this.renderFrames_context, this.renderFrames_compWidth, this.renderFrames_compHeight);
// gif播放次数
if (this.renderFrames_frames != undefined && this.renderFrames_index === (this.renderFrames_frames.length - 1) && this.imageKnifeOption.gif != undefined ) {
this.playTimes++
if (this.imageKnifeOption.gif.playTimes == this.playTimes){
this.autoPlay = false
this.playTimes = 0
}
}
//如果gif动图只有一帧的情况下，不进行后面代码的逐帧绘制循环 //如果gif动图只有一帧的情况下，不进行后面代码的逐帧绘制循环
if (this.renderFrames_frames != undefined && this.renderFrames_frames.length <= 1) { if (this.renderFrames_frames != undefined && this.renderFrames_frames.length <= 1) {
return return

1
library/src/main/ets/components/imageknife/ImageKnifeOption.ets
View File

@ -46,6 +46,7 @@ export interface GifOptions{
loopFinish?: (loopTime?:number) => void loopFinish?: (loopTime?:number) => void
speedFactory?: number speedFactory?: number
seekTo?: number seekTo?: number
playTimes?: number
} }
export interface TransformOptions{ export interface TransformOptions{
transformType: number, transformType: number,