Pre Merge pull request !186 from 孙旭辉/master

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 2.1.2-rc.14
+- 新增gif图片支持drawLifeCycle gif设置成圆形头像样式，保留边框
+- 新增gif图片支持暂停播放功能
+
 ## 2.1.2-rc.13
 - 修改ImageKnife跳过网络，从内存中获取图片 cacheType参数未使用bug
 - 新增WEBP图片解析能力。

README.md

@@ -85,6 +85,9 @@ 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 来混合（你可以控制的）额外数据到你的缓存键中。
@@ -134,6 +137,7 @@ imageKnifeOption = {
 | **drawLifeCycle**            | **IDrawLifeCycle**                                                                                                                                                                                       | **用户自定义实现绘制方案（可选）**                           |
 | imageSmoothingEnabled        | boolean                                                                                                                                                                                                  | 抗锯齿是否开启属性配置，设置为false时，imageSmoothingQuality失效 |
 | imageSmoothingQuality        | AntiAliasing                                                                                                                                                                                             | 抗锯齿属性配置                                       |
+| autoPlay        | boolean                                                                                                                                                                                             | GIF播放暂停控制（可选）                                 |
 
 其他参数只需要在ImageKnifeOption对象上按需添加即可。
 
@@ -526,6 +530,7 @@ HSP场景适配:
        - testPreloadPage.ets                   # 预加载测试
        - transformPixelMapPage.ets             # 所有类型变换测试  
        - testSingleFrameGifPage.ets            # 单帧gif加载测试
+       - TestStopPlayingGifPage                # gif播放暂停测试
   
        - OptionTestPage.ets                    # 图片缓存测试
        - testManyGifLoadWithPage               # 测试gif加载页面

entry/src/main/ets/pages/imageknifeTestCaseIndex.ets

@@ -372,6 +372,15 @@ 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%')

entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets

@@ -27,6 +27,13 @@ import {
   ImageKnifeDrawFactory
 } from '@ohos/libraryimageknife'
 import worker from '@ohos.worker';
+
+let gifs: string[] = [
+  'http://p8.itc.cn/images01/20201108/45806c7f57fc4965855afff97d5eea84.gif',
+  'https://p4.itc.cn/q_70/images03/20210201/6ee7c87aa4eb4bd380a05917d5fe683c.gif',
+  'http://img.duoziwang.com/2018/06/201712314086753.gif'
+]
+
 @Entry
 @Component
 struct TestImageKnifeOptionChangedPage5 {
@@ -83,6 +90,54 @@ struct TestImageKnifeOptionChangedPage5 {
               };
             }).margin({ left: 5 }).backgroundColor(Color.Blue)
         }.margin({ top: 15 })
+        Flex({ direction: FlexDirection.Row }) {
+          Button("网络gif")
+            .onClick(() => {
+              this.imageKnifeOption1 = {
+                loadSrc: gifs[2],
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+              };
+            }).margin({ left: 5 }).backgroundColor(Color.Blue)
+          Button("网络gif - 圆角小")
+            .onClick(() => {
+              this.imageKnifeOption1 = {
+                loadSrc: gifs[2],
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                drawLifeCycle:ImageKnifeDrawFactory.createRoundLifeCycle(3,"#ff0000", 30)
+              };
+            }).margin({ left: 5 }).backgroundColor(Color.Blue)
+          Button("网络gif - 圆角大")
+            .onClick(() => {
+              this.imageKnifeOption1 = {
+                loadSrc: gifs[2],
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                drawLifeCycle:ImageKnifeDrawFactory.createRoundLifeCycle(5,"#ffff00", 300)
+              };
+            }).margin({ left: 5 }).backgroundColor(Color.Blue)
+        }.margin({ top: 30 })
+        Flex({ direction: FlexDirection.Row }) {
+          Button("网络gif-椭圆长方形资源")
+            .onClick(() => {
+              this.imageKnifeOption1 = {
+                loadSrc: gifs[0],
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                drawLifeCycle:ImageKnifeDrawFactory.createOvalLifeCycle(8,"#88ee00")
+              };
+            }).margin({ left: 5 }).backgroundColor(Color.Blue)
+          Button("网络gif-椭圆正方形资源")
+            .onClick(() => {
+              this.imageKnifeOption1 = {
+                loadSrc: gifs[2],
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                drawLifeCycle:ImageKnifeDrawFactory.createOvalLifeCycle(5,"#ff00ff")
+              };
+            }).margin({ left: 5 }).backgroundColor(Color.Blue)
+        }.margin({ top: 30 })
 
         Text("下面为展示图片区域").margin({ top: 5 })
         Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

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, LogUtil } 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)
+  }
+}
+

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"
   ]
 }

