增加gif图duration的默认值,以及默认播放次数

Signed-off-by: zgf <zenggaofeng2@h-partners.com>
This commit is contained in:
zgf 2024-06-19 19:18:00 +08:00
parent 549658e321
commit f171b64e95
9 changed files with 76 additions and 6 deletions

View File

@ -1,3 +1,6 @@
## 2.3.0-rc.0
- 增加gif图duration的默认值以及默认播放次数
## 2.2.0 ## 2.2.0
- 修复错误图绘制完后变成占位图 - 修复错误图绘制完后变成占位图
- 提供图片加载成功/失败的事件 - 提供图片加载成功/失败的事件

View File

@ -0,0 +1,42 @@
/*
* 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, } from '@ohos/libraryimageknife'
@Entry
@Component
struct TestDurationAndPlayTimesPage {
build() {
Column() {
ImageKnifeComponent({
imageKnifeOption: {
loadSrc: "https://n.sinaimg.cn/default/944aebbe/20230131/diamond_1.gif",
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed')
}
}).width(300)
.height(300)
.backgroundColor(Color.Orange)
Image("https://n.sinaimg.cn/default/944aebbe/20230131/diamond_1.gif")
.width(300)
.height(300)
.backgroundColor(Color.Orange)
.objectFit(ImageFit.Contain)
.margin({top:20})
}
.width('100%')
.height('100%')
}
}

View File

@ -242,9 +242,9 @@ struct IndexFunctionDemo {
router.pushUrl({ url: "pages/svgTestCasePage" }); router.pushUrl({ url: "pages/svgTestCasePage" });
}).margin({ top: 15 }) }).margin({ top: 15 })
Button("测试gif已转移,不再使用worker") Button("测试特殊gif图Image对比")
.onClick(() => { .onClick(() => {
router.pushUrl({ url: "pages/TestDurationAndPlayTimesPage" });
}).margin({ top: 15 }) }).margin({ top: 15 })
}.width('100%').height(60).backgroundColor(Color.Pink) }.width('100%').height(60).backgroundColor(Color.Pink)

View File

@ -61,6 +61,7 @@
"pages/testReuseAblePages", "pages/testReuseAblePages",
"pages/downsamplingPage", "pages/downsamplingPage",
"pages/testImageKnifeLoadState", "pages/testImageKnifeLoadState",
"pages/testImageKnifeRemoveCache" "pages/testImageKnifeRemoveCache",
"pages/TestDurationAndPlayTimesPage"
] ]
} }

View File

@ -808,6 +808,7 @@ export class ImageKnife {
let imageKnifeData = ImageKnifeData.createImageGIFFrame(ImageKnifeType.GIFFRAME, data as GIFFrame[]); let imageKnifeData = ImageKnifeData.createImageGIFFrame(ImageKnifeType.GIFFRAME, data as GIFFrame[]);
let requestList: List<RequestOption> | undefined = this.executingJobMap.get(request.uuid); let requestList: List<RequestOption> | undefined = this.executingJobMap.get(request.uuid);
LogUtil.info("VISIBLE: taskpool execute done. data as GIFFrame: " + requestList?.length); LogUtil.info("VISIBLE: taskpool execute done. data as GIFFrame: " + requestList?.length);
imageKnifeData.iterations = data[0].iterations
// 组件被销毁会删除请求因此requestList可能是undefined // 组件被销毁会删除请求因此requestList可能是undefined
if(requestList != undefined) { if(requestList != undefined) {
requestList.forEach((requestOption: RequestOption)=>{ requestList.forEach((requestOption: RequestOption)=>{

View File

@ -56,6 +56,7 @@ export struct ImageKnifeComponent {
private imageSmoothingEnabled: boolean = true; private imageSmoothingEnabled: boolean = true;
// 是否是gif图片 // 是否是gif图片
private isGif: boolean = false private isGif: boolean = false
private gifPlayTimes: number = 0
defaultLifeCycle: IDrawLifeCycle = { defaultLifeCycle: IDrawLifeCycle = {
// 展示占位图 // 展示占位图
@ -875,7 +876,7 @@ export struct ImageKnifeComponent {
this.renderFrames_context = context this.renderFrames_context = context
this.renderFrames_compWidth = compWidth this.renderFrames_compWidth = compWidth
this.renderFrames_compHeight = compHeight this.renderFrames_compHeight = compHeight
this.gifPlayTimes = data.iterations
this.renderFrames() this.renderFrames()
} }
} }
@ -916,6 +917,13 @@ 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播放次数 // gif播放次数
if (this.renderFrames_frames != undefined && this.renderFrames_index === (this.renderFrames_frames.length - 1) && this.gifPlayTimes != 0 && this.imageKnifeOption.gif == undefined ) {
this.playTimes++
if (this.gifPlayTimes == this.playTimes){
this.imageKnifeOption.autoPlay = false;
this.playTimes = 0
}
}
if (this.renderFrames_frames != undefined && this.renderFrames_index === (this.renderFrames_frames.length - 1) && this.imageKnifeOption.gif != undefined ) { if (this.renderFrames_frames != undefined && this.renderFrames_index === (this.renderFrames_frames.length - 1) && this.imageKnifeOption.gif != undefined ) {
this.playTimes++ this.playTimes++
if (this.imageKnifeOption.gif.playTimes == this.playTimes){ if (this.imageKnifeOption.gif.playTimes == this.playTimes){
@ -961,9 +969,13 @@ export struct ImageKnifeComponent {
if (this.renderFrames_frames != undefined && this.renderFrames_index >= this.renderFrames_frames.length) { if (this.renderFrames_frames != undefined && this.renderFrames_index >= this.renderFrames_frames.length) {
this.renderFrames_index = 0; this.renderFrames_index = 0;
} }
if (delayTime == 0) {
this.gifTimerId = setTimeout(this.renderFrames, 100)
} else {
this.gifTimerId = setTimeout(this.renderFrames, delayTime) this.gifTimerId = setTimeout(this.renderFrames, delayTime)
} }
} }
}
private drawFrame(frames: GIFFrame[]|undefined, index: number, context: CanvasRenderingContext2D|undefined, compWidth: number, compHeight: number) { private drawFrame(frames: GIFFrame[]|undefined, index: number, context: CanvasRenderingContext2D|undefined, compWidth: number, compHeight: number) {
if(frames == undefined){ if(frames == undefined){

View File

@ -96,6 +96,7 @@ export class ImageKnifeData {
static BMP = 'bmp'; static BMP = 'bmp';
static WEBP = 'webp'; static WEBP = 'webp';
waitSaveDisk = false; waitSaveDisk = false;
iterations: number = 0
imageKnifeType: ImageKnifeType | undefined = undefined; imageKnifeType: ImageKnifeType | undefined = undefined;
drawPixelMap: DrawPixelMap | undefined = undefined; drawPixelMap: DrawPixelMap | undefined = undefined;
drawGIFFrame: DrawGIFFrame | undefined = undefined; drawGIFFrame: DrawGIFFrame | undefined = undefined;

View File

@ -44,4 +44,6 @@ export class GIFFrame {
// 表示透明度的可选颜色索引 // 表示透明度的可选颜色索引
transparentIndex: number transparentIndex: number
// 默认播放次数
iterations?:number
} }

View File

@ -67,11 +67,18 @@ export class GIFParseImpl implements IParseGif {
} }
}) })
let data: GIFFrame[] = []; let data: GIFFrame[] = [];
let iterations: number = 0
imageSource.createPixelMapList(decodeOpts).then((pixelList: Array<PixelMap>) => { imageSource.createPixelMapList(decodeOpts).then((pixelList: Array<PixelMap>) => {
//sdk的api接口发生变更从.getDelayTime() 变为.getDelayTimeList() //sdk的api接口发生变更从.getDelayTime() 变为.getDelayTimeList()
imageSource.getDelayTimeList().then(delayTimes => { imageSource.getDelayTimeList().then(async (delayTimes) => {
if (pixelList.length > 0) { if (pixelList.length > 0) {
let pixelmap1 = pixelList[0]; let pixelmap1 = pixelList[0];
try {
let dataTimes = await imageSource.getImageProperty(image.PropertyKey.GIF_LOOP_COUNT)
iterations = Number(dataTimes)
} catch (e) {
iterations = 1
}
pixelmap1.getImageInfo().then(imageInfo => { pixelmap1.getImageInfo().then(imageInfo => {
for (let i = 0; i < pixelList.length; i++) { for (let i = 0; i < pixelList.length; i++) {
let frame = new GIFFrame(); let frame = new GIFFrame();
@ -84,6 +91,7 @@ export class GIFParseImpl implements IParseGif {
} }
data.push(frame) data.push(frame)
} }
data[0].iterations = iterations
callback(data, undefined) callback(data, undefined)
imageSource.release(); imageSource.release();
}).catch((err: string) => { }).catch((err: string) => {