diff --git a/CHANGELOG.md b/CHANGELOG.md index d11ed4e..262ece6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## 2.1.2-rc.13 - 修改ImageKnife跳过网络，从内存中获取图片 cacheType参数未使用bug - 新增WEBP图片解析能力。 +- 新增gif图片支持暂停播放功能 ## 2.1.2-rc.12 - 新增gif播放次数功能 diff --git a/README.md b/README.md index 4535660..7e852c6 100644 --- a/README.md +++ b/README.md @@ -86,6 +86,10 @@ svg类型图片即可。 加载GIF其实和普通流程也没有区别只要将 `loadSrc: $r('app.media.jpgSample'),` `改成一张 loadSrc: $r('app.media.gifSample'),` GIF图片即可。 +#### 4.1加载GIF图片 + +更改ImageKnifeOption对象的autoPlay（可选autoPlay = true为开始播放，autoPlay = false为暂停播放） + ### 5.自定义Key 因为通常改变标识符比较困难或者根本不可能，所以ImageKnife也提供了 签名 API 来混合（你可以控制的）额外数据到你的缓存键中。 签名(signature)适用于媒体内容，也适用于你可以自行维护的一些版本元数据。 @@ -134,6 +138,7 @@ imageKnifeOption = { | **drawLifeCycle** | **IDrawLifeCycle** | **用户自定义实现绘制方案（可选）** | | imageSmoothingEnabled | boolean | 抗锯齿是否开启属性配置，设置为false时，imageSmoothingQuality失效 | | imageSmoothingQuality | AntiAliasing | 抗锯齿属性配置 | +| autoPlay | boolean | GIF播放暂停控制（可选） | 其他参数只需要在ImageKnifeOption对象上按需添加即可。 @@ -526,6 +531,7 @@ HSP场景适配: - testPreloadPage.ets # 预加载测试 - transformPixelMapPage.ets # 所有类型变换测试 - testSingleFrameGifPage.ets # 单帧gif加载测试 + - TestStopPlayingGifPage # gif播放暂停测试 - OptionTestPage.ets # 图片缓存测试 - testManyGifLoadWithPage # 测试gif加载页面 diff --git a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets index f0c8049..498d585 100644 --- a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets +++ b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets @@ -372,6 +372,14 @@ struct IndexFunctionDemo { router.pushUrl({ url: 'pages/testImageKnifeCache' }); }).margin({ top: 5, left: 3 }) }.width('100%').height(60).backgroundColor(Color.Pink) + + Text('测试gif暂停播放属性').fontSize(15) + Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Button('测试gif暂停播放属性') + .onClick(() => { + router.pushUrl({ url: 'pages/testStopPlayingGifPage' }); + }).margin({ top: 5, left: 3 }) + }.width('100%').height(60).backgroundColor(Color.Pink) } } .width('100%') diff --git a/entry/src/main/ets/pages/testStopPlayingGifPage.ets b/entry/src/main/ets/pages/testStopPlayingGifPage.ets new file mode 100644 index 0000000..346c8ae --- /dev/null +++ b/entry/src/main/ets/pages/testStopPlayingGifPage.ets @@ -0,0 +1,75 @@ +/* + * 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' +import { ImageKnifeOption } from '@ohos/libraryimageknife' +import display from '@ohos.display'; + +@Entry +@Component +struct TestStopPlayingGifPage { + @State message: string = 'gif暂停播放测试' + @State eventType: string = ''; + @State options: ImageKnifeOption = { + loadSrc: $r('app.media.app_icon'), + } + + build() { + Column() { + Column() { + Text(`${this.message}`) + .width("300vp") + .height("60vp") + .textAlign(TextAlign.Center) + .fontSize("30fp") + .fontWeight(FontWeight.Bold) + Button("加载gif图") + .margin(16) + .onClick(() => { + console.log("加载多帧gif") + this.options = { + loadSrc: $r('app.media.gifSample'), + placeholderSrc:$r('app.media.icon_loading'), + } + }) + Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Text("控制") + Button("开启") + .onClick(() => { + this.options.autoPlay = true; + }).margin({ left: 3 }) + + Button("暂停") + .onClick(() => { + this.options.autoPlay = false; + }).margin({ left: 3 }) + }.width('100%') + .height(40).backgroundColor(Color.Pink).margin({bottom:5}) + ImageKnifeComponent({ imageKnifeOption: this.options }) + .margin(16) + .width(300) + .height(300) + } + .width("100%") + .height("100%") + .justifyContent(FlexAlign.Center) + } + .width("100%") + .height("100%") + } + aboutToAppear() { + console.log('CTT：TestManyNetImageLoadWithPage display Height: '+ display.getDefaultDisplaySync().height) + } +} + diff --git a/entry/src/main/resources/base/profile/main_pages.json b/entry/src/main/resources/base/profile/main_pages.json index 326cc61..b79794a 100644 --- a/entry/src/main/resources/base/profile/main_pages.json +++ b/entry/src/main/resources/base/profile/main_pages.json @@ -49,6 +49,7 @@ "pages/testPriorityComponent", "pages/testReusePhotoPage", "pages/testImageKnifeCache", - "pages/webpImageTestPage" + "pages/webpImageTestPage", + "pages/testStopPlayingGifPage" ] } \ No newline at end of file diff --git a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets b/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets index 2105747..e8ea770 100644 --- a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets +++ b/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets @@ -34,12 +34,13 @@ interface KeyCanvas { @Component export struct ImageKnifeComponent { @Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption; - autoPlay: boolean = true private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private hasDisplayRetryholder = false; private lastWidth: number = 0 private lastHeight: number = 0 + // 当前帧数位置 + private renderFrames_index = 0; // 定时器id private gifTimerId: number = -1 // 完整gif播放时间 @@ -764,15 +765,15 @@ export struct ImageKnifeComponent { let frames = data.drawGIFFrame?.imageGIFFrames as GIFFrame[] LogUtil.log('ImageKnifeComponent gifFrameLength =' + frames.length); if (imageKnifeOption.gif && (typeof (imageKnifeOption.gif.seekTo) == 'number') && imageKnifeOption.gif.seekTo >= 0) { - this.autoPlay = false; context.clearRect(0, 0, compWidth, compHeight) this.drawSeekToFrame(frames, context, compWidth, compHeight) } else { - this.autoPlay = true context.clearRect(0, 0, compWidth, compHeight) this.renderFrames_frames = frames - this.renderFrames_index = 0 + if (this.imageKnifeOption.autoPlay == undefined) { + this.renderFrames_index = 0; + } this.renderFrames_context = context this.renderFrames_compWidth = compWidth this.renderFrames_compHeight = compHeight @@ -796,13 +797,13 @@ export struct ImageKnifeComponent { private drawSeekToFrame(frames: GIFFrame[], context: CanvasRenderingContext2D, compWidth: number, compHeight: number) { if(this.imageKnifeOption.gif != undefined && this.imageKnifeOption.gif.seekTo != undefined) { for (let i = 0; i < this.imageKnifeOption.gif.seekTo; i++) { + this.renderFrames_index = i; this.drawFrame(frames, i, context, compWidth, compHeight); } } } renderFrames_frames: GIFFrame[] | undefined = undefined - renderFrames_index: number = 0; renderFrames_context: CanvasRenderingContext2D | undefined = undefined; renderFrames_compWidth: number = 0; renderFrames_compHeight: number = 0 @@ -820,7 +821,7 @@ export struct ImageKnifeComponent { 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.imageKnifeOption.autoPlay = false; this.playTimes = 0 } } @@ -833,7 +834,7 @@ export struct ImageKnifeComponent { let end = new Date().getTime(); let diff = end - start - if (this.autoPlay) { + if ((this.imageKnifeOption.autoPlay == undefined) || (this.imageKnifeOption.autoPlay)) { // 理论上该帧在屏幕上保留的时间 let stayTime:number= 0 diff --git a/library/src/main/ets/components/imageknife/ImageKnifeOption.ets b/library/src/main/ets/components/imageknife/ImageKnifeOption.ets index ba6c6a9..8df8ae9 100644 --- a/library/src/main/ets/components/imageknife/ImageKnifeOption.ets +++ b/library/src/main/ets/components/imageknife/ImageKnifeOption.ets @@ -69,6 +69,8 @@ export interface HeaderOptions { @Observed export class ImageKnifeOption { + //控制gif开关 + autoPlay?: boolean = true; // header请求列表 headerOption?: Array; // 主图资源