library/src/main/ets/components/imageknife/ImageKnifeComponent.ets

@@ -27,6 +27,7 @@ import { ObjectKey } from './ObjectKey'
 import componentUtils from '@ohos.arkui.componentUtils'
 import inspector from '@ohos.arkui.inspector'
 import util from '@ohos.util'
+import { ImageKnifeDrawFactory } from './ImageKnifeDrawFactory'
 
 interface KeyCanvas {
   keyId:string
@@ -34,12 +35,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播放时间
@@ -414,6 +416,7 @@ export struct ImageKnifeComponent {
   }
 
   displayMainSource = (data: ImageKnifeData|number|undefined)=> {
+    ImageKnifeDrawFactory.type = undefined;
     if(data == undefined || typeof data == 'number'){
       return
     }
@@ -764,15 +767,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 +799,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 +823,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
       }
     }
@@ -832,9 +835,7 @@ export struct ImageKnifeComponent {
     // 记录渲染结束时间点
     let end = new Date().getTime();
     let diff = end - start
-
+    if ((this.imageKnifeOption.autoPlay == undefined) || (this.imageKnifeOption.autoPlay)) {
-    if (this.autoPlay) {
-
       // 理论上该帧在屏幕上保留的时间
       let stayTime:number= 0
       if(this.renderFrames_frames != undefined) {
@@ -898,10 +899,59 @@ export struct ImageKnifeComponent {
     ScaleTypeHelper.drawImageWithScaleType(context, scaleType, pixelmap, px2vp(frameW), px2vp(frameH), compWidth, compHeight, px2vp(frame.dims.left), px2vp(frame.dims.top))
     // tips:worker如果不是在展示页面中创建,使用子线程回来的数据创建的图片,会导致canvas绘制不出来
     context.restore();
+    if (ImageKnifeDrawFactory.type === undefined) {
+      LogUtil.log('ImageKnifeComponent canvasDrawPixelMap draw type is undefined!');
+      return;
+    }
+    // 通过 destination-in 裁剪出圆角
+    if (ImageKnifeDrawFactory?.type === DrawType.Round || ImageKnifeDrawFactory?.type === DrawType.Oval) {
+      context.save();
+      context.globalCompositeOperation = 'destination-in';
+      if (ImageKnifeDrawFactory.type === DrawType.Round) {
+        ImageKnifeDrawFactory.setRect(context, scaleType, pixelmap, px2vp(frameW), px2vp(frameH), compWidth,
+          compHeight, 0, 0, ImageKnifeDrawFactory.borderWidth, ImageKnifeDrawFactory.connerRadius);
+      } else {
+        context.beginPath();
+        ImageKnifeDrawFactory.setOval(context, scaleType, pixelmap, px2vp(frameW), px2vp(frameH), compWidth,
+          compHeight, 0, 0, ImageKnifeDrawFactory.borderWidth);
+        context.closePath();
+      }
+      context.fill();
+      context.restore();
+      if (ImageKnifeDrawFactory.borderWidth > 0) {
+        // 为圆角添加边框
+        context.save();
+        context.strokeStyle = ImageKnifeDrawFactory.colorString;
+        context.lineWidth = ImageKnifeDrawFactory.borderWidth;
+        context.globalCompositeOperation = 'source-over';
+        if (ImageKnifeDrawFactory.type === DrawType.Round) {
+          ImageKnifeDrawFactory.setRect(context, scaleType, pixelmap, px2vp(frameW), px2vp(frameH), compWidth,
+            compHeight, 0, 0, ImageKnifeDrawFactory.borderWidth, ImageKnifeDrawFactory.connerRadius);
+        } else {
+          context.beginPath();
+          ImageKnifeDrawFactory.setOval(context, scaleType, pixelmap, px2vp(frameW), px2vp(frameH), compWidth,
+            compHeight, 0, 0, ImageKnifeDrawFactory.borderWidth);
+          context.closePath();
+        }
+        context.stroke();
+        context.restore();
+      }
+      context.restore();
+    }
     LogUtil.log('ImageKnifeComponent canvasDrawPixelMap end!')
   }
 }
 
+export enum DrawType{
+
+  Normal = 0,
+
+  Oval = 1,
+
+  Round = 2
+
+}
+
 export enum FrameDisposalType {
   // 0 - No disposal specified. The decoder is not required to take any action.
   // 不使用处置方法

library/src/main/ets/components/imageknife/ImageKnifeDrawFactory.ets

@@ -16,9 +16,13 @@ import { ImageKnifeOption } from '../imageknife/ImageKnifeOption'
 import { ImageKnifeData } from '../imageknife/ImageKnifeData'
 import { GIFFrame } from '../imageknife/utils/gif/GIFFrame'
 import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle'
-import { ScaleTypeHelper,ScaleType } from '../imageknife/ImageKnifeComponent'
+import { ScaleTypeHelper,ScaleType, DrawType } from '../imageknife/ImageKnifeComponent'
 
-export class ImageKnifeDrawFactory{
+export class ImageKnifeDrawFactory {
+  public static borderWidth: number;
+  public static type: DrawType | undefined = undefined;
+  public static colorString: string;
+  public static connerRadius: number;
 
   /**
    * 绘制PixelMap内容情况下,主图的椭圆裁剪,可添加边框
@@ -81,6 +85,11 @@ export class ImageKnifeDrawFactory{
           })
           return true;
         }
+        if (data.isGIFFrame()) {
+          ImageKnifeDrawFactory.type = DrawType.Oval;
+          ImageKnifeDrawFactory.borderWidth = borderWidth;
+          ImageKnifeDrawFactory.colorString = colorString;
+        }
         return false;
       },
       // 展示重试图层
@@ -108,7 +117,7 @@ export class ImageKnifeDrawFactory{
    * @param imageOffsetY
    * @param borderWidth
    */
-  private static setOval(context: CanvasRenderingContext2D, scaleType: ScaleType, source: PixelMap | undefined, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX:number,imageOffsetY:number
+  public static setOval(context: CanvasRenderingContext2D, scaleType: ScaleType, source: PixelMap | undefined, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX:number,imageOffsetY:number
           ,borderWidth:number) {
     let scaleW = compWidth / imageWidth
     let scaleH = compHeight / imageHeight
@@ -240,6 +249,12 @@ export class ImageKnifeDrawFactory{
           })
           return true;
         }
+        if (data.isGIFFrame()) {
+          ImageKnifeDrawFactory.type = DrawType.Round;
+          ImageKnifeDrawFactory.borderWidth = borderWidth;
+          ImageKnifeDrawFactory.colorString = colorString;
+          ImageKnifeDrawFactory.connerRadius = connerRadius;
+        }
         return false;
       },
       // 展示重试图层
@@ -268,7 +283,7 @@ export class ImageKnifeDrawFactory{
    * @param borderWidth
    * @param cornerRadius
    */
-  private static setRect(context: CanvasRenderingContext2D, scaleType: ScaleType, source: PixelMap | undefined, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX:number,imageOffsetY:number
+  public static setRect(context: CanvasRenderingContext2D, scaleType: ScaleType, source: PixelMap | undefined, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX:number,imageOffsetY:number
           ,borderWidth:number,cornerRadius:number) {
     let scaleW = compWidth / imageWidth
     let scaleH = compHeight / imageHeight

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<HeaderOptions>;
   // 主图资源