From 395b6f983e90b8ff8f94530e80964eb5809fc236 Mon Sep 17 00:00:00 2001 From: zhoulisheng1 Date: Thu, 1 Dec 2022 00:48:13 -0800 Subject: [PATCH 01/15] 1.add onClick option,because ImageKnifeComponet used onClick Event let external layout failed to capture events Signed-off-by: zhoulisheng1 --- .../components/imageknife/ImageKnifeComponent.ets | 12 +++++++++--- .../ets/components/imageknife/ImageKnifeOption.ets | 3 +++ 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets b/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets index 8b096e7..40b183b 100644 --- a/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets +++ b/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets @@ -26,9 +26,10 @@ export struct ImageKnifeComponent { @Watch('watchImageKnifeOption') @Link imageKnifeOption: ImageKnifeOption; @State componentWidth: string = '100%' @State componentHeight: string = '100%' - @State gifPixelMap: PixelMap = undefined; drawLifeCycle: IDrawLifeCycle - autoPlay = true + + @State gifAutoPlay?:boolean = true; + autoPlay:boolean = true // 有效onAreaChanged触发计数 private onAreaCount: number = 0 private preSize: { @@ -101,8 +102,13 @@ export struct ImageKnifeComponent { .backgroundColor(this.imageKnifeOption.backgroundColor ? this.imageKnifeOption.backgroundColor : Color.White) .margin(this.imageKnifeOption.margin ? this.imageKnifeOption.margin : { left: 0, top: 0, right: 0, bottom: 0 }) .onReady(() => { + }) - .onClick(() => { + .onClick((event:ClickEvent) => { + // 需要将点击事件回传 + if(this.imageKnifeOption.onClick){ + this.imageKnifeOption.onClick(event) + } if (this.imageKnifeOption.canRetryClick && this.hasDisplayRetryholder) { this.retryClick() } diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets b/imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets index 4f4b21f..592fea0 100644 --- a/imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets +++ b/imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets @@ -76,6 +76,9 @@ export class ImageKnifeOption { // 用户自定义实现 绘制方案 drawLifeCycle?: IDrawLifeCycle; + // 设置点击事件回调 + onClick?:(event?: ClickEvent) => void + gif?: { loopFinish?: (loopTime?) => void speedFactory?: number From 079d395284eedc29535ea23daaa63f6857ff3711 Mon Sep 17 00:00:00 2001 From: zhoulisheng1 Date: Sun, 4 Dec 2022 23:38:36 -0800 Subject: [PATCH 02/15] =?UTF-8?q?1.=E9=80=82=E9=85=8DIDE=203.1=E7=89=88?= =?UTF-8?q?=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zhoulisheng1 --- imageknife/hvigorfile.js | 3 --- imageknife/package.json | 3 ++- package.json | 6 +++--- 3 files changed, 5 insertions(+), 7 deletions(-) delete mode 100644 imageknife/hvigorfile.js diff --git a/imageknife/hvigorfile.js b/imageknife/hvigorfile.js deleted file mode 100644 index 42ed4b4..0000000 --- a/imageknife/hvigorfile.js +++ /dev/null @@ -1,3 +0,0 @@ -// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently. -module.exports = require('@ohos/hvigor-ohos-plugin').harTasks - diff --git a/imageknife/package.json b/imageknife/package.json index 3ff96e7..8b7b83e 100644 --- a/imageknife/package.json +++ b/imageknife/package.json @@ -30,5 +30,6 @@ ], "license": "Apache License 2.0", "devDependencies": {}, - "name": "@ohos/imageknife" + "name": "@ohos/imageknife", + "type": "module" } diff --git a/package.json b/package.json index d837c93..3e96a82 100644 --- a/package.json +++ b/package.json @@ -11,9 +11,9 @@ "repository": {}, "version": "1.0.0", "dependencies": { - "@ohos/hvigor": "1.2.2", - "@ohos/hvigor-ohos-plugin": "1.2.2", - "@ohos/hypium": "1.0.2", + "@ohos/hvigor": "1.3.1", + "@ohos/hvigor-ohos-plugin": "1.3.1", + "@ohos/hypium": "1.0.3", "@ohos/svg": "^1.1.0", "hypium": "^1.0.0" } From 70b6d47d88851bb54ee88f574fcb0a33149a952c Mon Sep 17 00:00:00 2001 From: zhoulisheng1 Date: Sun, 4 Dec 2022 23:42:38 -0800 Subject: [PATCH 03/15] =?UTF-8?q?1.@Link=20=E6=9B=BF=E6=8D=A2=E4=B8=BA=20@?= =?UTF-8?q?ObjectLink=202.ImageKnife=E7=9A=84=E9=80=9A=E7=94=A8=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=B1=9E=E6=80=A7=20sizeAnimate=20backgroundColor=20?= =?UTF-8?q?=E5=92=8C=20width=20height=E4=B8=8D=E5=86=8D=E7=BB=B4=E6=8A=A4,?= =?UTF-8?q?=E4=BA=A4=E7=BB=99=E4=BA=86=E4=B8=9A=E5=8A=A1=E9=93=BE=E5=BC=8F?= =?UTF-8?q?=E8=B0=83=E7=94=A8=E7=9B=B8=E5=85=B3=E6=8E=A5=E5=8F=A3=E3=80=82?= =?UTF-8?q?=203.ImageKnifeComponent=20=E5=86=8D=E6=AC=A1=E9=87=8D=E6=9E=84?= =?UTF-8?q?,=E9=80=82=E9=85=8D=E4=BA=86OpenHarmony=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81=E9=93=BE=E5=BC=8F?= =?UTF-8?q?=E8=B0=83=E7=94=A8=E7=BB=84=E4=BB=B6=E9=80=9A=E7=94=A8=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=E5=92=8C=E4=BA=8B=E4=BB=B6=E4=BB=A5=E5=8F=8A=E5=8A=A8?= =?UTF-8?q?=E7=94=BB=E7=9A=84=E8=83=BD=E5=8A=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zhoulisheng1 --- .../ets/pages/frescoImageTestCasePage.ets | 8 +- .../ets/pages/frescoRetryTestCasePage.ets | 8 +- entry/src/main/ets/pages/index.ets | 4 +- .../ets/pages/showErrorholderTestCasePage.ets | 8 +- .../main/ets/pages/testAllCacheInfoPage.ets | 4 +- .../main/ets/pages/testGifDontAnimatePage.ets | 2 +- .../pages/testImageKnifeOptionChangedPage.ets | 2 +- .../testImageKnifeOptionChangedPage2.ets | 2 +- .../testImageKnifeOptionChangedPage3.ets | 2 +- .../testImageKnifeOptionChangedPage4.ets | 2 +- .../testImageKnifeOptionChangedPage5.ets | 2 +- entry/src/main/ets/pages/testPreloadPage.ets | 12 +- .../imageknife/ImageKnifeComponent.ets | 136 ++++++++++-------- .../imageknife/ImageKnifeOption.ets | 19 +-- 14 files changed, 111 insertions(+), 100 deletions(-) diff --git a/entry/src/main/ets/pages/frescoImageTestCasePage.ets b/entry/src/main/ets/pages/frescoImageTestCasePage.ets index 4534bce..997704f 100644 --- a/entry/src/main/ets/pages/frescoImageTestCasePage.ets +++ b/entry/src/main/ets/pages/frescoImageTestCasePage.ets @@ -58,10 +58,10 @@ struct FrescoImageTestCasePage { build() { Scroll() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { -// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 }) -// ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption }) -// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 }) - ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 }) +// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) +// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }) +// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }) // Scroll() { // Text(this.progresshint).fontSize(15) // }.width(300).height(200) diff --git a/entry/src/main/ets/pages/frescoRetryTestCasePage.ets b/entry/src/main/ets/pages/frescoRetryTestCasePage.ets index 4624896..d8fe743 100644 --- a/entry/src/main/ets/pages/frescoRetryTestCasePage.ets +++ b/entry/src/main/ets/pages/frescoRetryTestCasePage.ets @@ -64,10 +64,10 @@ struct FrescoImageTestCasePage { build() { Scroll() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { -// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 }) -// ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption }) -// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 }) - ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 }) +// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) +// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }) +// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }) } } .width('100%') diff --git a/entry/src/main/ets/pages/index.ets b/entry/src/main/ets/pages/index.ets index 7b4d7cc..3b7f00e 100644 --- a/entry/src/main/ets/pages/index.ets +++ b/entry/src/main/ets/pages/index.ets @@ -52,7 +52,7 @@ struct IndexFunctionDemo { errorholderSrc: $r('app.media.icon_failed') } }).margin({ top: 5, left: 3 }) - ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) }.width('100%').backgroundColor(Color.Pink) Text("简单示例2：加载一张网络gif图片").fontSize(15) @@ -68,7 +68,7 @@ struct IndexFunctionDemo { displayProgress:true, } }).margin({ top: 5, left: 3 }) - ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }) }.width('100%').backgroundColor(Color.Pink) Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { diff --git a/entry/src/main/ets/pages/showErrorholderTestCasePage.ets b/entry/src/main/ets/pages/showErrorholderTestCasePage.ets index c25b479..42f504e 100644 --- a/entry/src/main/ets/pages/showErrorholderTestCasePage.ets +++ b/entry/src/main/ets/pages/showErrorholderTestCasePage.ets @@ -52,10 +52,10 @@ struct ShowErrorholderTestCasePage { build() { Scroll() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 }) - ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption }) - ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 }) - ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }) } } .width('100%') diff --git a/entry/src/main/ets/pages/testAllCacheInfoPage.ets b/entry/src/main/ets/pages/testAllCacheInfoPage.ets index dab58d5..66b5db1 100644 --- a/entry/src/main/ets/pages/testAllCacheInfoPage.ets +++ b/entry/src/main/ets/pages/testAllCacheInfoPage.ets @@ -126,7 +126,7 @@ struct TestAllCacheInfoPage { Scroll() { Text(this.cacheinfo3).fontSize(15) }.width(300).height(200) - ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) Button("ImageKnifeComponent加载网络资源获取缓存信息").width(300).height(25) .onClick(() => { @@ -148,7 +148,7 @@ struct TestAllCacheInfoPage { Scroll() { Text(this.cacheinfo4).fontSize(15) }.width(300).height(200) - ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }) } } diff --git a/entry/src/main/ets/pages/testGifDontAnimatePage.ets b/entry/src/main/ets/pages/testGifDontAnimatePage.ets index f256bb1..b8d3107 100644 --- a/entry/src/main/ets/pages/testGifDontAnimatePage.ets +++ b/entry/src/main/ets/pages/testGifDontAnimatePage.ets @@ -83,7 +83,7 @@ struct TestGifDontAnimatePage { }).margin({left:15}).backgroundColor(Color.Grey) } .margin({top:15}) - ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) } } diff --git a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets index adeea94..47e964a 100644 --- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets +++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets @@ -181,7 +181,7 @@ struct TestImageKnifeOptionChangedPage { Text('下面为展示图片区域').margin({top:5}) Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){ - ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink) diff --git a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets index 024313f..61aab30 100644 --- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets +++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets @@ -89,7 +89,7 @@ struct TestImageKnifeOptionChangedPage2 { Text("下面为展示图片区域").margin({top:5}) Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){ - ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink) diff --git a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets index 812d872..17c7e23 100644 --- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets +++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets @@ -230,7 +230,7 @@ struct TestImageKnifeOptionChangedPage3 { Text("下面为展示图片区域").margin({top:5}) Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){ - ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink) diff --git a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets index 763c1e5..87180d2 100644 --- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets +++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets @@ -102,7 +102,7 @@ struct TestImageKnifeOptionChangedPage4 { Text("下面为展示图片区域").margin({ top: 5 }) Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) }.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink) } diff --git a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets index be8abc0..1739548 100644 --- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets +++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets @@ -89,7 +89,7 @@ struct TestImageKnifeOptionChangedPage5 { Text("下面为展示图片区域").margin({ top: 5 }) Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) }.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink) } diff --git a/entry/src/main/ets/pages/testPreloadPage.ets b/entry/src/main/ets/pages/testPreloadPage.ets index 1bd9e42..1da8e2e 100644 --- a/entry/src/main/ets/pages/testPreloadPage.ets +++ b/entry/src/main/ets/pages/testPreloadPage.ets @@ -213,7 +213,7 @@ struct TestPreloadPage { } .margin({ top: 15 }) - ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) } @@ -293,7 +293,7 @@ struct TestPreloadPage { } .margin({ top: 15 }) - ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }) } @@ -371,7 +371,7 @@ struct TestPreloadPage { } .margin({ top: 15 }) - ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }) } @@ -449,7 +449,7 @@ struct TestPreloadPage { } .margin({ top: 15 }) - ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }) } @@ -527,7 +527,7 @@ struct TestPreloadPage { } .margin({ top: 15 }) - ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption5 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption5 }) } @@ -605,7 +605,7 @@ struct TestPreloadPage { } .margin({ top: 15 }) - ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption6 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption6 }) } } diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets b/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets index 40b183b..108718d 100644 --- a/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets +++ b/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets @@ -23,22 +23,18 @@ import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle' @Component export struct ImageKnifeComponent { - @Watch('watchImageKnifeOption') @Link imageKnifeOption: ImageKnifeOption; - @State componentWidth: string = '100%' - @State componentHeight: string = '100%' - drawLifeCycle: IDrawLifeCycle + @Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption; - @State gifAutoPlay?:boolean = true; autoPlay:boolean = true - // 有效onAreaChanged触发计数 - private onAreaCount: number = 0 - private preSize: { - width: string, - height: string - } = { width: '0', height: '0' } + 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 currentWidth: number = 0 private currentHeight: number = 0 @@ -85,24 +81,28 @@ export struct ImageKnifeComponent { } } - + private canvasHasReady:boolean = false; build() { Canvas(this.context) - .width(this.componentWidth) - .height(this.componentHeight) + .width('100%') + .height('100%') .onAreaChange((oldValue: Area, newValue: Area) => { this.currentWidth = newValue.width as number this.currentHeight = newValue.height as number - console.log('onAreaChange stack currentWidth =' + this.currentWidth + ' currentHeight=' + this.currentHeight) - if (this.onAreaCount > 0) { - this.onAreaCount--; - this.imageKnifeExecute() + if(this.currentWidth <=0 || this.currentHeight <=0 ){ + // 存在宽或者高为0,此次重回无意义,无需进行request请求 + }else{ + if(this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth){ + // 宽高发生了变化 + console.log('onAreaChange isValid Canvas currentWidth =' + this.currentWidth + ' currentHeight=' + this.currentHeight) + this.lastWidth = this.currentWidth + this.lastHeight = this.currentHeight + this.imageKnifeExecute() + } } }) - .backgroundColor(this.imageKnifeOption.backgroundColor ? this.imageKnifeOption.backgroundColor : Color.White) - .margin(this.imageKnifeOption.margin ? this.imageKnifeOption.margin : { left: 0, top: 0, right: 0, bottom: 0 }) .onReady(() => { - + this.canvasHasReady = true; }) .onClick((event:ClickEvent) => { // 需要将点击事件回传 @@ -117,41 +117,46 @@ export struct ImageKnifeComponent { watchImageKnifeOption() { console.log('watchImageKnifeOption is happened!') - - if (this.imageKnifeOption.sizeAnimate) { - animateTo(this.imageKnifeOption.sizeAnimate, () => { - this.resetGifData(); - this.whetherWaitSize(); - }) - } else { +// if (this.imageKnifeOption.sizeAnimate) { +// animateTo(this.imageKnifeOption.sizeAnimate, () => { +// this.resetGifData(); +// this.whetherWaitSize(); +// }) +// } else { this.resetGifData(); this.whetherWaitSize(); - } +// } } whetherWaitSize() { - this.componentWidth = this.imageKnifeOption.size.width - this.componentHeight = this.imageKnifeOption.size.height - if (this.newSizeEqualPreSize(this.imageKnifeOption.size)) { - console.log('whetherWaitSize 宽高不变 直接发送请求') + if(this.currentHeight <= 0 || this.currentWidth <= 0){ + // 宽或者高没有高度,需要等待canvas组件初始化完成 + }else{ + console.log('whetherWaitSize 宽高有效 直接发送请求') this.imageKnifeExecute() - } else { - this.onAreaCount++; - // waitSize changed - this.preSize = this.imageKnifeOption.size - console.log('whetherWaitSize 宽高改变 等待组件回调onAreaChange后发送请求') } +// this.componentWidth = this.imageKnifeOption.size.width +// this.componentHeight = this.imageKnifeOption.size.height +// if (this.newSizeEqualPreSize(this.imageKnifeOption.size)) { +// console.log('whetherWaitSize 宽高不变 直接发送请求') +// this.imageKnifeExecute() +// } else { +// this.onAreaCount++; +// // waitSize changed +// this.preSize = this.imageKnifeOption.size +// console.log('whetherWaitSize 宽高改变 等待组件回调onAreaChange后发送请求') +// } } - newSizeEqualPreSize(newSize: { - width: string, - height: string - }): boolean { - if (this.preSize.width == newSize.width && this.preSize.height == newSize.height) { - return true; - } - return false; - } +// newSizeEqualPreSize(newSize: { +// width: string, +// height: string +// }): boolean { +// if (this.preSize.width == newSize.width && this.preSize.height == newSize.height) { +// return true; +// } +// return false; +// } retryClick() { this.hasDisplayRetryholder = false; @@ -160,9 +165,6 @@ export struct ImageKnifeComponent { aboutToAppear() { console.log('imageKnifeComponent aboutToAppear happened!') - this.onAreaCount++; - this.componentWidth = this.imageKnifeOption.size.width - this.componentHeight = this.imageKnifeOption.size.height } configNecessary(request: RequestOption) { @@ -173,13 +175,13 @@ export struct ImageKnifeComponent { return false; }) - if (this.imageKnifeOption.size) { +// if (this.imageKnifeOption.size) { let realSize = { width: this.currentWidth, height: this.currentHeight } request.setImageViewSize(realSize) - } +// } } configCacheStrategy(request: RequestOption) { @@ -261,7 +263,10 @@ export struct ImageKnifeComponent { } displayPlaceholder(data: ImageKnifeData) { - + if(!this.canvasHasReady){ + console.log('Canvas is not Initialized! displayPlaceholder is Failed!') + return; + } if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayPlaceholder', this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) @@ -280,7 +285,10 @@ export struct ImageKnifeComponent { } displayProgress(percent: number) { - + if(!this.canvasHasReady){ + console.log('Canvas is not Initialized! displayProgress is Failed!') + return; + } if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayProgress', this.context, percent, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) @@ -299,7 +307,10 @@ export struct ImageKnifeComponent { } displayThumbSizeMultiplier(data: ImageKnifeData) { - + if(!this.canvasHasReady){ + console.log('Canvas is not Initialized! displayThumbSizeMultiplier is Failed!') + return; + } if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayThumbSizeMultiplier', this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) @@ -318,7 +329,10 @@ export struct ImageKnifeComponent { } displayMainSource(data: ImageKnifeData) { - + if(!this.canvasHasReady){ + console.log('Canvas is not Initialized! displayMainSource is Failed!') + return; + } if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayMainSource', this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) @@ -337,6 +351,11 @@ export struct ImageKnifeComponent { } displayRetryholder(data: ImageKnifeData) { + if(!this.canvasHasReady){ + console.log('Canvas is not Initialized! displayRetryholder is Failed!') + return; + } + if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayRetryholder', this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) @@ -354,7 +373,10 @@ export struct ImageKnifeComponent { } displayErrorholder(data: ImageKnifeData) { - + if(!this.canvasHasReady){ + console.log('Canvas is not Initialized! displayErrorholder is Failed!') + return; + } if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayErrorholder', this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets b/imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets index 592fea0..e8be662 100644 --- a/imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets +++ b/imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets @@ -23,12 +23,8 @@ import { AllCacheInfo, IAllCacheInfoCallback } from '../imageknife/interface/IAl import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle' import { ScaleType } from '../imageknife/ImageKnifeComponent' +@Observed export class ImageKnifeOption { - // 组件大小 - size: { - width: string, - height: string - }; // 主图资源 loadSrc: string | PixelMap | Resource; @@ -86,7 +82,7 @@ export class ImageKnifeOption { } - // 变换相关 + // 变换相关 不推荐使用该接口 建议直接使用transformation transformations这2个接口实现 transform?: { transformType: number, blur?: number, @@ -122,16 +118,9 @@ export class ImageKnifeOption { // 输出缓存相关内容和信息 allCacheInfoCallback?: IAllCacheInfoCallback; - imageFit?: ImageFit; - backgroundColor?: Color | number | string | Resource; - margin?: { - top?: number | string | Resource, - right?: number | string | Resource, - bottom?: number | string | Resource, - left?: number | string | Resource - } | number | string | Resource - sizeAnimate?: AnimateParam + +// sizeAnimate?: AnimateParam 由业务自定义不再支持 constructor() { From dfb7059b1d0f51091e7a2170eaf2a1908c9fc2e1 Mon Sep 17 00:00:00 2001 From: zhoulisheng1 Date: Mon, 5 Dec 2022 00:10:48 -0800 Subject: [PATCH 04/15] =?UTF-8?q?1.=E6=96=B0=E5=A2=9E=E6=B5=8B=E8=AF=95Lis?= =?UTF-8?q?t=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zhoulisheng1 --- .../ets/pages/basicTestFeatureAbilityPage.ets | 81 +++++++++++++------ .../ets/pages/imageknifeTestCaseIndex.ets | 2 +- 2 files changed, 58 insertions(+), 25 deletions(-) diff --git a/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets b/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets index 22d1e5e..07fab70 100644 --- a/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets +++ b/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets @@ -1,6 +1,6 @@ /* * Copyright (C) 2021 Huawei Device Co., Ltd. - * Licensed under the Apache License, Version 2.0 (the "License"); + * 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 * @@ -12,7 +12,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - +import {ImageKnifeOption,ImageKnifeComponent} from '@ohos/imageknife' @Entry @Component @@ -20,30 +20,63 @@ struct BasicTestFeatureAbilityPage { @Watch("watchPathChange") @State filePath: string = "查看featureAbility路径"; watchPathChange() { - console.log("watchPathChange"); + console.log("watchPathChange") + } + urls=[ + "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg", + "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg", + "http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg", + "http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg", + "http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg", + "http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg", + "http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg", + "http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg", + "http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg", + "http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg", + "http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg", + "http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg", + "http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg", + "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg", + "http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg", + "http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg", + "http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg", + "http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg", + "http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg", + "http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg", + ] + + @State options:Array = [] + + aboutToAppear(){ + this.options = this.urls.map((url)=>{ + return { + loadSrc:url + } + }) + console.log('this.options length ='+this.options.length) } build() { - Scroll() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Text(this.filePath).fontSize(20) - Button("featureAbility.getContext().getFilesDir()") - .margin({ top: 20 }) - .onClick(() => { - let data = globalThis.ImageKnife.getImageKnifeContext().filesDir; - console.log("ImageKnife filesPath = " + data) - this.filePath = data - }) - Button("featureAbility.getContext().getCacheDir()") - .margin({ top: 20 }) - .onClick(() => { - let data = globalThis.ImageKnife.getImageKnifeContext().cacheDir; - console.log("ImageKnife cachesPath = " + data) - this.filePath = data - }) - } - } - .width('100%') - .height('100%') + Stack({ alignContent: Alignment.TopStart }) { + Column() { + List({ space: 20, initialIndex: 0 }) { + ForEach(this.options, (item) => { + ListItem() { + ImageKnifeComponent({imageKnifeOption:item}) + }.editable(true) + }, item => item.loadSrc) + } + .listDirection(Axis.Vertical) // 排列方向 + .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线 + .edgeEffect(EdgeEffect.None) // 滑动到边缘无效果 + .chainAnimation(false) // 联动特效关闭 + .onScrollIndex((firstIndex: number, lastIndex: number) => { + console.info('first' + firstIndex) + console.info('last' + lastIndex) + }) + + }.width('100%') + + }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) } } diff --git a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets index 89efb33..108abb5 100644 --- a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets +++ b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets @@ -28,7 +28,7 @@ struct IndexFunctionDemo { Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button("测试元能力") .onClick(() => { - console.log("测试元能力子系统") + console.log("测试List列表") router.push({ uri: "pages/basicTestFeatureAbilityPage" }); }).margin({ top: 5, left: 3 }) Button("测试文件") From 791cf5515864712f365c0d78745d8d929b059163 Mon Sep 17 00:00:00 2001 From: zhoulisheng1 Date: Tue, 6 Dec 2022 18:12:15 -0800 Subject: [PATCH 05/15] =?UTF-8?q?1.=E4=BF=9D=E8=AF=81gif=E7=BB=98=E5=88=B6?= =?UTF-8?q?=E5=9C=A8onReady=E4=B9=8B=E5=90=8E,=E9=9C=80=E8=A6=81=E5=90=8E?= =?UTF-8?q?=E7=BB=AD=E4=BC=98=E5=8C=96=E5=86=85=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zhoulisheng1 --- .../src/main/ets/components/imageknife/ImageKnifeComponent.ets | 3 +++ 1 file changed, 3 insertions(+) diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets b/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets index 108718d..2f935dd 100644 --- a/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets +++ b/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets @@ -477,7 +477,10 @@ export struct ImageKnifeComponent { console.log('default drawMainSource end!') }) } else if (data.isGIFFrame()) { + // GIF的数据返回在canvas onReady 之前 导致第一帧绘制不出来 + setTimeout(()=>{ this.drawGIFFrame(context, data, imageKnifeOption, compWidth, compHeight, setGifTimeId) + },10) } } From 40af0d22853aeb93f7425dcf4eb0203b0862c7fe Mon Sep 17 00:00:00 2001 From: zhoulisheng1 Date: Tue, 6 Dec 2022 23:09:05 -0800 Subject: [PATCH 06/15] =?UTF-8?q?1.=E9=80=9A=E7=94=A8=E5=B1=9E=E6=80=A7?= =?UTF-8?q?=E5=92=8C=E9=80=9A=E7=94=A8=E4=BA=8B=E4=BB=B6=E8=83=BD=E5=8A=9B?= =?UTF-8?q?,=E4=BB=8EImageKnifeComponent=E5=89=A5=E7=A6=BB,=E8=A7=A3?= =?UTF-8?q?=E9=99=A4=E8=80=A6=E5=90=88=202.pages=E7=9B=AE=E5=BD=95?= =?UTF-8?q?=E4=B8=AD=E6=89=80=E6=9C=89=E6=B5=8B=E8=AF=95=E7=9A=84=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2,ImageKnifeComponent=E7=9A=84=E5=85=A5=E5=8F=82ImageKn?= =?UTF-8?q?ifeOption=E5=8F=91=E7=94=9F=E4=BA=86=E6=94=B9=E5=8F=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zhoulisheng1 --- .../ets/pages/basicTestFeatureAbilityPage.ets | 4 +- .../ets/pages/frescoImageTestCasePage.ets | 10 +- .../ets/pages/frescoRetryTestCasePage.ets | 10 +- entry/src/main/ets/pages/index.ets | 12 +- .../ets/pages/showErrorholderTestCasePage.ets | 18 +-- .../main/ets/pages/testAllCacheInfoPage.ets | 22 +-- .../main/ets/pages/testGifDontAnimatePage.ets | 15 +- .../pages/testImageKnifeOptionChangedPage.ets | 68 ++++---- .../testImageKnifeOptionChangedPage2.ets | 22 +-- .../testImageKnifeOptionChangedPage3.ets | 153 +++++++----------- .../testImageKnifeOptionChangedPage4.ets | 22 +-- .../testImageKnifeOptionChangedPage5.ets | 7 +- entry/src/main/ets/pages/testPreloadPage.ets | 95 ++++++----- 13 files changed, 198 insertions(+), 260 deletions(-) diff --git a/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets b/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets index 07fab70..85c4084 100644 --- a/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets +++ b/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets @@ -62,8 +62,8 @@ struct BasicTestFeatureAbilityPage { List({ space: 20, initialIndex: 0 }) { ForEach(this.options, (item) => { ListItem() { - ImageKnifeComponent({imageKnifeOption:item}) - }.editable(true) + ImageKnifeComponent({imageKnifeOption:item}).width(300).height(300) + } }, item => item.loadSrc) } .listDirection(Axis.Vertical) // 排列方向 diff --git a/entry/src/main/ets/pages/frescoImageTestCasePage.ets b/entry/src/main/ets/pages/frescoImageTestCasePage.ets index 997704f..c12ee29 100644 --- a/entry/src/main/ets/pages/frescoImageTestCasePage.ets +++ b/entry/src/main/ets/pages/frescoImageTestCasePage.ets @@ -25,7 +25,7 @@ struct FrescoImageTestCasePage { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), displayProgress: true @@ -33,7 +33,7 @@ struct FrescoImageTestCasePage { @State ImageKnifeOption: ImageKnifeOption = { loadSrc: "https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), displayProgress: true @@ -41,7 +41,7 @@ struct FrescoImageTestCasePage { @State imageKnifeOption3: ImageKnifeOption = { loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), displayProgress: true @@ -49,7 +49,7 @@ struct FrescoImageTestCasePage { @State imageKnifeOption4: ImageKnifeOption = { loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), displayProgress: true, @@ -62,6 +62,8 @@ struct FrescoImageTestCasePage { // ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }) // ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }) + .width(300) + .height(300) // Scroll() { // Text(this.progresshint).fontSize(15) // }.width(300).height(200) diff --git a/entry/src/main/ets/pages/frescoRetryTestCasePage.ets b/entry/src/main/ets/pages/frescoRetryTestCasePage.ets index d8fe743..b44bfba 100644 --- a/entry/src/main/ets/pages/frescoRetryTestCasePage.ets +++ b/entry/src/main/ets/pages/frescoRetryTestCasePage.ets @@ -23,7 +23,7 @@ struct FrescoImageTestCasePage { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), retryholderSrc: $r('app.media.icon_retry'), @@ -33,7 +33,7 @@ struct FrescoImageTestCasePage { @State ImageKnifeOption: ImageKnifeOption = { loadSrc: "https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), retryholderSrc: $r('app.media.icon_retry'), @@ -43,7 +43,7 @@ struct FrescoImageTestCasePage { @State imageKnifeOption3: ImageKnifeOption = { loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), retryholderSrc: $r('app.media.icon_retry'), @@ -53,7 +53,7 @@ struct FrescoImageTestCasePage { @State imageKnifeOption4: ImageKnifeOption = { loadSrc: "https://hbimg.huabanimg.com/testRetryxxxx", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), retryholderSrc: $r('app.media.icon_retry'), @@ -68,6 +68,8 @@ struct FrescoImageTestCasePage { // ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }) // ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }) + .width(300) + .height(300) } } .width('100%') diff --git a/entry/src/main/ets/pages/index.ets b/entry/src/main/ets/pages/index.ets index 3b7f00e..d3a0cc4 100644 --- a/entry/src/main/ets/pages/index.ets +++ b/entry/src/main/ets/pages/index.ets @@ -25,7 +25,7 @@ struct IndexFunctionDemo { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: $r('app.media.icon'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed') }; @@ -33,7 +33,7 @@ struct IndexFunctionDemo { @State imageKnifeOption2: ImageKnifeOption = { loadSrc: $r('app.media.icon'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed') }; @@ -47,12 +47,12 @@ struct IndexFunctionDemo { .onClick(() => { this.imageKnifeOption1 = { loadSrc: $r('app.media.pngSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed') } }).margin({ top: 5, left: 3 }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300) }.width('100%').backgroundColor(Color.Pink) Text("简单示例2：加载一张网络gif图片").fontSize(15) @@ -62,13 +62,13 @@ struct IndexFunctionDemo { .onClick(() => { this.imageKnifeOption2 = { loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), displayProgress:true, } }).margin({ top: 5, left: 3 }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300) }.width('100%').backgroundColor(Color.Pink) Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { diff --git a/entry/src/main/ets/pages/showErrorholderTestCasePage.ets b/entry/src/main/ets/pages/showErrorholderTestCasePage.ets index 42f504e..ad82adf 100644 --- a/entry/src/main/ets/pages/showErrorholderTestCasePage.ets +++ b/entry/src/main/ets/pages/showErrorholderTestCasePage.ets @@ -23,28 +23,28 @@ struct ShowErrorholderTestCasePage { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: "https://thirdwx.qlogo.cn/mmopen/xxxxx", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), }; - @State ImageKnifeOption: ImageKnifeOption = + @State imageKnifeOption: ImageKnifeOption = { loadSrc: "https://hbimg.huabanimg.com/xxxxx", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), }; @State imageKnifeOption3: ImageKnifeOption = { loadSrc: "https://hbimg.huabanimg.com/xxxxx", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), }; @State imageKnifeOption4: ImageKnifeOption = { loadSrc: "https://hbimg.huabanimg.com/xxxxx", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), }; @@ -52,10 +52,10 @@ struct ShowErrorholderTestCasePage { build() { Scroll() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }).width(300).height(300) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }).width(300).height(300) } } .width('100%') diff --git a/entry/src/main/ets/pages/testAllCacheInfoPage.ets b/entry/src/main/ets/pages/testAllCacheInfoPage.ets index 66b5db1..a2f4123 100644 --- a/entry/src/main/ets/pages/testAllCacheInfoPage.ets +++ b/entry/src/main/ets/pages/testAllCacheInfoPage.ets @@ -45,23 +45,23 @@ struct TestAllCacheInfoPage { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: $r('app.media.pngSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{top:15}, + transform: { transformType:TransformType.RotateImageTransformation, rotateImage:180 }, allCacheInfoCallback:this.allCacheInfoCallback1 }; - @State ImageKnifeOption: ImageKnifeOption = + @State imageKnifeOption: ImageKnifeOption = { loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{top:15}, + transform: { transformType:TransformType.RotateImageTransformation, rotateImage:180 @@ -112,10 +112,10 @@ struct TestAllCacheInfoPage { this.imageKnifeOption1 = { loadSrc: $r('app.media.pngSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { top: 15 }, + transform: { transformType:TransformType.RotateImageTransformation, rotateImage:this.imageKnifeComponentAngle @@ -131,13 +131,13 @@ struct TestAllCacheInfoPage { Button("ImageKnifeComponent加载网络资源获取缓存信息").width(300).height(25) .onClick(() => { this.imageKnifeComponentAngle = this.imageKnifeComponentAngle + 45; - this.ImageKnifeOption = + this.imageKnifeOption = { loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { top: 15 }, + transform: { transformType:TransformType.RotateImageTransformation, rotateImage:this.imageKnifeComponentAngle @@ -148,7 +148,7 @@ struct TestAllCacheInfoPage { Scroll() { Text(this.cacheinfo4).fontSize(15) }.width(300).height(200) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300) } } diff --git a/entry/src/main/ets/pages/testGifDontAnimatePage.ets b/entry/src/main/ets/pages/testGifDontAnimatePage.ets index b8d3107..b9ec490 100644 --- a/entry/src/main/ets/pages/testGifDontAnimatePage.ets +++ b/entry/src/main/ets/pages/testGifDontAnimatePage.ets @@ -23,10 +23,8 @@ struct TestGifDontAnimatePage { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:15,top:15,right:15,bottom:15} + errorholderSrc: $r('app.media.icon_failed') }; @@ -38,10 +36,9 @@ struct TestGifDontAnimatePage { .onClick(() => { this.imageKnifeOption1 = { loadSrc: $r('app.media.gifSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } } }).margin({left:15}).backgroundColor(Color.Grey) @@ -49,10 +46,8 @@ struct TestGifDontAnimatePage { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: $r('app.media.gifSample'), - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:15,top:15,right:15,bottom:15}, dontAnimateFlag:true } @@ -64,26 +59,24 @@ struct TestGifDontAnimatePage { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700', - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:15,top:15,right:15,bottom:15} }; }).margin({left:15}).backgroundColor(Color.Grey) Button('网络资源gif静态') .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700', - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:15,top:15,right:15,bottom:15}, dontAnimateFlag:true }; }).margin({left:15}).backgroundColor(Color.Grey) } .margin({top:15}) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) + .width(300) + .height(300) } } diff --git a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets index 47e964a..a0a31b3 100644 --- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets +++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets @@ -25,10 +25,10 @@ struct TestImageKnifeOptionChangedPage { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + }; @@ -40,10 +40,10 @@ struct TestImageKnifeOptionChangedPage { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + }; }).margin({left:5}).backgroundColor(Color.Blue) @@ -51,10 +51,10 @@ struct TestImageKnifeOptionChangedPage { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: $r('app.media.pngSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + }; }).margin({left:5}).backgroundColor(Color.Blue) @@ -62,10 +62,10 @@ struct TestImageKnifeOptionChangedPage { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: $r('app.media.bmpSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + }; }).margin({left:5}).backgroundColor(Color.Blue) @@ -73,10 +73,9 @@ struct TestImageKnifeOptionChangedPage { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + errorholderSrc: $r('app.media.icon_failed') }; }).margin({left:5}).backgroundColor(Color.Blue) @@ -84,10 +83,9 @@ struct TestImageKnifeOptionChangedPage { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: $r('app.media.svgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + errorholderSrc: $r('app.media.icon_failed') }; }).margin({left:5}).backgroundColor(Color.Blue) @@ -95,10 +93,9 @@ struct TestImageKnifeOptionChangedPage { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: $r('app.media.gifSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + errorholderSrc: $r('app.media.icon_failed') }; }).margin({left:5}).backgroundColor(Color.Blue) @@ -109,60 +106,54 @@ struct TestImageKnifeOptionChangedPage { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + errorholderSrc: $r('app.media.icon_failed') }; }).margin({left:5}).backgroundColor(Color.Blue) Button('png') .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + errorholderSrc: $r('app.media.icon_failed') }; }).margin({left:5}).backgroundColor(Color.Blue) Button('bmp') .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: 'https://img-blog.csdn.net/20140514114029140', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + errorholderSrc: $r('app.media.icon_failed') }; }).margin({left:5}).backgroundColor(Color.Blue) Button('webp') .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + errorholderSrc: $r('app.media.icon_failed') }; }).margin({left:5}).backgroundColor(Color.Blue) Button('svg') .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: 'http://design-svc.fat.lunz.cn/StaticFiles/BP9999999772/BV9999999422/SA9999998420/30df266a-485e-411e-b178-b9fb1d8e0748.svg', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + errorholderSrc: $r('app.media.icon_failed') }; }).margin({left:5}).backgroundColor(Color.Blue) Button('gif') .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + errorholderSrc: $r('app.media.icon_failed') }; }).margin({left:5}).backgroundColor(Color.Blue) @@ -170,10 +161,9 @@ struct TestImageKnifeOptionChangedPage { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: "https://img13.360buyimg.com/n1/jfs/t1/220646/38/10395/30916/61d6e061E1a6d91c8/c0a9a67e726dd7a4.jpg.dpg", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, + errorholderSrc: $r('app.media.icon_failed') }; }).margin({left:5}).backgroundColor(Color.Blue) } @@ -182,6 +172,8 @@ struct TestImageKnifeOptionChangedPage { Text('下面为展示图片区域').margin({top:5}) Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){ ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) + .width(300) + .height(300) }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink) diff --git a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets index 61aab30..8c90a6e 100644 --- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets +++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets @@ -24,10 +24,10 @@ struct TestImageKnifeOptionChangedPage2 { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, + thumbSizeMultiplier:0.1 }; @@ -40,10 +40,10 @@ struct TestImageKnifeOptionChangedPage2 { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, + thumbSizeMultiplier:0.1, transformation:new RotateImageTransformation(180) }; @@ -52,10 +52,10 @@ struct TestImageKnifeOptionChangedPage2 { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, + thumbSizeMultiplier:0.1, transformations:[new RotateImageTransformation(180)] }; @@ -64,10 +64,10 @@ struct TestImageKnifeOptionChangedPage2 { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: "https://img-blog.csdn.net/20140514114029140", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, + thumbSizeMultiplier:0.1, transformations:[new GrayscaleTransformation()] }; @@ -76,10 +76,10 @@ struct TestImageKnifeOptionChangedPage2 { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, + thumbSizeMultiplier:0.1, transformations:[new SketchFilterTransformation()] }; @@ -89,7 +89,7 @@ struct TestImageKnifeOptionChangedPage2 { Text("下面为展示图片区域").margin({top:5}) Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){ - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300) }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink) diff --git a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets index 17c7e23..6b0d443 100644 --- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets +++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets @@ -27,10 +27,11 @@ struct TestImageKnifeOptionChangedPage3 { { loadSrc: $r('app.media.jpgSample'), mainScaleType: ScaleType.FIT_CENTER, - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), }; + @State compWidht:number = 300 + @State compHeight:number = 300 build() { @@ -42,46 +43,48 @@ struct TestImageKnifeOptionChangedPage3 { this.imageKnifeOption1 = { loadSrc: $r('app.media.jpgSample'), mainScaleType: ScaleType.FIT_CENTER, - size: { width: '350', height: '350' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, thumbSizeMultiplier:0.1, transformation:new RotateImageTransformation(180), - sizeAnimate: { - duration: 500, - curve: Curve.EaseInOut, - delay: 100, - iterations: 1, - playMode:PlayMode.Normal, - onFinish:()=>{ - console.log('play end!') - } - } }; + animateTo({ + duration: 500, + curve: Curve.EaseInOut, + delay: 100, + iterations: 1, + playMode:PlayMode.Normal, + onFinish:()=>{ + console.log('play end!') + } + },()=>{ + this.compHeight = 350 + this.compWidht = 350 + }) }).margin({left:5}).backgroundColor(Color.Blue) Button("本地png") .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: $r('app.media.pngSample'), mainScaleType: ScaleType.FIT_CENTER, - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, thumbSizeMultiplier:0.1, transformation:new RotateImageTransformation(180), - sizeAnimate: { - duration: 500, - curve: Curve.EaseInOut, - delay: 100, - iterations: 1, - playMode: PlayMode.Normal, - onFinish: () => { - console.log('play end!') - } - } }; + animateTo({ + duration: 500, + curve: Curve.EaseInOut, + delay: 100, + iterations: 1, + playMode:PlayMode.Normal, + onFinish:()=>{ + console.log('play end!') + } + },()=>{ + this.compHeight = 400 + this.compWidht = 300 + }) }).margin({left:5}).backgroundColor(Color.Blue) }.margin({top:15}) Flex({direction:FlexDirection.Row}){ @@ -90,46 +93,48 @@ struct TestImageKnifeOptionChangedPage3 { this.imageKnifeOption1 = { loadSrc: $r('app.media.bmpSample'), mainScaleType: ScaleType.FIT_CENTER, - size: { width: '100', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, thumbSizeMultiplier:0.1, transformations:[new GrayscaleTransformation()], - sizeAnimate: { - duration: 500, - curve: Curve.EaseInOut, - delay: 100, - iterations: 1, - playMode: PlayMode.Normal, - onFinish: () => { - console.log('play end!') - } - } }; + animateTo({ + duration: 500, + curve: Curve.EaseInOut, + delay: 100, + iterations: 1, + playMode:PlayMode.Normal, + onFinish:()=>{ + console.log('play end!') + } + },()=>{ + this.compHeight = 250 + this.compWidht = 350 + }) }).margin({left:5}).backgroundColor(Color.Blue) Button("本地webp") .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: $r('app.media.webpSample'), mainScaleType: ScaleType.FIT_CENTER, - size: { width: '300', height: '100' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, thumbSizeMultiplier:0.1, transformations:[new SketchFilterTransformation()], - sizeAnimate: { - duration: 500, - curve: Curve.EaseInOut, - delay: 100, - iterations: 1, - playMode: PlayMode.Normal, - onFinish: () => { - console.log('play end!') - } - } }; + animateTo({ + duration: 500, + curve: Curve.EaseInOut, + delay: 100, + iterations: 1, + playMode:PlayMode.Normal, + onFinish:()=>{ + console.log('play end!') + } + },()=>{ + this.compHeight = 400 + this.compWidht = 400 + }) }).margin({left:5}).backgroundColor(Color.Blue) }.margin({top:15}) Flex({direction:FlexDirection.Row}){ @@ -137,21 +142,9 @@ struct TestImageKnifeOptionChangedPage3 { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB", - size: { width: '200', height: '200' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, displayProgress:true, - sizeAnimate: { - duration: 500, - curve: Curve.EaseInOut, - delay: 100, - iterations: 1, - playMode: PlayMode.Normal, - onFinish: () => { - console.log('play end!') - } - }, thumbSizeMultiplier:0.1, transformation:new RotateImageTransformation(180) }; @@ -160,22 +153,10 @@ struct TestImageKnifeOptionChangedPage3 { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png", - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, displayProgress:true, thumbSizeMultiplier:0.1, - sizeAnimate: { - duration: 500, - curve: Curve.EaseInOut, - delay: 100, - iterations: 1, - playMode: PlayMode.Normal, - onFinish: () => { - console.log('play end!') - } - }, transformations:[new RotateImageTransformation(180)] }; }).margin({left:5}).backgroundColor(Color.Blue) @@ -185,22 +166,10 @@ struct TestImageKnifeOptionChangedPage3 { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: "https://img-blog.csdn.net/20140514114029140", - size: { width: '400', height: '400' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, displayProgress:true, thumbSizeMultiplier:0.1, - sizeAnimate: { - duration: 500, - curve: Curve.EaseInOut, - delay: 100, - iterations: 1, - playMode: PlayMode.Normal, - onFinish: () => { - console.log('play end!') - } - }, transformations:[new GrayscaleTransformation()] }; }).margin({left:5}).backgroundColor(Color.Blue) @@ -208,29 +177,17 @@ struct TestImageKnifeOptionChangedPage3 { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp", - size: { width: '500', height: '500' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, displayProgress:true, thumbSizeMultiplier:0.1, - sizeAnimate: { - duration: 500, - curve: Curve.EaseInOut, - delay: 100, - iterations: 1, - playMode: PlayMode.Normal, - onFinish: () => { - console.log('play end!') - } - }, }; }).margin({left:5}).backgroundColor(Color.Blue) }.margin({top:15}) Text("下面为展示图片区域").margin({top:5}) Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){ - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(this.compWidht).height(this.compHeight) }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink) diff --git a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets index 87180d2..2b97fd5 100644 --- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets +++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets @@ -31,10 +31,10 @@ struct TestImageKnifeOptionChangedPage4 { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 5, top: 5, right: 5, bottom: 5 }, + thumbSizeMultiplier: 0.1, drawLifeCycle:this.createViewLifeCycle() }; @@ -48,10 +48,10 @@ struct TestImageKnifeOptionChangedPage4 { .onClick(() => { this.imageKnifeOption1 = { loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 5, top: 5, right: 5, bottom: 5 }, + thumbSizeMultiplier: 0.1, transformation: new RotateImageTransformation(180), drawLifeCycle:this.createViewLifeCycle() @@ -61,10 +61,10 @@ struct TestImageKnifeOptionChangedPage4 { .onClick(() => { this.imageKnifeOption1 = { loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 5, top: 5, right: 5, bottom: 5 }, + thumbSizeMultiplier: 0.1, transformations: [new RotateImageTransformation(180)], drawLifeCycle:this.createViewLifeCycle() @@ -76,10 +76,10 @@ struct TestImageKnifeOptionChangedPage4 { .onClick(() => { this.imageKnifeOption1 = { loadSrc: "https://img-blog.csdn.net/20140514114029140", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 5, top: 5, right: 5, bottom: 5 }, + thumbSizeMultiplier: 0.1, transformations: [new GrayscaleTransformation()], drawLifeCycle:this.createViewLifeCycle() @@ -89,10 +89,10 @@ struct TestImageKnifeOptionChangedPage4 { .onClick(() => { this.imageKnifeOption1 = { loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 5, top: 5, right: 5, bottom: 5 }, + thumbSizeMultiplier: 0.1, transformations: [new SketchFilterTransformation()], drawLifeCycle:this.createViewLifeCycle() @@ -102,7 +102,7 @@ struct TestImageKnifeOptionChangedPage4 { Text("下面为展示图片区域").margin({ top: 5 }) Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300) }.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink) } diff --git a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets index 1739548..25cae43 100644 --- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets +++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets @@ -32,7 +32,6 @@ struct TestImageKnifeOptionChangedPage5 { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval) @@ -47,7 +46,6 @@ struct TestImageKnifeOptionChangedPage5 { .onClick(() => { this.imageKnifeOption1 = { loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB", - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval) @@ -57,7 +55,6 @@ struct TestImageKnifeOptionChangedPage5 { .onClick(() => { this.imageKnifeOption1 = { loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png", - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval) @@ -69,7 +66,6 @@ struct TestImageKnifeOptionChangedPage5 { .onClick(() => { this.imageKnifeOption1 = { loadSrc: "https://img-blog.csdn.net/20140514114029140", - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval) @@ -79,7 +75,6 @@ struct TestImageKnifeOptionChangedPage5 { .onClick(() => { this.imageKnifeOption1 = { loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp", - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval) @@ -89,7 +84,7 @@ struct TestImageKnifeOptionChangedPage5 { Text("下面为展示图片区域").margin({ top: 5 }) Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300) }.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink) } diff --git a/entry/src/main/ets/pages/testPreloadPage.ets b/entry/src/main/ets/pages/testPreloadPage.ets index 1da8e2e..b7cf66d 100644 --- a/entry/src/main/ets/pages/testPreloadPage.ets +++ b/entry/src/main/ets/pages/testPreloadPage.ets @@ -24,51 +24,51 @@ struct TestPreloadPage { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; - @State ImageKnifeOption: ImageKnifeOption = + @State imageKnifeOption: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; @State imageKnifeOption3: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; @State imageKnifeOption4: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; @State imageKnifeOption5: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; @State imageKnifeOption6: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; build() { @@ -99,10 +99,10 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption1 = { loadSrc: $r('app.media.gifSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + } }) @@ -132,10 +132,8 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption1 = { loadSrc: $r('app.media.gifSample'), - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 }, dontAnimateFlag: true } @@ -169,10 +167,10 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption1 = { loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; }) .margin({ left: 15 }) @@ -201,10 +199,9 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption1 = { loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 }, dontAnimateFlag: true }; }) @@ -213,7 +210,7 @@ struct TestPreloadPage { } .margin({ top: 15 }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(200).height(200) } @@ -240,12 +237,12 @@ struct TestPreloadPage { Button('本地资源svg') .onClick(() => { - this.ImageKnifeOption = { + this.imageKnifeOption = { loadSrc: $r('app.media.svgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + } }) @@ -278,12 +275,12 @@ struct TestPreloadPage { Button('网络资源svg') .onClick(() => { - this.ImageKnifeOption = { + this.imageKnifeOption = { loadSrc: 'http://design-svc.fat.lunz.cn/StaticFiles/BP9999999772/BV9999999422/SA9999998420/4dc8463e-8ac6-4eb4-862c-783bf486a242.svg', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; }) .margin({ left: 15 }) @@ -293,7 +290,7 @@ struct TestPreloadPage { } .margin({ top: 15 }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(200).height(200) } @@ -322,10 +319,10 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption3 = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + } }) @@ -360,10 +357,10 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption3 = { loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; }) .margin({ left: 15 }) @@ -371,7 +368,7 @@ struct TestPreloadPage { } .margin({ top: 15 }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }).width(200).height(200) } @@ -400,10 +397,10 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption4 = { loadSrc: $r('app.media.bmpSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + } }) @@ -438,10 +435,10 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption4 = { loadSrc: 'https://img-blog.csdn.net/20140514114029140', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; }) .margin({ left: 15 }) @@ -449,7 +446,7 @@ struct TestPreloadPage { } .margin({ top: 15 }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }).width(200).height(200) } @@ -478,10 +475,10 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption5 = { loadSrc: $r('app.media.pngSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + } }) @@ -516,10 +513,10 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption5 = { loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; }) .margin({ left: 15 }) @@ -527,7 +524,7 @@ struct TestPreloadPage { } .margin({ top: 15 }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption5 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption5 }).width(200).height(200) } @@ -556,10 +553,10 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption6 = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + } }) @@ -594,10 +591,10 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption6 = { loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; }) .margin({ left: 15 }) @@ -605,7 +602,7 @@ struct TestPreloadPage { } .margin({ top: 15 }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption6 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption6 }).width(200).height(200) } } From 01eea2d9c27382c4a713797953618a46d33f9de4 Mon Sep 17 00:00:00 2001 From: zhoulisheng1 Date: Tue, 6 Dec 2022 23:12:38 -0800 Subject: [PATCH 07/15] =?UTF-8?q?1.=E9=87=8D=E6=9E=84=E5=9B=9E=E8=B0=83?= =?UTF-8?q?=E5=90=8E=E7=9A=84=E6=B5=81=E7=A8=8B:=E4=B8=BA=E4=BA=86?= =?UTF-8?q?=E4=BF=9D=E8=AF=81=E6=89=80=E6=9C=89=E7=BB=98=E5=88=B6=E9=83=BD?= =?UTF-8?q?=E6=98=AF=E5=9C=A8Canvas=E7=9A=84onReady=E4=B9=8B=E5=90=8E,?= =?UTF-8?q?=E7=9B=AE=E5=89=8D=E7=9A=84=E7=AD=96=E7=95=A5=E6=98=AF=E7=94=9F?= =?UTF-8?q?=E5=91=BD=E5=91=A8=E6=9C=9F=E7=9A=84=E5=9B=9E=E8=B0=83=E6=96=B9?= =?UTF-8?q?=E6=B3=95,=E5=A6=82=E6=9E=9ConReady=E6=B2=A1=E8=A7=A6=E5=8F=91?= =?UTF-8?q?=E5=B0=B1=E7=BB=91=E5=AE=9A=E5=88=B0=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84onReadyNext=E6=96=B9=E6=B3=95?= =?UTF-8?q?=E4=B8=8A,=E7=AD=89=E5=BE=85onReady=E8=A7=A6=E5=8F=91=E4=B9=8B?= =?UTF-8?q?=E5=90=8E=E8=B0=83=E7=94=A8=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zhoulisheng1 --- .../imageknife/ImageKnifeComponent.ets | 175 ++++++++---------- 1 file changed, 76 insertions(+), 99 deletions(-) diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets b/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets index 2f935dd..936f8cb 100644 --- a/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets +++ b/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets @@ -82,6 +82,8 @@ export struct ImageKnifeComponent { } private canvasHasReady:boolean = false; + private firstDrawFlag:boolean = false; + private onReadyNext:Function = undefined build() { Canvas(this.context) .width('100%') @@ -92,9 +94,10 @@ export struct ImageKnifeComponent { if(this.currentWidth <=0 || this.currentHeight <=0 ){ // 存在宽或者高为0,此次重回无意义,无需进行request请求 }else{ - if(this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth){ - // 宽高发生了变化 - console.log('onAreaChange isValid Canvas currentWidth =' + this.currentWidth + ' currentHeight=' + this.currentHeight) + // 前提：宽高值均有效,值>0. 条件1：当前宽高与上一次宽高不同 条件2:当前是第一次绘制 + if( (this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth) || this.firstDrawFlag){ + this.firstDrawFlag = false; + console.log('ImageKnifeComponent onAreaChange isValid Canvas currentWidth =' + this.currentWidth + ' currentHeight=' + this.currentHeight) this.lastWidth = this.currentWidth this.lastHeight = this.currentHeight this.imageKnifeExecute() @@ -103,6 +106,11 @@ export struct ImageKnifeComponent { }) .onReady(() => { this.canvasHasReady = true; + if(this.onReadyNext){ + console.log('ImageKnifeComponent onReadyNext is running!') + this.onReadyNext() + this.onReadyNext = undefined; + } }) .onClick((event:ClickEvent) => { // 需要将点击事件回传 @@ -116,72 +124,60 @@ export struct ImageKnifeComponent { } watchImageKnifeOption() { - console.log('watchImageKnifeOption is happened!') -// if (this.imageKnifeOption.sizeAnimate) { -// animateTo(this.imageKnifeOption.sizeAnimate, () => { -// this.resetGifData(); -// this.whetherWaitSize(); -// }) -// } else { - this.resetGifData(); + console.log('ImageKnifeComponent watchImageKnifeOption is happened!') this.whetherWaitSize(); -// } } - whetherWaitSize() { + /** + * 判断当前是否由宽高,有直接重绘,没有则等待onAreaChange回调,当出现aboutToAppear第一次绘制的时候 + * 给firstDrawFlag置为true,保证size即使没有变化也要进入 请求绘制流程 + * @param drawFirst 是否是aboutToAppear第一次绘制 + */ + whetherWaitSize(drawFirst?:boolean) { if(this.currentHeight <= 0 || this.currentWidth <= 0){ // 宽或者高没有高度,需要等待canvas组件初始化完成 + if(drawFirst){ + this.firstDrawFlag = true; + } }else{ - console.log('whetherWaitSize 宽高有效 直接发送请求') + console.log('ImageKnifeComponent whetherWaitSize 宽高有效 直接发送请求') this.imageKnifeExecute() } -// this.componentWidth = this.imageKnifeOption.size.width -// this.componentHeight = this.imageKnifeOption.size.height -// if (this.newSizeEqualPreSize(this.imageKnifeOption.size)) { -// console.log('whetherWaitSize 宽高不变 直接发送请求') -// this.imageKnifeExecute() -// } else { -// this.onAreaCount++; -// // waitSize changed -// this.preSize = this.imageKnifeOption.size -// console.log('whetherWaitSize 宽高改变 等待组件回调onAreaChange后发送请求') -// } } -// newSizeEqualPreSize(newSize: { -// width: string, -// height: string -// }): boolean { -// if (this.preSize.width == newSize.width && this.preSize.height == newSize.height) { -// return true; -// } -// return false; -// } - retryClick() { this.hasDisplayRetryholder = false; this.imageKnifeExecute(); } - aboutToAppear() { - console.log('imageKnifeComponent aboutToAppear happened!') + /** + * 为了保证执行方法在canvas的onReay之后 + * 如果onReady未初始化,则将最新的绘制生命周期绑定到onReadNext上 + * 待onReady执行的时候执行 + * @param nextFunction 下一个方法 + */ + runNextFunction(nextFunction:Function){ + if(!this.canvasHasReady){ + // canvas未初始化完成 + this.onReadyNext = nextFunction; + }else{ + nextFunction(); + } } configNecessary(request: RequestOption) { request.load(this.imageKnifeOption.loadSrc) .addListener((err, data) => { - console.log('request.load callback') - this.displayMainSource(data) + console.log('ImageKnifeComponent request.load callback') + this.runNextFunction(this.displayMainSource.bind(this,data)); return false; }) -// if (this.imageKnifeOption.size) { let realSize = { width: this.currentWidth, height: this.currentHeight } request.setImageViewSize(realSize) -// } } configCacheStrategy(request: RequestOption) { @@ -204,22 +200,21 @@ export struct ImageKnifeComponent { configDisplay(request: RequestOption) { if (this.imageKnifeOption.placeholderSrc) { request.placeholder(this.imageKnifeOption.placeholderSrc, (data) => { - console.log('request.placeholder callback') - this.displayPlaceholder(data) + console.log('ImageKnifeComponent request.placeholder callback') + this.runNextFunction(this.displayPlaceholder.bind(this,data)) }) } if (this.imageKnifeOption.thumbSizeMultiplier) { request.thumbnail(this.imageKnifeOption.thumbSizeMultiplier, (data) => { - console.log('request.thumbnail callback') - this.displayThumbSizeMultiplier(data) + console.log('ImageKnifeComponent request.thumbnail callback') + this.runNextFunction(this.displayThumbSizeMultiplier.bind(this,data)) }, this.imageKnifeOption.thumbSizeDelay) } if (this.imageKnifeOption.errorholderSrc) { request.errorholder(this.imageKnifeOption.errorholderSrc, (data) => { - console.log('request.errorholder callback') - this.displayErrorholder(data) - + console.log('ImageKnifeComponent request.errorholder callback') + this.runNextFunction(this.displayErrorholder.bind(this, data)) }) } @@ -240,21 +235,22 @@ export struct ImageKnifeComponent { if (this.imageKnifeOption.displayProgress) { request.addProgressListener((percentValue: number) => { // 如果进度条百分比 未展示大小,展示其动画 - this.displayProgress(percentValue) - + console.log('ImageKnifeComponent request.addProgressListener callback') + this.runNextFunction(this.displayProgress.bind(this,percentValue)) }) } if (this.imageKnifeOption.retryholderSrc) { request.retryholder(this.imageKnifeOption.retryholderSrc, (data) => { - console.log("RetryListener callback!") + console.log('ImageKnifeComponent request.retryholder callback') this.hasDisplayRetryholder = true - this.displayRetryholder(data) + this.runNextFunction(this.displayRetryholder.bind(this,data)) }) } } // imageknife 第一次启动和数据刷新后重新发送请求 imageKnifeExecute() { + this.resetGifData() let request = new RequestOption(); this.configNecessary(request); this.configCacheStrategy(request); @@ -263,10 +259,6 @@ export struct ImageKnifeComponent { } displayPlaceholder(data: ImageKnifeData) { - if(!this.canvasHasReady){ - console.log('Canvas is not Initialized! displayPlaceholder is Failed!') - return; - } if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayPlaceholder', this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) @@ -285,10 +277,6 @@ export struct ImageKnifeComponent { } displayProgress(percent: number) { - if(!this.canvasHasReady){ - console.log('Canvas is not Initialized! displayProgress is Failed!') - return; - } if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayProgress', this.context, percent, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) @@ -307,10 +295,6 @@ export struct ImageKnifeComponent { } displayThumbSizeMultiplier(data: ImageKnifeData) { - if(!this.canvasHasReady){ - console.log('Canvas is not Initialized! displayThumbSizeMultiplier is Failed!') - return; - } if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayThumbSizeMultiplier', this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) @@ -329,10 +313,6 @@ export struct ImageKnifeComponent { } displayMainSource(data: ImageKnifeData) { - if(!this.canvasHasReady){ - console.log('Canvas is not Initialized! displayMainSource is Failed!') - return; - } if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayMainSource', this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) @@ -351,11 +331,6 @@ export struct ImageKnifeComponent { } displayRetryholder(data: ImageKnifeData) { - if(!this.canvasHasReady){ - console.log('Canvas is not Initialized! displayRetryholder is Failed!') - return; - } - if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayRetryholder', this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) @@ -373,10 +348,6 @@ export struct ImageKnifeComponent { } displayErrorholder(data: ImageKnifeData) { - if(!this.canvasHasReady){ - console.log('Canvas is not Initialized! displayErrorholder is Failed!') - return; - } if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayErrorholder', this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) @@ -395,16 +366,16 @@ export struct ImageKnifeComponent { } drawPlaceholder(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { - console.log('default drawPlaceholder start!') + console.log('ImageKnifeComponent default drawPlaceholder start!') // @ts-ignore data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { - console.log('imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height) + console.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height) let scaleType = (typeof imageKnifeOption.placeholderScaleType == 'number') ? imageKnifeOption.placeholderScaleType : ScaleType.FIT_CENTER context.save(); context.clearRect(0, 0, compWidth, compHeight) ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); - console.log('default drawPlaceholder end!') + console.log('ImageKnifeComponent default drawPlaceholder end!') }) } @@ -450,65 +421,62 @@ export struct ImageKnifeComponent { } drawThumbSizeMultiplier(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { - console.log('default drawThumbSizeMultiplier start!') + console.log('ImageKnifeComponent default drawThumbSizeMultiplier start!') // @ts-ignore data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { - console.log('imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height) + console.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height) let scaleType = (typeof imageKnifeOption.thumbSizeMultiplierScaleType == 'number') ? imageKnifeOption.thumbSizeMultiplierScaleType : ScaleType.FIT_CENTER context.save(); context.clearRect(0, 0, compWidth, compHeight) ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); - console.log('default drawThumbSizeMultiplier end!') + console.log('ImageKnifeComponent default drawThumbSizeMultiplier end!') }) } drawMainSource(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { - console.log('default drawMainSource start!') + console.log('ImageKnifeComponent default drawMainSource start!') if (data.isPixelMap()) { // @ts-ignore data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { let scaleType = (typeof imageKnifeOption.mainScaleType == 'number') ? imageKnifeOption.mainScaleType : ScaleType.FIT_CENTER - console.log('imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height + 'scaleType=' + scaleType) + console.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height + 'scaleType=' + scaleType) context.save(); context.clearRect(0, 0, compWidth, compHeight) ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); - console.log('default drawMainSource end!') + console.log('ImageKnifeComponent default drawMainSource end!') }) } else if (data.isGIFFrame()) { - // GIF的数据返回在canvas onReady 之前 导致第一帧绘制不出来 - setTimeout(()=>{ this.drawGIFFrame(context, data, imageKnifeOption, compWidth, compHeight, setGifTimeId) - },10) } } drawRetryholder(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { - console.log('default drawRetryholder start!') + console.log('ImageKnifeComponent default drawRetryholder start!') // @ts-ignore data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { - console.log('imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height) + console.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height) let scaleType = (typeof imageKnifeOption.retryholderScaleType == 'number') ? imageKnifeOption.retryholderScaleType : ScaleType.FIT_CENTER context.save(); context.clearRect(0, 0, compWidth, compHeight) ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); - console.log('default drawRetryholder end!') + console.log('ImageKnifeComponent default drawRetryholder end!') }) } drawErrorholder(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { - console.log('default drawErrorholder start!') + console.log('ImageKnifeComponent default drawErrorholder start!') // @ts-ignore data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { - console.log('imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height) + console.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height) let scaleType = (typeof imageKnifeOption.errorholderSrcScaleType == 'number') ? imageKnifeOption.errorholderSrcScaleType : ScaleType.FIT_CENTER context.save(); context.clearRect(0, 0, compWidth, compHeight) ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); - console.log('default drawErrorholder end!') + console.log('ImageKnifeComponent default drawErrorholder end!') }) } @@ -554,7 +522,14 @@ export struct ImageKnifeComponent { } } + aboutToAppear() { + console.log('ImageKnifeComponent aboutToAppear happened!') + this.canvasHasReady = false; + this.whetherWaitSize(true); + } + aboutToDisappear() { + console.log('ImageKnifeComponent aboutToDisappear happened!') this.resetGifData(); } @@ -582,7 +557,7 @@ export struct ImageKnifeComponent { private drawGIFFrame(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { let frames = data.drawGIFFrame.imageGIFFrames as GIFFrame[] - console.log('gifFrameLength =' + frames.length); + console.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) @@ -611,7 +586,7 @@ export struct ImageKnifeComponent { } private renderFrames(frames: GIFFrame[], index: number, context: CanvasRenderingContext2D, compWidth: number, compHeight: number) { - console.log('renderFrames frames length =' + frames.length) + console.log('ImageKnifeComponent renderFrames frames length =' + frames.length) let start = new Date().getTime(); if (index === 0) { // 如果是第一帧，我们只从开始渲染前记录时间 @@ -672,7 +647,7 @@ export struct ImageKnifeComponent { // 具体绘制过程 private canvasDrawPixelMap(frames: GIFFrame[], index: number, context: CanvasRenderingContext2D, compWidth: number, compHeight: number) { - console.log('canvasDrawPixelMap index=' + index) + console.log('ImageKnifeComponent canvasDrawPixelMap index=' + index) let frame = frames[index]; let pixelmap = frame['drawPixelMap'] let disposal = 0 @@ -691,7 +666,7 @@ 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(); - console.log('default drawMainSource end!') + console.log('ImageKnifeComponent default drawMainSource end!') } } @@ -728,6 +703,8 @@ export enum ScaleType { NONE = 8 } + + export class ScaleTypeHelper { static drawImageWithScaleType(context: CanvasRenderingContext2D, scaleType: ScaleType, source: PixelMap | ImageBitmap, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX: number, imageOffsetY: number) { let scaleW = compWidth / imageWidth From 42d2713acbc1ea67c862381435aaa487a1600018 Mon Sep 17 00:00:00 2001 From: zhoulisheng1 Date: Tue, 6 Dec 2022 23:32:02 -0800 Subject: [PATCH 08/15] =?UTF-8?q?1.=E5=B0=86console.log=E5=B0=81=E8=A3=85?= =?UTF-8?q?=E8=87=B3ImageKnife.log=EF=BC=8C=E7=94=B1=E5=BC=80=E5=85=B3?= =?UTF-8?q?=E6=8E=A7=E5=88=B6=E6=97=A5=E5=BF=97=E8=BE=93=E5=87=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zhoulisheng1 --- .../ets/components/imageknife/ImageKnife.ets | 20 +- .../imageknife/ImageKnifeComponent.ets | 62 +- .../imageknife/ImageKnifeDrawFactory.ets | 1 - .../components/imageknife/RequestOption.ets | 16 +- .../imageknife/holder/ErrorHolderManager.ets | 2 +- .../imageknife/holder/PlaceHolderManager.ets | 2 +- .../imageknife/holder/RetryHolderManager.ets | 2 +- .../requestmanage/RequestManager.ets | 40 +- .../transform/BlurTransformation.ets | 4 +- .../BrightnessFilterTransformation.ets | 2 +- .../ContrastFilterTransformation.ets | 2 +- .../transform/CropCircleTransformation.ets | 4 +- .../CropCircleWithBorderTransformation.ets | 4 +- .../transform/CropSquareTransformation.ets | 2 +- .../transform/CropTransformation.ets | 4 +- .../transform/GrayscaleTransformation.ets | 2 +- .../transform/InvertFilterTransformation.ets | 2 +- .../transform/MaskTransformation.ets | 2 +- .../PixelationFilterTransformation.ets | 4 +- .../transform/RotateImageTransformation.ets | 4 +- .../RoundedCornersTransformation.ets | 8 +- .../transform/SepiaFilterTransformation.ets | 2 +- .../imageknife/utils/FileTypeUtil.ets | 8 +- .../imageknife/utils/gif/GIFParseImpl.ets | 16 +- .../utils/svg/SVGImageViewModel.ets | 1107 ----------------- 25 files changed, 115 insertions(+), 1207 deletions(-) delete mode 100644 imageknife/src/main/ets/components/imageknife/utils/svg/SVGImageViewModel.ets diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnife.ets b/imageknife/src/main/ets/components/imageknife/ImageKnife.ets index adcf174..a725a71 100644 --- a/imageknife/src/main/ets/components/imageknife/ImageKnife.ets +++ b/imageknife/src/main/ets/components/imageknife/ImageKnife.ets @@ -59,6 +59,8 @@ export class ImageKnife { private defaultLifeCycle: IDrawLifeCycle; + private debugLog: boolean = false; + private constructor(imgCtx) { this.imageKnifeContext = imgCtx; @@ -175,6 +177,20 @@ export class ImageKnife { } } + /** + * 是否开启日志打印 true开启 false关闭 默认不开启 + * @param openLog + */ + public setDebugLog(openLog:boolean){ + this.debugLog = openLog + } + + public log(info:string){ + if(this.debugLog){ + globalThis.ImageKnife.log(info) + } + } + // 预加载 resource资源一级缓存，string资源实现二级缓存 preload(request: RequestOption) { // 每个request 公共信息补充 @@ -326,7 +342,7 @@ export class ImageKnife { } } else { - console.log("key没有生成无法进入存取！") + globalThis.ImageKnife.log("key没有生成无法进入存取！") } @@ -370,7 +386,7 @@ export class ImageKnife { request.diskCacheStrategy(none); this.loadResources(request); } else { - console.error("输入参数有问题！") + globalThis.ImageKnife.error("输入参数有问题！") } } } diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets b/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets index 936f8cb..4a14977 100644 --- a/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets +++ b/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets @@ -97,7 +97,7 @@ export struct ImageKnifeComponent { // 前提：宽高值均有效,值>0. 条件1：当前宽高与上一次宽高不同 条件2:当前是第一次绘制 if( (this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth) || this.firstDrawFlag){ this.firstDrawFlag = false; - console.log('ImageKnifeComponent onAreaChange isValid Canvas currentWidth =' + this.currentWidth + ' currentHeight=' + this.currentHeight) + globalThis.ImageKnife.log('ImageKnifeComponent onAreaChange isValid Canvas currentWidth =' + this.currentWidth + ' currentHeight=' + this.currentHeight) this.lastWidth = this.currentWidth this.lastHeight = this.currentHeight this.imageKnifeExecute() @@ -107,7 +107,7 @@ export struct ImageKnifeComponent { .onReady(() => { this.canvasHasReady = true; if(this.onReadyNext){ - console.log('ImageKnifeComponent onReadyNext is running!') + globalThis.ImageKnife.log('ImageKnifeComponent onReadyNext is running!') this.onReadyNext() this.onReadyNext = undefined; } @@ -124,7 +124,7 @@ export struct ImageKnifeComponent { } watchImageKnifeOption() { - console.log('ImageKnifeComponent watchImageKnifeOption is happened!') + globalThis.ImageKnife.log('ImageKnifeComponent watchImageKnifeOption is happened!') this.whetherWaitSize(); } @@ -140,7 +140,7 @@ export struct ImageKnifeComponent { this.firstDrawFlag = true; } }else{ - console.log('ImageKnifeComponent whetherWaitSize 宽高有效 直接发送请求') + globalThis.ImageKnife.log('ImageKnifeComponent whetherWaitSize 宽高有效 直接发送请求') this.imageKnifeExecute() } } @@ -168,7 +168,7 @@ export struct ImageKnifeComponent { configNecessary(request: RequestOption) { request.load(this.imageKnifeOption.loadSrc) .addListener((err, data) => { - console.log('ImageKnifeComponent request.load callback') + globalThis.ImageKnife.log('ImageKnifeComponent request.load callback') this.runNextFunction(this.displayMainSource.bind(this,data)); return false; }) @@ -200,20 +200,20 @@ export struct ImageKnifeComponent { configDisplay(request: RequestOption) { if (this.imageKnifeOption.placeholderSrc) { request.placeholder(this.imageKnifeOption.placeholderSrc, (data) => { - console.log('ImageKnifeComponent request.placeholder callback') + globalThis.ImageKnife.log('ImageKnifeComponent request.placeholder callback') this.runNextFunction(this.displayPlaceholder.bind(this,data)) }) } if (this.imageKnifeOption.thumbSizeMultiplier) { request.thumbnail(this.imageKnifeOption.thumbSizeMultiplier, (data) => { - console.log('ImageKnifeComponent request.thumbnail callback') + globalThis.ImageKnife.log('ImageKnifeComponent request.thumbnail callback') this.runNextFunction(this.displayThumbSizeMultiplier.bind(this,data)) }, this.imageKnifeOption.thumbSizeDelay) } if (this.imageKnifeOption.errorholderSrc) { request.errorholder(this.imageKnifeOption.errorholderSrc, (data) => { - console.log('ImageKnifeComponent request.errorholder callback') + globalThis.ImageKnife.log('ImageKnifeComponent request.errorholder callback') this.runNextFunction(this.displayErrorholder.bind(this, data)) }) } @@ -235,14 +235,14 @@ export struct ImageKnifeComponent { if (this.imageKnifeOption.displayProgress) { request.addProgressListener((percentValue: number) => { // 如果进度条百分比 未展示大小,展示其动画 - console.log('ImageKnifeComponent request.addProgressListener callback') + globalThis.ImageKnife.log('ImageKnifeComponent request.addProgressListener callback') this.runNextFunction(this.displayProgress.bind(this,percentValue)) }) } if (this.imageKnifeOption.retryholderSrc) { request.retryholder(this.imageKnifeOption.retryholderSrc, (data) => { - console.log('ImageKnifeComponent request.retryholder callback') + globalThis.ImageKnife.log('ImageKnifeComponent request.retryholder callback') this.hasDisplayRetryholder = true this.runNextFunction(this.displayRetryholder.bind(this,data)) }) @@ -366,16 +366,16 @@ export struct ImageKnifeComponent { } drawPlaceholder(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { - console.log('ImageKnifeComponent default drawPlaceholder start!') + globalThis.ImageKnife.log('ImageKnifeComponent default drawPlaceholder start!') // @ts-ignore data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { - console.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height) + globalThis.ImageKnife.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height) let scaleType = (typeof imageKnifeOption.placeholderScaleType == 'number') ? imageKnifeOption.placeholderScaleType : ScaleType.FIT_CENTER context.save(); context.clearRect(0, 0, compWidth, compHeight) ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); - console.log('ImageKnifeComponent default drawPlaceholder end!') + globalThis.ImageKnife.log('ImageKnifeComponent default drawPlaceholder end!') }) } @@ -421,31 +421,31 @@ export struct ImageKnifeComponent { } drawThumbSizeMultiplier(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { - console.log('ImageKnifeComponent default drawThumbSizeMultiplier start!') + globalThis.ImageKnife.log('ImageKnifeComponent default drawThumbSizeMultiplier start!') // @ts-ignore data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { - console.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height) + globalThis.ImageKnife.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height) let scaleType = (typeof imageKnifeOption.thumbSizeMultiplierScaleType == 'number') ? imageKnifeOption.thumbSizeMultiplierScaleType : ScaleType.FIT_CENTER context.save(); context.clearRect(0, 0, compWidth, compHeight) ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); - console.log('ImageKnifeComponent default drawThumbSizeMultiplier end!') + globalThis.ImageKnife.log('ImageKnifeComponent default drawThumbSizeMultiplier end!') }) } drawMainSource(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { - console.log('ImageKnifeComponent default drawMainSource start!') + globalThis.ImageKnife.log('ImageKnifeComponent default drawMainSource start!') if (data.isPixelMap()) { // @ts-ignore data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { let scaleType = (typeof imageKnifeOption.mainScaleType == 'number') ? imageKnifeOption.mainScaleType : ScaleType.FIT_CENTER - console.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height + 'scaleType=' + scaleType) + globalThis.ImageKnife.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height + 'scaleType=' + scaleType) context.save(); context.clearRect(0, 0, compWidth, compHeight) ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); - console.log('ImageKnifeComponent default drawMainSource end!') + globalThis.ImageKnife.log('ImageKnifeComponent default drawMainSource end!') }) } else if (data.isGIFFrame()) { this.drawGIFFrame(context, data, imageKnifeOption, compWidth, compHeight, setGifTimeId) @@ -453,30 +453,30 @@ export struct ImageKnifeComponent { } drawRetryholder(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { - console.log('ImageKnifeComponent default drawRetryholder start!') + globalThis.ImageKnife.log('ImageKnifeComponent default drawRetryholder start!') // @ts-ignore data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { - console.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height) + globalThis.ImageKnife.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height) let scaleType = (typeof imageKnifeOption.retryholderScaleType == 'number') ? imageKnifeOption.retryholderScaleType : ScaleType.FIT_CENTER context.save(); context.clearRect(0, 0, compWidth, compHeight) ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); - console.log('ImageKnifeComponent default drawRetryholder end!') + globalThis.ImageKnife.log('ImageKnifeComponent default drawRetryholder end!') }) } drawErrorholder(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { - console.log('ImageKnifeComponent default drawErrorholder start!') + globalThis.ImageKnife.log('ImageKnifeComponent default drawErrorholder start!') // @ts-ignore data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { - console.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height) + globalThis.ImageKnife.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height) let scaleType = (typeof imageKnifeOption.errorholderSrcScaleType == 'number') ? imageKnifeOption.errorholderSrcScaleType : ScaleType.FIT_CENTER context.save(); context.clearRect(0, 0, compWidth, compHeight) ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); - console.log('ImageKnifeComponent default drawErrorholder end!') + globalThis.ImageKnife.log('ImageKnifeComponent default drawErrorholder end!') }) } @@ -523,13 +523,13 @@ export struct ImageKnifeComponent { } aboutToAppear() { - console.log('ImageKnifeComponent aboutToAppear happened!') + globalThis.ImageKnife.log('ImageKnifeComponent aboutToAppear happened!') this.canvasHasReady = false; this.whetherWaitSize(true); } aboutToDisappear() { - console.log('ImageKnifeComponent aboutToDisappear happened!') + globalThis.ImageKnife.log('ImageKnifeComponent aboutToDisappear happened!') this.resetGifData(); } @@ -557,7 +557,7 @@ export struct ImageKnifeComponent { private drawGIFFrame(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { let frames = data.drawGIFFrame.imageGIFFrames as GIFFrame[] - console.log('ImageKnifeComponent gifFrameLength =' + frames.length); + globalThis.ImageKnife.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) @@ -586,7 +586,7 @@ export struct ImageKnifeComponent { } private renderFrames(frames: GIFFrame[], index: number, context: CanvasRenderingContext2D, compWidth: number, compHeight: number) { - console.log('ImageKnifeComponent renderFrames frames length =' + frames.length) + globalThis.ImageKnife.log('ImageKnifeComponent renderFrames frames length =' + frames.length) let start = new Date().getTime(); if (index === 0) { // 如果是第一帧，我们只从开始渲染前记录时间 @@ -647,7 +647,7 @@ export struct ImageKnifeComponent { // 具体绘制过程 private canvasDrawPixelMap(frames: GIFFrame[], index: number, context: CanvasRenderingContext2D, compWidth: number, compHeight: number) { - console.log('ImageKnifeComponent canvasDrawPixelMap index=' + index) + globalThis.ImageKnife.log('ImageKnifeComponent canvasDrawPixelMap index=' + index) let frame = frames[index]; let pixelmap = frame['drawPixelMap'] let disposal = 0 @@ -666,7 +666,7 @@ 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(); - console.log('ImageKnifeComponent default drawMainSource end!') + globalThis.ImageKnife.log('ImageKnifeComponent default drawMainSource end!') } } diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnifeDrawFactory.ets b/imageknife/src/main/ets/components/imageknife/ImageKnifeDrawFactory.ets index 8f10f73..e68a0d3 100644 --- a/imageknife/src/main/ets/components/imageknife/ImageKnifeDrawFactory.ets +++ b/imageknife/src/main/ets/components/imageknife/ImageKnifeDrawFactory.ets @@ -237,7 +237,6 @@ export class ImageKnifeDrawFactory{ context.restore(); } context.restore(); - console.log('TestImageKnifeOptionChangedPage4 drawMainSource end!') }) return true; } diff --git a/imageknife/src/main/ets/components/imageknife/RequestOption.ets b/imageknife/src/main/ets/components/imageknife/RequestOption.ets index acbdf82..b16d173 100644 --- a/imageknife/src/main/ets/components/imageknife/RequestOption.ets +++ b/imageknife/src/main/ets/components/imageknife/RequestOption.ets @@ -327,8 +327,8 @@ export class RequestOption { // 占位图解析成功 placeholderOnComplete(imageKnifeData: ImageKnifeData) { - console.log("placeholderOnComplete has called!"); - console.log("Main Image is Ready:" + this.loadMainReady); + globalThis.ImageKnife.log("placeholderOnComplete has called!"); + globalThis.ImageKnife.log("Main Image is Ready:" + this.loadMainReady); if (!this.loadMainReady && !(this.loadErrorReady || this.loadRetryReady) && !this.loadThumbnailReady) { // 主图未加载成功,并且未加载失败 显示占位图 主图加载成功或者加载失败后=>不展示占位图 this.placeholderFunc(imageKnifeData) @@ -337,7 +337,7 @@ export class RequestOption { // 占位图解析失败 placeholderOnError(error) { - console.log("占位图解析失败 error =" + error) + globalThis.ImageKnife.log("占位图解析失败 error =" + error) } @@ -353,7 +353,7 @@ export class RequestOption { // 缩略图解析失败 thumbholderOnError(error) { - console.log("缩略图解析失败 error =" + error) + globalThis.ImageKnife.log("缩略图解析失败 error =" + error) } // 加载失败 占位图解析成功 @@ -367,7 +367,7 @@ export class RequestOption { //加载失败 占位图解析失败 errorholderOnError(error) { - console.log("失败占位图解析失败 error =" + error) + globalThis.ImageKnife.log("失败占位图解析失败 error =" + error) } retryholderOnComplete(imageKnifeData: ImageKnifeData){ @@ -378,7 +378,7 @@ export class RequestOption { } retryholderOnError(error){ - console.log("重试占位图解析失败 error ="+ error) + globalThis.ImageKnife.log("重试占位图解析失败 error ="+ error) } loadComplete(imageKnifeData: ImageKnifeData) { @@ -395,8 +395,8 @@ export class RequestOption { } loadError(err) { - console.log("loadError:"+err); - console.log("loadError stack=:"+JSON.stringify(err.stack)); + globalThis.ImageKnife.log("loadError:"+err); + globalThis.ImageKnife.log("loadError stack=:"+JSON.stringify(err.stack)); //失败占位图展示规则 if (this.retryholderFunc) { // 重试图层优先于加载失败展示 diff --git a/imageknife/src/main/ets/components/imageknife/holder/ErrorHolderManager.ets b/imageknife/src/main/ets/components/imageknife/holder/ErrorHolderManager.ets index a829038..139f18d 100644 --- a/imageknife/src/main/ets/components/imageknife/holder/ErrorHolderManager.ets +++ b/imageknife/src/main/ets/components/imageknife/holder/ErrorHolderManager.ets @@ -40,7 +40,7 @@ export class ErrorHolderManager { } private displayErrorholder(onComplete, onError) { - console.log("displayErrorholder") + globalThis.ImageKnife.log("displayErrorholder") if ((typeof (this.options.errorholderSrc as image.PixelMap).isEditable) == 'boolean') { let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, this.options.errorholderSrc as PixelMap) onComplete(imageKnifeData); diff --git a/imageknife/src/main/ets/components/imageknife/holder/PlaceHolderManager.ets b/imageknife/src/main/ets/components/imageknife/holder/PlaceHolderManager.ets index a3c23f7..d5636dc 100644 --- a/imageknife/src/main/ets/components/imageknife/holder/PlaceHolderManager.ets +++ b/imageknife/src/main/ets/components/imageknife/holder/PlaceHolderManager.ets @@ -42,7 +42,7 @@ export class PlaceHolderManager { } private displayPlaceholder(onComplete, onError) { - console.log("displayPlaceholder") + globalThis.ImageKnife.log("displayPlaceholder") if ((typeof (this.options.placeholderSrc as image.PixelMap).isEditable) == 'boolean') { let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, this.options.placeholderSrc as PixelMap) onComplete(imageKnifeData); diff --git a/imageknife/src/main/ets/components/imageknife/holder/RetryHolderManager.ets b/imageknife/src/main/ets/components/imageknife/holder/RetryHolderManager.ets index ff186a0..9271f75 100644 --- a/imageknife/src/main/ets/components/imageknife/holder/RetryHolderManager.ets +++ b/imageknife/src/main/ets/components/imageknife/holder/RetryHolderManager.ets @@ -42,7 +42,7 @@ export class RetryHolderManager { } private displayRetryholder(onComplete, onError) { - console.log("displayRetryholder") + globalThis.ImageKnife.log("displayRetryholder") if ((typeof (this.options.retryholderSrc as image.PixelMap).isEditable) == 'boolean') { let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, this.options.placeholderSrc as PixelMap) onComplete(imageKnifeData); diff --git a/imageknife/src/main/ets/components/imageknife/requestmanage/RequestManager.ets b/imageknife/src/main/ets/components/imageknife/requestmanage/RequestManager.ets index 43a9ec3..627b3ad 100644 --- a/imageknife/src/main/ets/components/imageknife/requestmanage/RequestManager.ets +++ b/imageknife/src/main/ets/components/imageknife/requestmanage/RequestManager.ets @@ -88,7 +88,7 @@ export class RequestManager { } static execute(option: RequestOption, memoryCache1: LruCache, diskMemoryCache1: DiskLruCache, dataFetch: IDataFetch, resourceFetch: IResourceFetch) { - console.log("RequestManager execute") + globalThis.ImageKnife.log("RequestManager execute") let manager = new RequestManager(option, memoryCache1, diskMemoryCache1, dataFetch, resourceFetch); return new Promise(manager.process.bind(manager)) .then(option.loadComplete.bind(option)) @@ -98,9 +98,9 @@ export class RequestManager { loadCompleteAfter() { try { // 内部消化问题 - console.log("loadCompleteAfter!") + globalThis.ImageKnife.log("loadCompleteAfter!") if (this.options.allCacheInfoCallback) { - console.log("RequestOption =" + JSON.stringify(this.options)); + globalThis.ImageKnife.log("RequestOption =" + JSON.stringify(this.options)); // 内存缓存 let allCacheInfo = new AllCacheInfo(); @@ -124,7 +124,7 @@ export class RequestManager { this.options.allCacheInfoCallback(allCacheInfo) } } catch (err) { - console.log("after err =" + err) + globalThis.ImageKnife.log("after err =" + err) } } @@ -134,12 +134,12 @@ export class RequestManager { private mRunReason: RunReason = RunReason.INITIALIZE; process(onComplete, onError) { - console.log("RequestManager process !"); + globalThis.ImageKnife.log("RequestManager process !"); this.loadLeve1MemoryCache(onComplete, onError) } private runWrapped(request: RequestOption, runReason: RunReason, onComplete, onError) { - console.log("RequestManager runWrapped") + globalThis.ImageKnife.log("RequestManager runWrapped") if (runReason == RunReason.INITIALIZE) { this.mStage = this.getNextStage(request, this.mStage); this.searchLoadFrom(this.options, this.mStage, onComplete, onError); @@ -170,7 +170,7 @@ export class RequestManager { //究竟从哪里加载数据 private searchLoadFrom(request: RequestOption, current: Stage, onComplete, onError) { - console.log("RequestManager searchLoadFrom") + globalThis.ImageKnife.log("RequestManager searchLoadFrom") if (current == Stage.RESOURCE_CACHE) { this.loadDiskFromTransform(request, onComplete, onError); } else if (current == Stage.DATA_CACHE) { @@ -194,13 +194,13 @@ export class RequestManager { // 加载本地资源 private loadSourceFormNative(request: RequestOption, onComplete, onError) { - console.log("RequestManager loadSourceFormNative") + globalThis.ImageKnife.log("RequestManager loadSourceFormNative") // 本地解析后进行一级缓存 let success = (arrayBuffer) => { // 使用媒体子系统 ImageSource解析文件 获取PixelMap let fileTypeUtil = new FileTypeUtil(); let typeValue = fileTypeUtil.getFileType(arrayBuffer) - console.log("RequestManager - 文件类型为= " + typeValue) + globalThis.ImageKnife.log("RequestManager - 文件类型为= " + typeValue) // gif处理 if(ImageKnifeData.GIF == typeValue && !request.dontAnimateFlag){ // 处理gif @@ -240,7 +240,7 @@ export class RequestManager { } // 加载磁盘缓存 原图 private loadDiskFromSource(request: RequestOption, onComplete, onError) { - console.log("RequestManager loadDiskFromSource") + globalThis.ImageKnife.log("RequestManager loadDiskFromSource") let cached = this.mDiskCacheProxy.getValue(request.generateDataKey) if (cached != null) { this.parseDiskFile2PixelMap(request, cached, onComplete, onError) @@ -252,7 +252,7 @@ export class RequestManager { // 加载磁盘缓存 变换后图片 private loadDiskFromTransform(request: RequestOption, onComplete, onError) { - console.log("RequestManager loadDiskFromTransform") + globalThis.ImageKnife.log("RequestManager loadDiskFromTransform") let cached = this.mDiskCacheProxy.getValue(request.generateResourceKey) if (cached != null) { this.parseDiskTransformFile2PixelMap(request, cached, onComplete, onError) @@ -263,7 +263,7 @@ export class RequestManager { } parseSource(request: RequestOption, onComplete, onError) { - console.log("RequestManager parseSource") + globalThis.ImageKnife.log("RequestManager parseSource") if ((typeof (request.loadSrc as image.PixelMap).isEditable) == 'boolean') { // PixelMap 外层捕获效率更高，不会进入这里 } else if (typeof request.loadSrc == 'string') { @@ -273,14 +273,14 @@ export class RequestManager { if (typeof res.id != 'undefined' && typeof res.id != 'undefined') { this.loadSourceFormNative(request, onComplete, onError) } else { - console.log("输入参数有问题！") + globalThis.ImageKnife.log("输入参数有问题！") } } } private loadLeve1MemoryCache(onComplete, onError) { - console.log("RequestManager loadLeve1MemoryCache") + globalThis.ImageKnife.log("RequestManager loadLeve1MemoryCache") // 一级缓存 内存获取 let cache = this.mMemoryCacheProxy.loadMemoryCache(this.options.generateCacheKey, this.options.isCacheable); if (cache == null || typeof cache == 'undefined') { @@ -414,7 +414,7 @@ export class RequestManager { } private downloadSuccess(source: ArrayBuffer, onComplete, onError) { - console.info('Download task completed.'); + globalThis.ImageKnife.info('Download task completed.'); if(source == null || source == undefined || source.byteLength <= 0){ onError('Download task completed. but download file is empty!') @@ -445,7 +445,7 @@ export class RequestManager { await this.mDiskCacheProxy.putValue(this.options.generateDataKey, arraybuffer) }) .catch(err=>{ - console.log('download file is ='+ImageKnifeData.GIF+'and save diskLruCache error ='+ err) + globalThis.ImageKnife.log('download file is ='+ImageKnifeData.GIF+'and save diskLruCache error ='+ err) }) }else if(ImageKnifeData.SVG == filetype){ // 处理svg @@ -459,7 +459,7 @@ export class RequestManager { await this.mDiskCacheProxy.putValue(this.options.generateDataKey, arraybuffer) }) .catch(err=>{ - console.log('download file is ='+ImageKnifeData.SVG+'and save diskLruCache error ='+ err) + globalThis.ImageKnife.log('download file is ='+ImageKnifeData.SVG+'and save diskLruCache error ='+ err) }) } else { // 进行变换 @@ -572,12 +572,12 @@ export class RequestManager { if(err){ onError(err) } - console.log("gifProcess data is null:"+(data == null)); + globalThis.ImageKnife.log("gifProcess data is null:"+(data == null)); if(!!data){ let imageKnifeData = this.createImageGIFFrame(ImageKnifeType.GIFFRAME,data) - console.log('gifProcess 生成gif 返回数据类型') + globalThis.ImageKnife.log('gifProcess 生成gif 返回数据类型') if(cacheStrategy){ - console.log('gifProcess 生成gif并且存入了缓存策略') + globalThis.ImageKnife.log('gifProcess 生成gif并且存入了缓存策略') cacheStrategy(imageKnifeData) } onComplete(imageKnifeData) diff --git a/imageknife/src/main/ets/components/imageknife/transform/BlurTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/BlurTransformation.ets index 5a84076..b445208 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/BlurTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/BlurTransformation.ets @@ -35,7 +35,7 @@ export class BlurTransformation implements BaseTransform { transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - console.log(Constants.PROJECT_TAG + ";BlurTransformation buf is empty"); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";BlurTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";BlurTransformation buf is empty", null); } @@ -73,7 +73,7 @@ export class BlurTransformation implements BaseTransform { fastBlur.blur(data, this._mRadius, true, func); }) .catch((e) => { - console.log(Constants.PROJECT_TAG + ";error:" + e); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";error:" + e); func(e, null); }) }) diff --git a/imageknife/src/main/ets/components/imageknife/transform/BrightnessFilterTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/BrightnessFilterTransformation.ets index 6afc66b..fe245c8 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/BrightnessFilterTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/BrightnessFilterTransformation.ets @@ -36,7 +36,7 @@ export class BrightnessFilterTransformation implements BaseTransform { async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - console.log(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty"); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty", null); } diff --git a/imageknife/src/main/ets/components/imageknife/transform/ContrastFilterTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/ContrastFilterTransformation.ets index 33956ce..9ecbf2d 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/ContrastFilterTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/ContrastFilterTransformation.ets @@ -48,7 +48,7 @@ export class ContrastFilterTransformation implements BaseTransform { async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - console.log(Constants.PROJECT_TAG + ";ContrastFilterTransformation buf is empty"); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";ContrastFilterTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";ContrastFilterTransformation buf is empty", null); } diff --git a/imageknife/src/main/ets/components/imageknife/transform/CropCircleTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/CropCircleTransformation.ets index 6d64065..c883282 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/CropCircleTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/CropCircleTransformation.ets @@ -34,7 +34,7 @@ export class CropCircleTransformation implements BaseTransform { transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - console.error(Constants.PROJECT_TAG + CropCircleTransformation.TAG + " buf is empty"); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + CropCircleTransformation.TAG + " buf is empty"); if (func) { func(Constants.PROJECT_TAG + CropCircleTransformation.TAG + " buf is empty", null); } @@ -77,7 +77,7 @@ export class CropCircleTransformation implements BaseTransform { this.transformCircle(p, func); }) .catch(e => { - console.error(Constants.PROJECT_TAG + CropCircleTransformation.TAG + " transform e:" + e); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + CropCircleTransformation.TAG + " transform e:" + e); if (func) { func(Constants.PROJECT_TAG + CropCircleTransformation.TAG + "e" + e, null); } diff --git a/imageknife/src/main/ets/components/imageknife/transform/CropCircleWithBorderTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/CropCircleWithBorderTransformation.ets index 86495f1..5ae07ae 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/CropCircleWithBorderTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/CropCircleWithBorderTransformation.ets @@ -53,7 +53,7 @@ export class CropCircleWithBorderTransformation implements BaseTransform) { if (!buf || buf.byteLength <= 0) { - console.log(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation buf is empty"); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation buf is empty", null); } @@ -96,7 +96,7 @@ export class CropCircleWithBorderTransformation implements BaseTransform { - console.log(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation e:" + e); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation e:" + e); if (func) { func(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation e:" + e, null); } diff --git a/imageknife/src/main/ets/components/imageknife/transform/CropSquareTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/CropSquareTransformation.ets index 63b7b21..428fad4 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/CropSquareTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/CropSquareTransformation.ets @@ -29,7 +29,7 @@ export class CropSquareTransformation implements BaseTransform { transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - console.log(Constants.PROJECT_TAG + ";CropSquareTransformation buf is empty"); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";CropSquareTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";CropSquareTransformation buf is empty", null); } diff --git a/imageknife/src/main/ets/components/imageknife/transform/CropTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/CropTransformation.ets index f06cc09..a088c98 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/CropTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/CropTransformation.ets @@ -40,7 +40,7 @@ export class CropTransformation implements BaseTransform { transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - console.log(Constants.PROJECT_TAG + ";CropTransformation buf is empty"); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";CropTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";CropTransformation buf is empty", null); } @@ -85,7 +85,7 @@ export class CropTransformation implements BaseTransform { func("", data); }) .catch((e) => { - console.log(Constants.PROJECT_TAG + ";error:" + e); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";error:" + e); func(e, null); }) }) diff --git a/imageknife/src/main/ets/components/imageknife/transform/GrayscaleTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/GrayscaleTransformation.ets index d146073..5c52270 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/GrayscaleTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/GrayscaleTransformation.ets @@ -27,7 +27,7 @@ export class GrayscaleTransformation implements BaseTransform { async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - console.log(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty"); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty", null); } diff --git a/imageknife/src/main/ets/components/imageknife/transform/InvertFilterTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/InvertFilterTransformation.ets index ccaeaca..35d1e9b 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/InvertFilterTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/InvertFilterTransformation.ets @@ -34,7 +34,7 @@ export class InvertFilterTransformation implements BaseTransform { async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - console.log(Constants.PROJECT_TAG + ";InvertFilterTransformation buf is empty"); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";InvertFilterTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";InvertFilterTransformation buf is empty", null); } diff --git a/imageknife/src/main/ets/components/imageknife/transform/MaskTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/MaskTransformation.ets index 27130e6..c7fcdcb 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/MaskTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/MaskTransformation.ets @@ -34,7 +34,7 @@ export class MaskTransformation implements BaseTransform { async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - console.log(Constants.PROJECT_TAG + ";MaskTransformation buf is empty"); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";MaskTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";MaskTransformation buf is empty", null); } diff --git a/imageknife/src/main/ets/components/imageknife/transform/PixelationFilterTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/PixelationFilterTransformation.ets index 6ea204f..b878c79 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/PixelationFilterTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/PixelationFilterTransformation.ets @@ -40,7 +40,7 @@ export class PixelationFilterTransformation implements BaseTransform { transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - console.log(Constants.PROJECT_TAG + ";PixelationFilterTransformation buf is empty"); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";PixelationFilterTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";PixelationFilterTransformation buf is empty", null); } @@ -78,7 +78,7 @@ export class PixelationFilterTransformation implements BaseTransform { pixelUtils.pixel(data, this._mPixel, func); }) .catch((e) => { - console.log(Constants.PROJECT_TAG + ";error:" + e); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";error:" + e); func(e, null); }) }) diff --git a/imageknife/src/main/ets/components/imageknife/transform/RotateImageTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/RotateImageTransformation.ets index 3034c55..8266c94 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/RotateImageTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/RotateImageTransformation.ets @@ -33,7 +33,7 @@ export class RotateImageTransformation implements BaseTransform { transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - console.log(Constants.PROJECT_TAG + ";RotateImageTransformation buf is empty"); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";RotateImageTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";RotateImageTransformation buf is empty", null); } @@ -72,7 +72,7 @@ export class RotateImageTransformation implements BaseTransform { func("", data); }) .catch((e) => { - console.log(Constants.PROJECT_TAG + ";error:" + e); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";error:" + e); func(e, null); }) }) diff --git a/imageknife/src/main/ets/components/imageknife/transform/RoundedCornersTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/RoundedCornersTransformation.ets index da5fcb3..6610742 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/RoundedCornersTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/RoundedCornersTransformation.ets @@ -49,10 +49,10 @@ export class RoundedCornersTransformation implements BaseTransform { } transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { - console.log('RoundedCornersTransformation = '+ this.getName() + globalThis.ImageKnife.log('RoundedCornersTransformation = '+ this.getName() + 'buf is null ='+ (buf == null)); if (!buf || buf.byteLength <= 0) { - console.log(Constants.PROJECT_TAG + ";RoundedCornersTransformation buf is empty"); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";RoundedCornersTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";RoundedCornersTransformation buf is empty", null); } @@ -114,11 +114,11 @@ export class RoundedCornersTransformation implements BaseTransform { } }) .catch((error) => { - console.log(Constants.PROJECT_TAG + "RoundedCornersTransformation error:" + error); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + "RoundedCornersTransformation error:" + error); }); }) .catch((e) => { - console.log(Constants.PROJECT_TAG + ";error:" + e); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";error:" + e); if (func) { func(e, null); } diff --git a/imageknife/src/main/ets/components/imageknife/transform/SepiaFilterTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/SepiaFilterTransformation.ets index bca60c4..2199918 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/SepiaFilterTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/SepiaFilterTransformation.ets @@ -31,7 +31,7 @@ export class SepiaFilterTransformation implements BaseTransform { async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - console.log(Constants.PROJECT_TAG + ";SepiaFilterTransformation buf is empty"); + globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";SepiaFilterTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";SepiaFilterTransformation buf is empty", null); } diff --git a/imageknife/src/main/ets/components/imageknife/utils/FileTypeUtil.ets b/imageknife/src/main/ets/components/imageknife/utils/FileTypeUtil.ets index cb9a367..71289ca 100644 --- a/imageknife/src/main/ets/components/imageknife/utils/FileTypeUtil.ets +++ b/imageknife/src/main/ets/components/imageknife/utils/FileTypeUtil.ets @@ -44,7 +44,7 @@ export class FileTypeUtil { } let dataView = new DataView(arraybuffer); - console.log('dataView +'+this.getDataViewAt(dataView,0)+this.getDataViewAt(dataView,1)) + globalThis.ImageKnife.log('dataView +'+this.getDataViewAt(dataView,0)+this.getDataViewAt(dataView,1)) for(var [key,value] of this.map){ let keySplit = key.split(',') @@ -58,10 +58,10 @@ export class FileTypeUtil { fileMagic+=this.getDataViewAt(dataView,offset+start) start++; } -// console.log('magic='+fileMagic+' keySplit[1]='+keySplit[1]+' fileMagic == keySplit[1] ='+(fileMagic == keySplit[1])+ +// globalThis.ImageKnife.log('magic='+fileMagic+' keySplit[1]='+keySplit[1]+' fileMagic == keySplit[1] ='+(fileMagic == keySplit[1])+ // ' fileMagic type ='+typeof(fileMagic) + ' keySplit[1]='+typeof(keySplit[1])) if(fileMagic == keySplit[1]){ - console.log('匹配到了 fileType='+value) + globalThis.ImageKnife.log('匹配到了 fileType='+value) fileType = value break; } @@ -105,7 +105,7 @@ export class FileTypeUtil { private printMapContent(){ for(var [key,value] of this.map){ - console.log('key='+key+'---value='+value) + globalThis.ImageKnife.log('key='+key+'---value='+value) } } diff --git a/imageknife/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets b/imageknife/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets index aa82948..29552dc 100644 --- a/imageknife/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets +++ b/imageknife/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets @@ -21,14 +21,14 @@ import image from '@ohos.multimedia.image' export class GIFParseImpl implements IParseGif { parseGifs(imageinfo: ArrayBuffer, callback: (data?, err?) => void, worker?,runMainThread?:boolean) { let resolveWorker = worker; - console.log('parseGifs resolveWorker1 is null =' + (resolveWorker == null)) + globalThis.ImageKnife.log('parseGifs resolveWorker1 is null =' + (resolveWorker == null)) if (!resolveWorker) { resolveWorker = globalThis.ImageKnife.getGifWorker(); } - console.log('parseGifs resolveWorker2 is null =' + (resolveWorker == null)) + globalThis.ImageKnife.log('parseGifs resolveWorker2 is null =' + (resolveWorker == null)) if (!!resolveWorker && !runMainThread) { - console.log('parseGifs in worker thread!') + globalThis.ImageKnife.log('parseGifs in worker thread!') this.useWorkerParse(resolveWorker, imageinfo, (data, err) => { if (err) { callback(undefined, err) @@ -48,9 +48,9 @@ export class GIFParseImpl implements IParseGif { } }) } else { - console.log('parseGifs in main thread!') + globalThis.ImageKnife.log('parseGifs in main thread!') let frames = parseBufferToFrame(imageinfo) - console.log('frames length =' + frames.length) + globalThis.ImageKnife.log('frames length =' + frames.length) this.createPixelMapAll(frames).then((pixelmaps) => { if (pixelmaps.length == frames.length) { for (let i = 0;i < frames.length; i++) { @@ -58,11 +58,11 @@ export class GIFParseImpl implements IParseGif { frame['drawPixelMap'] = pixelmaps[i]; frame['patch'] = null; } - console.log('parseGifs in main thread! callback is done!') + globalThis.ImageKnife.log('parseGifs in main thread! callback is done!') callback(frames, undefined) } }).catch(err => { - console.log('parseGifs in main thread! err =' + err) + globalThis.ImageKnife.log('parseGifs in main thread! err =' + err) callback(undefined, err) }) } @@ -97,7 +97,7 @@ export class GIFParseImpl implements IParseGif { } worker.onexit = function () { - console.log('gifWork worker.onexit!') + globalThis.ImageKnife.log('gifWork worker.onexit!') } worker.onmessage = (e) => { diff --git a/imageknife/src/main/ets/components/imageknife/utils/svg/SVGImageViewModel.ets b/imageknife/src/main/ets/components/imageknife/utils/svg/SVGImageViewModel.ets deleted file mode 100644 index c7480da..0000000 --- a/imageknife/src/main/ets/components/imageknife/utils/svg/SVGImageViewModel.ets +++ /dev/null @@ -1,1107 +0,0 @@ -/* - * Copyright (C) 2022 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 image from '@ohos.multimedia.image' -import util from '@ohos.util' -import display from '@ohos.display'; -import configuration from '@system.configuration'; -import { - SVG, - PathView, - ImageSvg, - CircleView, - EllipseView, - LineView, - PolyLineView, - PolygonView, - RectView, - Group, - Switch, - TextView, - Use, - SVGXMLConstants, - SVGAttrConstants, - SVGManager, - SVGXMLChecker -} from '@ohos/svg'; - -export default class SVGImageViewModel { - private svgString: string = ""; - private rawfileName: string = ""; - private media: Resource; - svgs: SVG[] = [] - svg: SVG = new SVG(); - isPx: boolean = false; - private context: OffscreenCanvasRenderingContext2D - private svgManager: SVGManager = SVGManager.getInstance(); - - deviceW: number = display.getDefaultDisplaySync().width; - deviceH: number = display.getDefaultDisplaySync().height; - - /** - * 设置svg的字符串 - * @param svgString svg字符串 - */ - public setSvgString(svgString: string) { - this.svgString = svgString; - this.parseSvgFromString(); - } - - /** - * 设置rawfile下的svg - * @param svgRawfile rawfile下的svg文件名 - */ - public setSvgRawfile(svgRawfile: string) { - this.rawfileName = svgRawfile; - this.parseSvgFromRawfile(); - } - - /** - * 设置media下的svg - * @param media media下的svg文件 - */ - public setSvgMedia(media: Resource) { - this.media = media; - this.parseSvgFromMedia(); - } - - public setSvgUint8Array(uint8:Uint8Array){ - this.svgString = this.unit8ArrayToString(uint8) - this.parseSvgFromString(); - } - - private parseSvgFromMedia() { - globalThis.resourceManager.getMedia(this.media.id, (error, value) => { - if (error != null) { - console.error("media get error:" + error) - throw new Error("未找到media下的svg") - } else { - this.svgString = this.unit8ArrayToString(value); - this.parseSvgFromString(); - } - }) - } - - private parseSvgFromRawfile() { - globalThis.resourceManager.getRawFile(this.rawfileName, (error, value) => { - if (error != null) { - console.error("rawfile get error:" + error) - throw new Error("未找到rawfile下的svg") - } else { - this.svgString = this.unit8ArrayToString(value); - this.parseSvgFromString(); - } - }) - } - - private unit8ArrayToString(fileData) { -// var dataString = ""; -// for (var i = 0; i < fileData.length; i++) { -// dataString += String.fromCharCode(fileData[i]); -// } -// return dataString - let textDecoder = new util.TextDecoder("utf-8", {ignoreBOM:true}); - let retStr = textDecoder.decode(fileData, {stream: false}); - return retStr; - } - - private parseSvgFromString() { - this.svgs.length = 0; - this.svgManager.parseString(this.svgString, (jsonString) => { - var reg = new RegExp("stroke-", "g") - jsonString = String(jsonString).replace(reg, "stroke_"); - reg = new RegExp("font-", "g") - jsonString = String(jsonString).replace(reg, "font_"); - reg = new RegExp("fill-", "g") - jsonString = String(jsonString).replace(reg, "fill_"); - var svgElements: any[] = JSON.parse(jsonString).elements; - if (!SVGXMLChecker.checkArrayEmpty(svgElements)) { - this.getSvgData(svgElements); - } - }) - } - - private getSvgData(data: any[], g?: SVG) { - for (let i = 0;i < data.length; i++) { - if (data[i].type == SVGAttrConstants.ATTR_VALUE_ELEMENT) { - switch (data[i].name) { - case SVGXMLConstants.SVG_SVG_TAG: - if (!SVGXMLChecker.checkObjectEmpty(data[i].attributes)) { - this.parseAttributesSVG(data[i].attributes); - } - if (!SVGXMLChecker.checkArrayEmpty(data[i].elements)) { - this.getSvgData(data[i].elements); - } - break; - } - this.setSvgArrayChild(data[i], this.svgs, g) - } - } - } - - private setSvgArrayChild(elements: any, svgs: SVG[], g?: SVG) { - switch (elements.name) { - case SVGXMLConstants.SVG_G_TAG: - if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) { - g = this.parseAttributesGroup(elements.attributes, g); - } - if (!SVGXMLChecker.checkArrayEmpty(elements.elements)) { - this.getSvgData(elements.elements, g); - } - break; - case SVGXMLConstants.SVG_CIRCLE_TAG: - if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) { - svgs.push(this.parseAttributesCircle(elements.attributes, g)) - } - break; - case SVGXMLConstants.SVG_ELLIPSE_TAG: - if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) { - svgs.push(this.parseAttributesEllipse(elements.attributes, g)) - } - break; - case SVGXMLConstants.SVG_LINE_TAG: - if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) { - svgs.push(this.parseAttributesLine(elements.attributes, g)) - } - break; - case SVGXMLConstants.SVG_POLYLINE_TAG: - if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) { - svgs.push(this.parseAttributesPolyLine(elements.attributes, g)) - } - break; - case SVGXMLConstants.SVG_POLYGON_TAG: - if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) { - svgs.push(this.parseAttributesPolygon(elements.attributes, g)); - } - break; - case SVGXMLConstants.SVG_PATH_TAG: - if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) { - svgs.push(this.parseAttributesPath(elements.attributes, g)); - } - break; - case SVGXMLConstants.SVG_RECT_TAG: - if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) { - svgs.push(this.parseAttributesRect(elements.attributes, g)); - } - break; - case SVGXMLConstants.SVG_IMAGE_TAG: - if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) { - svgs.push(this.parseAttributesImage(elements.attributes, g)); - } - break; - case SVGXMLConstants.SVG_STYLE_TAG: - if (!SVGXMLChecker.checkArrayEmpty(elements.elements)) { - } - break; - case SVGXMLConstants.SVG_USE_TAG: - if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) { - svgs.push(this.parseAttributesUse(elements.attributes, g)); - } - break; - case SVGXMLConstants.SVG_TEXT_TAG: - if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) { - svgs.push(this.parseAttributesText(elements.attributes, g, elements.elements[0].text)); - } - break; - case SVGXMLConstants.SVG_SWITCH_TAG: - if (!SVGXMLChecker.checkArrayEmpty(elements.elements)) { - svgs.push(this.parseAttributesSwitch(elements.attributes, elements.elements)); - } - break; - } - } - - private parseAttributesSVG(svg: any) { - if (!SVGXMLChecker.checkObjectEmpty(svg.id)) { - this.svg.setId(svg.id); - } - if (!SVGXMLChecker.checkObjectEmpty(svg.width)) { - this.svg.setWidth(svg.width); - } - if (!SVGXMLChecker.checkObjectEmpty(svg.height)) { - this.svg.setHeight(svg.height); - } - if (!SVGXMLChecker.checkObjectEmpty(svg.viewBox)) { - this.svg.setViewBox(svg.viewBox); - } - if (!SVGXMLChecker.checkObjectEmpty(svg.fill)) { - this.svg.setFill(svg.fill); - } - if (!SVGXMLChecker.checkObjectEmpty(svg.stroke)) { - this.svg.setStroke(svg.stroke); - } - if (!SVGXMLChecker.checkObjectEmpty(svg.stroke_width)) { - this.svg.setStrokeWidth(svg.stroke_width); - } - if (this.svg.width == '100%') { - this.svg.setWidth(this.svg.viewBoxWidth) - } - if (this.svg.height == '100%') { - this.svg.setHeight(this.svg.viewBoxHeight) - } - } - - private parseAttributesGroup(g: any, lastGroup?: SVG): SVG { - var newGroup: SVG = SVGXMLChecker.checkObjectEmpty(lastGroup) ? new SVG() : lastGroup - if (!SVGXMLChecker.checkObjectEmpty(g.id)) { - newGroup.setId(g.id); - } - if (!SVGXMLChecker.checkObjectEmpty(g.class)) { - newGroup.setClass(g.class); - } - if (!SVGXMLChecker.checkObjectEmpty(g.fill)) { - newGroup.setFill(g.fill); - } else { - newGroup.setFill(newGroup.fill); - } - if (!SVGXMLChecker.checkObjectEmpty(g.fill_opacity)) { - newGroup.setFillOpacity(g.fill_opacity); - } - if (!SVGXMLChecker.checkObjectEmpty(g.stroke)) { - newGroup.setStroke(g.stroke); - } else { - newGroup.setStroke(newGroup.stroke); - } - if (!SVGXMLChecker.checkObjectEmpty(g.stroke_width)) { - newGroup.setStrokeWidth(g.stroke_width); - } else { - newGroup.setStrokeWidth(newGroup.strokeWidth); - } - if (!SVGXMLChecker.checkObjectEmpty(g.stroke_miterlimit)) { - newGroup.setStrokeMiterLimit(g.stroke_miterlimit); - } - if (!SVGXMLChecker.checkObjectEmpty(g.style)) { - newGroup.setStyle(g.style); - } - if (!SVGXMLChecker.checkObjectEmpty(g.transform)) { - newGroup.setTransform(g.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, true); - } - if (!SVGXMLChecker.checkObjectEmpty(g.systemLanguage)) { - newGroup.setSystemLanguage(g.systemLanguage); - } - return newGroup; - } - - private parseAttributesCircle(circle: any, g: SVG): CircleView { - var newCircle: CircleView = new CircleView(); - if (SVGXMLChecker.checkObjectEmpty(g)) { - g = new Group(); - } - if (!SVGXMLChecker.checkObjectEmpty(circle.id)) { - newCircle.setId(circle.id); - } - if (!SVGXMLChecker.checkObjectEmpty(circle.class)) { - newCircle.setClass(circle.class); - } - if (!SVGXMLChecker.checkObjectEmpty(circle.r)) { - newCircle.setWidth(circle.r); - newCircle.setHeight(circle.r); - } - if (!SVGXMLChecker.checkObjectEmpty(circle.cx)) { - newCircle.setX(circle.cx); - } - if (!SVGXMLChecker.checkObjectEmpty(circle.cy)) { - newCircle.setY(circle.cy); - } - if (!SVGXMLChecker.checkObjectEmpty(circle.transform)) { - newCircle.copyTransform(g); - newCircle.setTransform(circle.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, false); - } - if (!SVGXMLChecker.checkObjectEmpty(circle.fill)) { - newCircle.setFill(circle.fill); - } else { - newCircle.setFill(g.fill); - } - if (!SVGXMLChecker.checkObjectEmpty(circle.fill_opacity)) { - newCircle.setFillOpacity(circle.fill_opacity); - } - if (!SVGXMLChecker.checkObjectEmpty(circle.stroke)) { - newCircle.setStroke(circle.stroke); - } else { - newCircle.setStroke(g.stroke); - } - if (!SVGXMLChecker.checkObjectEmpty(circle.stroke_width)) { - newCircle.setStrokeWidth(circle.stroke_width); - } else { - newCircle.setStrokeWidth(g.strokeWidth); - } - if (!SVGXMLChecker.checkObjectEmpty(circle.stroke_miterlimit)) { - newCircle.setStrokeMiterLimit(circle.stroke_miterlimit); - } - if (!SVGXMLChecker.checkObjectEmpty(circle.style)) { - newCircle.setStyle(circle.style); - } - return newCircle; - } - - private parseAttributesEllipse(ellipse: any, g: SVG): EllipseView { - var newEllipse: EllipseView = new EllipseView(); - if (SVGXMLChecker.checkObjectEmpty(g)) { - g = new Group(); - } - if (!SVGXMLChecker.checkObjectEmpty(ellipse.id)) { - newEllipse.setId(ellipse.id); - } - if (!SVGXMLChecker.checkObjectEmpty(ellipse.class)) { - newEllipse.setClass(ellipse.class); - } - if (!SVGXMLChecker.checkObjectEmpty(ellipse.cx)) { - newEllipse.setX(ellipse.cx) - } - if (!SVGXMLChecker.checkObjectEmpty(ellipse.cy)) { - newEllipse.setY(ellipse.cy) - } - if (!SVGXMLChecker.checkObjectEmpty(ellipse.rx)) { - newEllipse.setWidth(Number(ellipse.rx) * 2); - // newEllipse.setX(-Number(ellipse.rx)) - } - if (!SVGXMLChecker.checkObjectEmpty(ellipse.ry)) { - newEllipse.setHeight(Number(ellipse.ry) * 2); - // newEllipse.setY(-Number(ellipse.ry)) - } - if (!SVGXMLChecker.checkObjectEmpty(ellipse.x)) { - newEllipse.setX(ellipse.x); - } - if (!SVGXMLChecker.checkObjectEmpty(ellipse.y)) { - newEllipse.setY(ellipse.y); - } - if (!SVGXMLChecker.checkObjectEmpty(ellipse.transform)) { - newEllipse.copyTransform(g); - newEllipse.setTransform(ellipse.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, false); - } - if (!SVGXMLChecker.checkObjectEmpty(ellipse.fill)) { - newEllipse.setFill(ellipse.fill); - } else { - newEllipse.setFill(g.fill); - } - if (!SVGXMLChecker.checkObjectEmpty(ellipse.fill_opacity)) { - newEllipse.setFillOpacity(ellipse.fill_opacity); - } - if (!SVGXMLChecker.checkObjectEmpty(ellipse.stroke)) { - newEllipse.setStroke(ellipse.stroke); - } else { - newEllipse.setStroke(g.stroke); - } - if (!SVGXMLChecker.checkObjectEmpty(ellipse.stroke_width)) { - newEllipse.setStrokeWidth(ellipse.stroke_width); - } else { - newEllipse.setStrokeWidth(g.strokeWidth); - } - if (!SVGXMLChecker.checkObjectEmpty(ellipse.stroke_miterlimit)) { - newEllipse.setStrokeMiterLimit(ellipse.stroke_miterlimit); - } - if (!SVGXMLChecker.checkObjectEmpty(ellipse.style)) { - newEllipse.setStyle(ellipse.style); - } - - if (newEllipse.cx > 0 && newEllipse.cy > 0) { - newEllipse.setX(Number(newEllipse.x) + Number(newEllipse.cx)) - newEllipse.setY(Number(newEllipse.y) + Number(newEllipse.cy)) - } - if (!SVGXMLChecker.checkObjectEmpty(ellipse.systemLanguage)) { - newEllipse.setSystemLanguage(ellipse.systemLanguage); - } - return newEllipse; - } - - private parseAttributesLine(line: any, g: SVG): LineView { - var newLine: LineView = new LineView(); - if (SVGXMLChecker.checkObjectEmpty(g)) { - g = new Group(); - } - if (!SVGXMLChecker.checkObjectEmpty(line.id)) { - newLine.setId(line.id); - } - if (!SVGXMLChecker.checkObjectEmpty(line.class)) { - newLine.setClass(line.class); - } - if (!SVGXMLChecker.checkObjectEmpty(line.x1)) { - newLine.setStartX(line.x1); - } - if (!SVGXMLChecker.checkObjectEmpty(line.y1)) { - newLine.setStartY(line.y1); - } - if (!SVGXMLChecker.checkObjectEmpty(line.x2)) { - newLine.setEndX(line.x2); - } - if (!SVGXMLChecker.checkObjectEmpty(line.y2)) { - newLine.setEndY(line.y2); - } - if (!SVGXMLChecker.checkObjectEmpty(line.x)) { - newLine.setX(line.x); - } - if (!SVGXMLChecker.checkObjectEmpty(line.y)) { - newLine.setY(line.y); - } - if (!SVGXMLChecker.checkObjectEmpty(line.transform)) { - newLine.copyTransform(g); - newLine.setTransform(line.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, false); - } - if (!SVGXMLChecker.checkObjectEmpty(line.fill)) { - newLine.setFill(line.fill); - } else { - newLine.setFill(g.fill); - } - if (!SVGXMLChecker.checkObjectEmpty(line.fill_opacity)) { - newLine.setFillOpacity(line.fill_opacity); - } - if (!SVGXMLChecker.checkObjectEmpty(line.stroke)) { - newLine.setStroke(line.stroke); - } else { - newLine.setStroke(g.stroke); - } - if (!SVGXMLChecker.checkObjectEmpty(line.stroke_width)) { - newLine.setStrokeWidth(line.stroke_width); - } else { - newLine.setStrokeWidth(g.strokeWidth); - } - if (!SVGXMLChecker.checkObjectEmpty(line.stroke_miterlimit)) { - newLine.setStrokeMiterLimit(line.stroke_miterlimit); - } - if (!SVGXMLChecker.checkObjectEmpty(line.style)) { - newLine.setStyle(line.style); - } - if (!SVGXMLChecker.checkObjectEmpty(line.systemLanguage)) { - newLine.setSystemLanguage(line.systemLanguage); - } - - return newLine; - } - - private parseAttributesPolyLine(polyLine: any, g: SVG): PolyLineView { - var newPolyLine = new PolyLineView(); - if (SVGXMLChecker.checkObjectEmpty(g)) { - g = new Group(); - } - if (!SVGXMLChecker.checkObjectEmpty(polyLine.id)) { - newPolyLine.setId(polyLine.id); - } - if (!SVGXMLChecker.checkObjectEmpty(polyLine.class)) { - newPolyLine.setClass(polyLine.class); - } - if (!SVGXMLChecker.checkObjectEmpty(polyLine.points)) { - let pointsArray: string[] = String(polyLine.points).split(" "); - let pointsResult: Array<[number, number]> = new Array<[number, number]>(); - for (let i = 0;i < pointsArray.length; i++) { - let pointsItem = pointsArray[i].split(",") - pointsResult.push([Number(pointsItem[0]), Number(pointsItem[1])]) - } - newPolyLine.setPointsResult(pointsResult); - } - if (!SVGXMLChecker.checkObjectEmpty(polyLine.x)) { - newPolyLine.setX(polyLine.x); - } - if (!SVGXMLChecker.checkObjectEmpty(polyLine.y)) { - newPolyLine.setY(polyLine.y); - } - if (!SVGXMLChecker.checkObjectEmpty(polyLine.transform)) { - newPolyLine.copyTransform(g); - newPolyLine.setTransform(polyLine.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, false); - } - if (!SVGXMLChecker.checkObjectEmpty(polyLine.fill)) { - newPolyLine.setFill(polyLine.fill); - } else { - newPolyLine.setFill(g.fill); - } - if (!SVGXMLChecker.checkObjectEmpty(polyLine.fill_opacity)) { - newPolyLine.setFillOpacity(polyLine.fill_opacity); - } - if (!SVGXMLChecker.checkObjectEmpty(polyLine.stroke)) { - newPolyLine.setStroke(polyLine.stroke); - } else { - newPolyLine.setStroke(g.stroke); - } - if (!SVGXMLChecker.checkObjectEmpty(polyLine.stroke_width)) { - newPolyLine.setStrokeWidth(polyLine.stroke_width); - } else { - newPolyLine.setStrokeWidth(g.strokeWidth); - } - if (!SVGXMLChecker.checkObjectEmpty(polyLine.stroke_miterlimit)) { - newPolyLine.setStrokeMiterLimit(polyLine.stroke_miterlimit); - } - if (!SVGXMLChecker.checkObjectEmpty(polyLine.style)) { - newPolyLine.setStyle(polyLine.style); - } - if (!SVGXMLChecker.checkObjectEmpty(polyLine.systemLanguage)) { - newPolyLine.setSystemLanguage(polyLine.systemLanguage); - } - - return newPolyLine; - } - - private parseAttributesPolygon(polygon: any, g: SVG): PolygonView { - var newPolygon = new PolygonView(); - if (SVGXMLChecker.checkObjectEmpty(g)) { - g = new Group(); - } - if (!SVGXMLChecker.checkObjectEmpty(polygon.id)) { - newPolygon.setId(polygon.id); - } - if (!SVGXMLChecker.checkObjectEmpty(polygon.class)) { - newPolygon.setClass(polygon.class); - } - if (!SVGXMLChecker.checkObjectEmpty(polygon.points)) { - let pointsArray: string[] = String(polygon.points).split(" "); - let pointsResult: Array<[number, number]> = new Array<[number, number]>(); - for (let i = 0;i < pointsArray.length; i++) { - let pointsItem = pointsArray[i].split(",") - pointsResult.push([Number(pointsItem[0]), Number(pointsItem[1])]) - } - newPolygon.setPointsResult(pointsResult); - } - if (!SVGXMLChecker.checkObjectEmpty(polygon.x)) { - newPolygon.setX(polygon.x); - } - if (!SVGXMLChecker.checkObjectEmpty(polygon.y)) { - newPolygon.setY(polygon.y); - } - if (!SVGXMLChecker.checkObjectEmpty(polygon.transform)) { - newPolygon.copyTransform(g); - newPolygon.setTransform(polygon.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, false); - } - if (!SVGXMLChecker.checkObjectEmpty(polygon.fill)) { - newPolygon.setFill(polygon.fill); - } else { - newPolygon.setFill(g.fill); - } - if (!SVGXMLChecker.checkObjectEmpty(polygon.fill_opacity)) { - newPolygon.setFillOpacity(polygon.fill_opacity); - } - if (!SVGXMLChecker.checkObjectEmpty(polygon.stroke)) { - newPolygon.setStroke(polygon.stroke); - } else { - newPolygon.setStroke(g.stroke); - } - if (!SVGXMLChecker.checkObjectEmpty(polygon.stroke_width)) { - newPolygon.setStrokeWidth(polygon.stroke_width); - } else { - newPolygon.setStrokeWidth(g.strokeWidth); - } - if (!SVGXMLChecker.checkObjectEmpty(polygon.stroke_miterlimit)) { - newPolygon.setStrokeMiterLimit(polygon.stroke_miterlimit); - } - if (!SVGXMLChecker.checkObjectEmpty(polygon.style)) { - newPolygon.setStyle(polygon.style); - } - if (!SVGXMLChecker.checkObjectEmpty(polygon.systemLanguage)) { - newPolygon.setSystemLanguage(polygon.systemLanguage); - } - - return newPolygon; - } - - private parseAttributesPath(path: any, g: SVG): PathView { - var newPath = new PathView(); - if (SVGXMLChecker.checkObjectEmpty(g)) { - g = new Group(); - } - if (!SVGXMLChecker.checkObjectEmpty(path.id)) { - newPath.setId(path.id); - } - if (!SVGXMLChecker.checkObjectEmpty(path.class)) { - newPath.setClass(path.class); - } - if (!SVGXMLChecker.checkObjectEmpty(path.d)) { - newPath.setCommands(path.d); - } - if (!SVGXMLChecker.checkObjectEmpty(path.x)) { - newPath.setX(path.x); - } - if (!SVGXMLChecker.checkObjectEmpty(path.y)) { - newPath.setY(path.y); - } - if (!SVGXMLChecker.checkObjectEmpty(path.transform)) { - newPath.copyTransform(g); - newPath.setTransform(path.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, false); - } - if (!SVGXMLChecker.checkObjectEmpty(path.fill)) { - newPath.setFill(path.fill); - } else { - newPath.setFill(g.fill); - } - if (!SVGXMLChecker.checkObjectEmpty(path.fill_opacity)) { - newPath.setFillOpacity(path.fill_opacity); - } - if (!SVGXMLChecker.checkObjectEmpty(path.stroke)) { - newPath.setStroke(path.stroke); - } else { - newPath.setStroke(g.stroke); - } - if (!SVGXMLChecker.checkObjectEmpty(path.stroke_width)) { - newPath.setStrokeWidth(path.stroke_width); - } else { - newPath.setStrokeWidth(g.strokeWidth); - } - if (!SVGXMLChecker.checkObjectEmpty(path.stroke_miterlimit)) { - newPath.setStrokeMiterLimit(path.stroke_miterlimit); - } - if (!SVGXMLChecker.checkObjectEmpty(path.style)) { - newPath.setStyle(path.style); - } - if (!SVGXMLChecker.checkObjectEmpty(path.systemLanguage)) { - newPath.setSystemLanguage(path.systemLanguage); - } - - return newPath; - } - - private parseAttributesRect(rect: any, g: SVG): RectView { - var newRect = new RectView(); - if (SVGXMLChecker.checkObjectEmpty(g)) { - g = new Group(); - } - if (!SVGXMLChecker.checkObjectEmpty(rect.id)) { - newRect.setId(rect.id); - } - if (!SVGXMLChecker.checkObjectEmpty(rect.class)) { - newRect.setClass(g._class + " " + rect.class); - } else { - newRect.setClass(g._class); - } - if (!SVGXMLChecker.checkObjectEmpty(rect.width)) { - newRect.setWidth(rect.width); - } - if (!SVGXMLChecker.checkObjectEmpty(rect.height)) { - newRect.setHeight(rect.height); - } - if (!SVGXMLChecker.checkObjectEmpty(rect.rx)) { - newRect.setRx(rect.rx); - } - if (!SVGXMLChecker.checkObjectEmpty(rect.ry)) { - newRect.setRy(rect.ry); - } - if (!SVGXMLChecker.checkObjectEmpty(rect.x)) { - newRect.setX(rect.x); - } - if (!SVGXMLChecker.checkObjectEmpty(rect.y)) { - newRect.setY(rect.y); - } - if (!SVGXMLChecker.checkObjectEmpty(rect.transform)) { - newRect.copyTransform(g); - newRect.setTransform(rect.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, false); - } - if (!SVGXMLChecker.checkObjectEmpty(rect.fill)) { - newRect.setFill(!SVGXMLChecker.checkObjectEmpty(rect.fill) ? rect.fill : g.fill); - } else { - newRect.setFill(g.fill); - } - if (!SVGXMLChecker.checkObjectEmpty(rect.fill_opacity)) { - newRect.setFillOpacity(rect.fill_opacity); - } - if (!SVGXMLChecker.checkObjectEmpty(rect.stroke)) { - newRect.setStroke(rect.stroke); - } else { - newRect.setStroke(g.stroke); - } - if (!SVGXMLChecker.checkObjectEmpty(rect.stroke_width)) { - newRect.setStrokeWidth(rect.stroke_width); - } else { - newRect.setStrokeWidth(g.strokeWidth); - } - if (!SVGXMLChecker.checkObjectEmpty(rect.stroke_miterlimit)) { - newRect.setStrokeMiterLimit(rect.stroke_miterlimit); - } - if (!SVGXMLChecker.checkObjectEmpty(rect.style)) { - newRect.setStyle(rect.style); - } - if (!SVGXMLChecker.checkObjectEmpty(rect.systemLanguage)) { - newRect.setSystemLanguage(rect.systemLanguage); - } - - return newRect; - } - - private parseAttributesImage(image: any, g: SVG): ImageSvg { - var newImage = new ImageSvg(); - if (SVGXMLChecker.checkObjectEmpty(g)) { - g = new Group(); - } - if (!SVGXMLChecker.checkObjectEmpty(image.id)) { - newImage.setId(image.id); - } - if (!SVGXMLChecker.checkObjectEmpty(image.class)) { - newImage.setClass(image.class); - } - if (!SVGXMLChecker.checkObjectEmpty(image.width)) { - newImage.setWidth(image.width); - } - if (!SVGXMLChecker.checkObjectEmpty(image.height)) { - newImage.setHeight(image.height); - } - if (!SVGXMLChecker.checkObjectEmpty(image.opacity)) { - newImage.setOpacity(Number(image.opacity)); - } - if (!SVGXMLChecker.checkObjectEmpty(image.href)) { - newImage.setHref(image.href); - } - if (!SVGXMLChecker.checkObjectEmpty(image.transform)) { - newImage.copyTransform(g); - newImage.setTransform(image.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, false); - } - if (!SVGXMLChecker.checkObjectEmpty(image.systemLanguage)) { - newImage.setSystemLanguage(image.systemLanguage); - } - - return newImage; - } - - private parseAttributesUse(use: any, g: SVG): Use { - var newUse = new Use(); - if (SVGXMLChecker.checkObjectEmpty(g)) { - g = new Group(); - } - if (!SVGXMLChecker.checkObjectEmpty(use.id)) { - newUse.setId(use.id); - } - if (!SVGXMLChecker.checkObjectEmpty(use.x)) { - newUse.setX(use.x); - } - if (!SVGXMLChecker.checkObjectEmpty(use.y)) { - newUse.setY(use.y); - } - if (!SVGXMLChecker.checkObjectEmpty(use.width)) { - newUse.setWidth(use.width); - } - if (!SVGXMLChecker.checkObjectEmpty(use.height)) { - newUse.setHeight(use.height); - } - if (!SVGXMLChecker.checkObjectEmpty(use.href)) { - newUse.setHref(use.href); - } - if (!SVGXMLChecker.checkObjectEmpty(use.transform)) { - newUse.copyTransform(g); - newUse.setTransform(use.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, false); - } - if (!SVGXMLChecker.checkObjectEmpty(use.systemLanguage)) { - newUse.setSystemLanguage(use.systemLanguage); - } - - return newUse; - } - - private parseAttributesText(text: any, g: SVG, str: string): TextView { - var newText = new TextView(); - if (SVGXMLChecker.checkObjectEmpty(g)) { - g = new Group(); - } - if (!SVGXMLChecker.checkObjectEmpty(text.id)) { - newText.setId(text.id); - } - if (!SVGXMLChecker.checkObjectEmpty(text.x)) { - newText.setX(text.x); - } - if (!SVGXMLChecker.checkObjectEmpty(text.y)) { - newText.setY(text.y); - } - if (!SVGXMLChecker.checkObjectEmpty(text.dx)) { - newText.setDx(text.dx); - } - if (!SVGXMLChecker.checkObjectEmpty(text.dy)) { - newText.setDy(text.dy); - } - if (!SVGXMLChecker.checkObjectEmpty(str)) { - newText.setText(str); - } - if (!SVGXMLChecker.checkObjectEmpty(text.font_size)) { - newText.setFontSize(text.font_size); - } - if (!SVGXMLChecker.checkObjectEmpty(text.transform)) { - newText.copyTransform(g); - newText.setTransform(text.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, false); - } - if (!SVGXMLChecker.checkObjectEmpty(text.fill)) { - newText.setFill(!SVGXMLChecker.checkObjectEmpty(text.fill) ? text.fill : g.fill); - } else { - newText.setFill(g.fill); - } - if (!SVGXMLChecker.checkObjectEmpty(text.fill_opacity)) { - newText.setFillOpacity(text.fill_opacity); - } - if (!SVGXMLChecker.checkObjectEmpty(text.stroke)) { - newText.setStroke(text.stroke); - } else { - newText.setStroke(g.stroke); - } - if (!SVGXMLChecker.checkObjectEmpty(text.stroke_width)) { - newText.setStrokeWidth(text.stroke_width); - } else { - newText.setStrokeWidth(g.strokeWidth); - } - if (!SVGXMLChecker.checkObjectEmpty(text.stroke_miterlimit)) { - newText.setStrokeMiterLimit(text.stroke_miterlimit); - } - if (!SVGXMLChecker.checkObjectEmpty(text.style)) { - newText.setStyle(text.style); - } - if (!SVGXMLChecker.checkObjectEmpty(text.systemLanguage)) { - newText.setSystemLanguage(text.systemLanguage); - } - - return newText; - } - - private parseAttributesSwitch(g: any, elements: any): Switch { - var newSwitch: Switch = new Switch(); - if (g != undefined) { - if (!SVGXMLChecker.checkObjectEmpty(g.id)) { - newSwitch.setId(g.id); - } - if (!SVGXMLChecker.checkObjectEmpty(g.class)) { - newSwitch.setClass(g.class); - } - if (!SVGXMLChecker.checkObjectEmpty(g.fill)) { - newSwitch.setFill(g.fill); - } else { - newSwitch.setFill(newSwitch.fill); - } - if (!SVGXMLChecker.checkObjectEmpty(g.fill_opacity)) { - newSwitch.setFillOpacity(g.fill_opacity); - } - if (!SVGXMLChecker.checkObjectEmpty(g.stroke)) { - newSwitch.setStroke(g.stroke); - } else { - newSwitch.setStroke(newSwitch.stroke); - } - if (!SVGXMLChecker.checkObjectEmpty(g.stroke_width)) { - newSwitch.setStrokeWidth(g.stroke_width); - } else { - newSwitch.setStrokeWidth(newSwitch.strokeWidth); - } - if (!SVGXMLChecker.checkObjectEmpty(g.stroke_miterlimit)) { - newSwitch.setStrokeMiterLimit(g.stroke_miterlimit); - } - if (!SVGXMLChecker.checkObjectEmpty(g.style)) { - newSwitch.setStyle(g.style); - } - if (!SVGXMLChecker.checkObjectEmpty(g.transform)) { - newSwitch.setTransform(g.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, true); - } - if (!SVGXMLChecker.checkObjectEmpty(g.systemLanguage)) { - newSwitch.setSystemLanguage(g.systemLanguage); - } - } - for (let i = 0;i < elements.length; i++) { - this.setSvgArrayChild(elements[i], newSwitch.child, newSwitch); - } - return newSwitch; - } - - private addSvgToArray(svg: SVG) { - this.svgs.push(svg) - } - - public copy(val: SVG): SVG{ - let copySvg = null; - if (val instanceof ImageSvg) { - copySvg = new ImageSvg(); - copySvg.href = val.href; - } else if (val instanceof CircleView) { - copySvg = new CircleView(); - } else if (val instanceof EllipseView) { - copySvg = new EllipseView(); - } else if (val instanceof LineView) { - copySvg = new LineView(); - copySvg.startX = val.startX; - copySvg.startY = val.startY; - copySvg.endX = val.endX; - copySvg.endY = val.endY; - } else if (val instanceof PolyLineView) { - copySvg = new PolyLineView(); - copySvg.pointsResult = val.pointsResult; - } else if (val instanceof PolygonView) { - copySvg = new PolygonView(); - copySvg.pointsResult = val.pointsResult; - } else if (val instanceof RectView) { - copySvg = new RectView(); - copySvg.rx = val.rx; - copySvg.ry = val.ry; - } else if (val instanceof Use) { - copySvg = new Use(); - copySvg.href = val.href; - } - copySvg.id = val.id; - copySvg._class = val._class; - copySvg.x = val.x; - copySvg.y = val.y; - copySvg.width = val.width; - copySvg.height = val.height; - copySvg.fill = val.fill; - copySvg.opacity = val.opacity; - copySvg.fillOpacity = val.fillOpacity; - copySvg.stroke = val.stroke; - copySvg.strokeDashArray = val.strokeDashArray; - copySvg.strokeDashOffset = val.strokeDashOffset; - copySvg.strokeLineCap = val.strokeLineCap; - copySvg.strokeLineJoin = val.strokeLineJoin; - copySvg.strokeMiterLimit = val.strokeMiterLimit; - copySvg.strokeOpacity = val.strokeOpacity; - copySvg.strokeWidth = val.strokeWidth; - copySvg.translateX = val.translateX; - copySvg.translateY = val.translateY; - copySvg.rotateX = val.rotateX; - copySvg.rotateY = val.rotateY; - copySvg.rotateZ = val.rotateZ; - copySvg.rotateAngle = val.rotateAngle; - copySvg.scaleX = val.scaleX; - copySvg.scaleY = val.scaleY; - return copySvg; - } - - private drawSvg(val: any) { - if (val instanceof ImageSvg) { - let img: ImageBitmap = new ImageBitmap("../../../resources/rawfile/" + val.href); - this.context.drawImage(img, px2vp(val.x), px2vp(val.y), px2vp(Number(val.width)), px2vp(Number(val.height))) - } else if (val instanceof CircleView) { - this.context.beginPath() - this.context.ellipse(px2vp(val.x), px2vp(val.y), px2vp(Number(val.width)), px2vp(Number(val.height)), 0, 0, Math.PI * 2) - } else if (val instanceof EllipseView) { - this.context.beginPath() - this.context.ellipse(px2vp(val.x), px2vp(val.y), px2vp(Number(val.width) / 2), px2vp(Number(val.height) / 2), 0, 0, Math.PI * 2) - } else if (val instanceof LineView) { - this.context.beginPath(); - this.context.moveTo(px2vp(Number(val.startX)), px2vp(Number(val.startY))); - this.context.lineTo(px2vp(Number(val.endX)), px2vp(Number(val.endY))) - } else if (val instanceof PolyLineView) { - this.context.beginPath(); - this.context.moveTo(px2vp(val.pointsResult[0][0]), px2vp(val.pointsResult[0][1])) - val.pointsResult.forEach((val, idx) => { - if (idx > 0) { - this.context.lineTo(px2vp(val[0]), px2vp(val[1])) - } - }) - } else if (val instanceof PolygonView) { - this.context.beginPath(); - this.context.moveTo(px2vp(val.pointsResult[0][0]), px2vp(val.pointsResult[0][1])) - val.pointsResult.forEach((val, idx) => { - if (idx > 0) { - this.context.lineTo(px2vp(val[0]), px2vp(val[1])) - } - }) - } else if (val instanceof RectView) { - this.context.beginPath() - this.context.rect(px2vp(val.x), px2vp(val.y), px2vp(Number(val.width)), px2vp(Number(val.height))) - } else if (val instanceof Use) { - for (let i = 0;i < this.svgs.length; i++) { - if (this.svgs[i].id.trim().indexOf(val.href.replace("#", "").trim()) > -1) { - let svg = this.copy(this.svgs[i]) - if (val.x) { - svg.x = Number(this.svgs[i].x) + Number(val.x) - } - if (val.y) { - svg.y = Number(this.svgs[i].y) + Number(val.y) - } - this.drawSvg(svg) - break - } - } - } else if (val instanceof TextView) { - this.context.font = val.fontSize + " sans-serif"; - } else if (val instanceof Switch) { - let language = configuration.getLocale().language; - for (let i = 0;i < val.child.length; i++) { - if (val.child[i].systemLanguage.trim() == language.trim()) { - this.drawSvg(val.child[i]) - break - } - } - } - - this.context.save(); - if (val.strokeMiterLimit != null) { - this.context.miterLimit = val.strokeMiterLimit; - } - if (val.strokeDashOffset != 0) { - this.context.lineDashOffset = Number(val.strokeDashOffset); - } - if (val.translateX != 0 || val.translateY != 0) { - this.context.translate(px2vp(val.translateX), px2vp(val.translateY)) - } - if (val.scaleX != 1 || val.scaleY != 1) { - this.context.scale(val.scaleX, val.scaleY); - } - if (val.rotateAngle != 0) { - this.context.rotate(val.rotateAngle) - } - if (val.strokeWidth != null && Number(val.strokeWidth.toString().replace("px", "")) > 0) { - this.context.strokeStyle = val.stroke; - this.context.lineWidth = Number(val.strokeWidth.toString().replace("px", "")); - if (val instanceof PathView) { - let path2D: Path2D = new Path2D(val.commands); - this.context.stroke(path2D) - } else if (val instanceof TextView) { - this.context.strokeText(val.text, Number(val.x) + Number(val.dx), Number(val.y) + Number(val.dy)) - } else { - this.context.stroke(); - } - } - if (val.fill != null) { - this.context.fillStyle = val.fill; - if (val instanceof PathView) { - let path2D: Path2D = new Path2D(val.commands); - this.context.fill(path2D); - } else if (val instanceof TextView) { - this.context.fillText(val.text, Number(val.x) + Number(val.dx), Number(val.y) + Number(val.dy)) - } else { - this.context.fill(); - } - } - this.context.restore(); - } - - public getSVGPixelMap(size?:{width:number,height:number}): PixelMap{ - - let setttings: RenderingContextSettings = new RenderingContextSettings(true) - let offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(px2vp(this.svg.viewBoxWidth), px2vp(this.svg.viewBoxHeight),setttings) - - image.createImageSource(null) - this.context = offContext - - // 根据目标大小适配 - let targetCompWidth: number; - let targetCompHeight: number; - if(size){ - targetCompWidth = size.width - targetCompHeight = size.height - }else{ - targetCompWidth = this.deviceW*px2vp(1) - targetCompHeight = this.deviceH*px2vp(1) - } - let minScale = 1; - if(this.svg.viewBoxWidth * px2vp(1) > targetCompWidth || this.svg.viewBoxHeight*px2vp(1)> targetCompHeight){ - let scaleW = targetCompWidth / (this.svg.viewBoxWidth * px2vp(1) *1.0) - let scaleH = targetCompHeight / (this.svg.viewBoxHeight * px2vp(1) *1.0) - minScale = scaleW >= scaleH ? scaleH:scaleW; - this.context.setTransform(minScale,0,0,minScale,0,0) - } - // 缩放之后再绘制 - this.svgs.forEach((val, idx, array) => { - this.drawSvg(val) - }) - let minShowWidth = this.svg.viewBoxWidth * px2vp(1) *minScale; - let minShowHeight = this.svg.viewBoxHeight * px2vp(1) *minScale; - console.log('getPixelMap width ='+minShowWidth+'height='+minShowHeight) - let pix = this.context.getPixelMap(0,0,minShowWidth,minShowHeight) - this.context.clearRect(0, 0, this.svg.viewBoxWidth, this.svg.viewBoxHeight) - return pix - } - -// getMinShowWidth(): number{ -// return px2vp(this.svg.viewBoxWidth < globalThis.deviceW ? this.svg.viewBoxWidth : globalThis.deviceW) -// } -// -// getMinShowHeight(): number{ -// return px2vp(this.svg.viewBoxHeight < globalThis.deviceH ? this.svg.viewBoxHeight : globalThis.deviceH) -// } -} \ No newline at end of file From ab8f0111f411de1191392ca0f83ac040595631a6 Mon Sep 17 00:00:00 2001 From: zhoulisheng1 Date: Wed, 7 Dec 2022 01:13:16 -0800 Subject: [PATCH 09/15] =?UTF-8?q?1.=E5=B0=86console.log=E5=B0=81=E8=A3=85?= =?UTF-8?q?=E5=88=B0LogUtil=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zhoulisheng1 --- imageknife/index.ets | 5 +- .../ets/components/imageknife/ImageKnife.ets | 21 ++----- .../imageknife/ImageKnifeComponent.ets | 63 ++++++++++--------- .../components/imageknife/RequestOption.ets | 19 +++--- .../imageknife/holder/ErrorHolderManager.ets | 3 +- .../imageknife/holder/PlaceHolderManager.ets | 3 +- .../imageknife/holder/RetryHolderManager.ets | 3 +- .../requestmanage/RequestManager.ets | 41 ++++++------ .../transform/BlurTransformation.ets | 5 +- .../BrightnessFilterTransformation.ets | 3 +- .../ContrastFilterTransformation.ets | 3 +- .../transform/CropCircleTransformation.ets | 5 +- .../CropCircleWithBorderTransformation.ets | 5 +- .../transform/CropSquareTransformation.ets | 3 +- .../transform/CropTransformation.ets | 5 +- .../transform/GrayscaleTransformation.ets | 3 +- .../transform/InvertFilterTransformation.ets | 3 +- .../transform/MaskTransformation.ets | 3 +- .../PixelationFilterTransformation.ets | 5 +- .../transform/RotateImageTransformation.ets | 5 +- .../RoundedCornersTransformation.ets | 9 +-- .../transform/SepiaFilterTransformation.ets | 3 +- .../imageknife/utils/FileTypeUtil.ets | 10 +-- .../components/imageknife/utils/LogUtil.ets | 32 ++++++++++ .../imageknife/utils/gif/GIFParseImpl.ets | 17 ++--- package.json | 7 +-- 26 files changed, 162 insertions(+), 122 deletions(-) create mode 100644 imageknife/src/main/ets/components/imageknife/utils/LogUtil.ets diff --git a/imageknife/index.ets b/imageknife/index.ets index 582233d..d4ee93c 100644 --- a/imageknife/index.ets +++ b/imageknife/index.ets @@ -116,4 +116,7 @@ export {gifHandler} from './GifWorker' // 自定义组件新增 // 自定义组件绘制生命周期 -export * from './src/main/ets/components/imageknife/interface/IDrawLifeCycle' \ No newline at end of file +export * from './src/main/ets/components/imageknife/interface/IDrawLifeCycle' + +// 日志管理 +export * from './src/main/ets/components/imageknife/utils/LogUtil' \ No newline at end of file diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnife.ets b/imageknife/src/main/ets/components/imageknife/ImageKnife.ets index a725a71..28de40a 100644 --- a/imageknife/src/main/ets/components/imageknife/ImageKnife.ets +++ b/imageknife/src/main/ets/components/imageknife/ImageKnife.ets @@ -34,6 +34,7 @@ import {FileReader} from '../cache/FileReader' import image from "@ohos.multimedia.image" import {CompressBuilder} from "../imageknife/compress/CompressBuilder" import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle' +import {LogUtil} from '../imageknife/utils/LogUtil' export class ImageKnife { static readonly SEPARATOR: string = '/' @@ -59,7 +60,7 @@ export class ImageKnife { private defaultLifeCycle: IDrawLifeCycle; - private debugLog: boolean = false; + private constructor(imgCtx) { this.imageKnifeContext = imgCtx; @@ -177,20 +178,6 @@ export class ImageKnife { } } - /** - * 是否开启日志打印 true开启 false关闭 默认不开启 - * @param openLog - */ - public setDebugLog(openLog:boolean){ - this.debugLog = openLog - } - - public log(info:string){ - if(this.debugLog){ - globalThis.ImageKnife.log(info) - } - } - // 预加载 resource资源一级缓存，string资源实现二级缓存 preload(request: RequestOption) { // 每个request 公共信息补充 @@ -342,7 +329,7 @@ export class ImageKnife { } } else { - globalThis.ImageKnife.log("key没有生成无法进入存取！") + LogUtil.log("key没有生成无法进入存取！") } @@ -386,7 +373,7 @@ export class ImageKnife { request.diskCacheStrategy(none); this.loadResources(request); } else { - globalThis.ImageKnife.error("输入参数有问题！") + LogUtil.error("输入参数有问题！") } } } diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets b/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets index 4a14977..e8543d5 100644 --- a/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets +++ b/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets @@ -19,6 +19,7 @@ import { RequestOption } from '../imageknife/RequestOption' import { ImageKnifeData } from '../imageknife/ImageKnifeData' import { GIFFrame } from '../imageknife/utils/gif/GIFFrame' import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle' +import {LogUtil} from '../imageknife/utils/LogUtil' @Component @@ -97,7 +98,7 @@ export struct ImageKnifeComponent { // 前提：宽高值均有效,值>0. 条件1：当前宽高与上一次宽高不同 条件2:当前是第一次绘制 if( (this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth) || this.firstDrawFlag){ this.firstDrawFlag = false; - globalThis.ImageKnife.log('ImageKnifeComponent onAreaChange isValid Canvas currentWidth =' + this.currentWidth + ' currentHeight=' + this.currentHeight) + LogUtil.log('ImageKnifeComponent onAreaChange isValid Canvas currentWidth =' + this.currentWidth + ' currentHeight=' + this.currentHeight) this.lastWidth = this.currentWidth this.lastHeight = this.currentHeight this.imageKnifeExecute() @@ -107,7 +108,7 @@ export struct ImageKnifeComponent { .onReady(() => { this.canvasHasReady = true; if(this.onReadyNext){ - globalThis.ImageKnife.log('ImageKnifeComponent onReadyNext is running!') + LogUtil.log('ImageKnifeComponent onReadyNext is running!') this.onReadyNext() this.onReadyNext = undefined; } @@ -124,7 +125,7 @@ export struct ImageKnifeComponent { } watchImageKnifeOption() { - globalThis.ImageKnife.log('ImageKnifeComponent watchImageKnifeOption is happened!') + LogUtil.log('ImageKnifeComponent watchImageKnifeOption is happened!') this.whetherWaitSize(); } @@ -140,7 +141,7 @@ export struct ImageKnifeComponent { this.firstDrawFlag = true; } }else{ - globalThis.ImageKnife.log('ImageKnifeComponent whetherWaitSize 宽高有效 直接发送请求') + LogUtil.log('ImageKnifeComponent whetherWaitSize 宽高有效 直接发送请求') this.imageKnifeExecute() } } @@ -168,7 +169,7 @@ export struct ImageKnifeComponent { configNecessary(request: RequestOption) { request.load(this.imageKnifeOption.loadSrc) .addListener((err, data) => { - globalThis.ImageKnife.log('ImageKnifeComponent request.load callback') + LogUtil.log('ImageKnifeComponent request.load callback') this.runNextFunction(this.displayMainSource.bind(this,data)); return false; }) @@ -200,20 +201,20 @@ export struct ImageKnifeComponent { configDisplay(request: RequestOption) { if (this.imageKnifeOption.placeholderSrc) { request.placeholder(this.imageKnifeOption.placeholderSrc, (data) => { - globalThis.ImageKnife.log('ImageKnifeComponent request.placeholder callback') + LogUtil.log('ImageKnifeComponent request.placeholder callback') this.runNextFunction(this.displayPlaceholder.bind(this,data)) }) } if (this.imageKnifeOption.thumbSizeMultiplier) { request.thumbnail(this.imageKnifeOption.thumbSizeMultiplier, (data) => { - globalThis.ImageKnife.log('ImageKnifeComponent request.thumbnail callback') + LogUtil.log('ImageKnifeComponent request.thumbnail callback') this.runNextFunction(this.displayThumbSizeMultiplier.bind(this,data)) }, this.imageKnifeOption.thumbSizeDelay) } if (this.imageKnifeOption.errorholderSrc) { request.errorholder(this.imageKnifeOption.errorholderSrc, (data) => { - globalThis.ImageKnife.log('ImageKnifeComponent request.errorholder callback') + LogUtil.log('ImageKnifeComponent request.errorholder callback') this.runNextFunction(this.displayErrorholder.bind(this, data)) }) } @@ -235,14 +236,14 @@ export struct ImageKnifeComponent { if (this.imageKnifeOption.displayProgress) { request.addProgressListener((percentValue: number) => { // 如果进度条百分比 未展示大小,展示其动画 - globalThis.ImageKnife.log('ImageKnifeComponent request.addProgressListener callback') + LogUtil.log('ImageKnifeComponent request.addProgressListener callback') this.runNextFunction(this.displayProgress.bind(this,percentValue)) }) } if (this.imageKnifeOption.retryholderSrc) { request.retryholder(this.imageKnifeOption.retryholderSrc, (data) => { - globalThis.ImageKnife.log('ImageKnifeComponent request.retryholder callback') + LogUtil.log('ImageKnifeComponent request.retryholder callback') this.hasDisplayRetryholder = true this.runNextFunction(this.displayRetryholder.bind(this,data)) }) @@ -366,16 +367,16 @@ export struct ImageKnifeComponent { } drawPlaceholder(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { - globalThis.ImageKnife.log('ImageKnifeComponent default drawPlaceholder start!') + LogUtil.log('ImageKnifeComponent default drawPlaceholder start!') // @ts-ignore data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { - globalThis.ImageKnife.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height) + LogUtil.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height) let scaleType = (typeof imageKnifeOption.placeholderScaleType == 'number') ? imageKnifeOption.placeholderScaleType : ScaleType.FIT_CENTER context.save(); context.clearRect(0, 0, compWidth, compHeight) ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); - globalThis.ImageKnife.log('ImageKnifeComponent default drawPlaceholder end!') + LogUtil.log('ImageKnifeComponent default drawPlaceholder end!') }) } @@ -421,31 +422,31 @@ export struct ImageKnifeComponent { } drawThumbSizeMultiplier(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { - globalThis.ImageKnife.log('ImageKnifeComponent default drawThumbSizeMultiplier start!') + LogUtil.log('ImageKnifeComponent default drawThumbSizeMultiplier start!') // @ts-ignore data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { - globalThis.ImageKnife.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height) + LogUtil.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height) let scaleType = (typeof imageKnifeOption.thumbSizeMultiplierScaleType == 'number') ? imageKnifeOption.thumbSizeMultiplierScaleType : ScaleType.FIT_CENTER context.save(); context.clearRect(0, 0, compWidth, compHeight) ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); - globalThis.ImageKnife.log('ImageKnifeComponent default drawThumbSizeMultiplier end!') + LogUtil.log('ImageKnifeComponent default drawThumbSizeMultiplier end!') }) } drawMainSource(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { - globalThis.ImageKnife.log('ImageKnifeComponent default drawMainSource start!') + LogUtil.log('ImageKnifeComponent default drawMainSource start!') if (data.isPixelMap()) { // @ts-ignore data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { let scaleType = (typeof imageKnifeOption.mainScaleType == 'number') ? imageKnifeOption.mainScaleType : ScaleType.FIT_CENTER - globalThis.ImageKnife.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height + 'scaleType=' + scaleType) + LogUtil.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height + 'scaleType=' + scaleType) context.save(); context.clearRect(0, 0, compWidth, compHeight) ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); - globalThis.ImageKnife.log('ImageKnifeComponent default drawMainSource end!') + LogUtil.log('ImageKnifeComponent default drawMainSource end!') }) } else if (data.isGIFFrame()) { this.drawGIFFrame(context, data, imageKnifeOption, compWidth, compHeight, setGifTimeId) @@ -453,30 +454,30 @@ export struct ImageKnifeComponent { } drawRetryholder(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { - globalThis.ImageKnife.log('ImageKnifeComponent default drawRetryholder start!') + LogUtil.log('ImageKnifeComponent default drawRetryholder start!') // @ts-ignore data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { - globalThis.ImageKnife.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height) + LogUtil.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height) let scaleType = (typeof imageKnifeOption.retryholderScaleType == 'number') ? imageKnifeOption.retryholderScaleType : ScaleType.FIT_CENTER context.save(); context.clearRect(0, 0, compWidth, compHeight) ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); - globalThis.ImageKnife.log('ImageKnifeComponent default drawRetryholder end!') + LogUtil.log('ImageKnifeComponent default drawRetryholder end!') }) } drawErrorholder(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { - globalThis.ImageKnife.log('ImageKnifeComponent default drawErrorholder start!') + LogUtil.log('ImageKnifeComponent default drawErrorholder start!') // @ts-ignore data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { - globalThis.ImageKnife.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height) + LogUtil.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height) let scaleType = (typeof imageKnifeOption.errorholderSrcScaleType == 'number') ? imageKnifeOption.errorholderSrcScaleType : ScaleType.FIT_CENTER context.save(); context.clearRect(0, 0, compWidth, compHeight) ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); - globalThis.ImageKnife.log('ImageKnifeComponent default drawErrorholder end!') + LogUtil.log('ImageKnifeComponent default drawErrorholder end!') }) } @@ -523,13 +524,13 @@ export struct ImageKnifeComponent { } aboutToAppear() { - globalThis.ImageKnife.log('ImageKnifeComponent aboutToAppear happened!') + LogUtil.log('ImageKnifeComponent aboutToAppear happened!') this.canvasHasReady = false; this.whetherWaitSize(true); } aboutToDisappear() { - globalThis.ImageKnife.log('ImageKnifeComponent aboutToDisappear happened!') + LogUtil.log('ImageKnifeComponent aboutToDisappear happened!') this.resetGifData(); } @@ -557,7 +558,7 @@ export struct ImageKnifeComponent { private drawGIFFrame(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { let frames = data.drawGIFFrame.imageGIFFrames as GIFFrame[] - globalThis.ImageKnife.log('ImageKnifeComponent gifFrameLength =' + frames.length); + 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) @@ -586,7 +587,7 @@ export struct ImageKnifeComponent { } private renderFrames(frames: GIFFrame[], index: number, context: CanvasRenderingContext2D, compWidth: number, compHeight: number) { - globalThis.ImageKnife.log('ImageKnifeComponent renderFrames frames length =' + frames.length) + LogUtil.log('ImageKnifeComponent renderFrames frames length =' + frames.length) let start = new Date().getTime(); if (index === 0) { // 如果是第一帧，我们只从开始渲染前记录时间 @@ -647,7 +648,7 @@ export struct ImageKnifeComponent { // 具体绘制过程 private canvasDrawPixelMap(frames: GIFFrame[], index: number, context: CanvasRenderingContext2D, compWidth: number, compHeight: number) { - globalThis.ImageKnife.log('ImageKnifeComponent canvasDrawPixelMap index=' + index) + LogUtil.log('ImageKnifeComponent canvasDrawPixelMap index=' + index) let frame = frames[index]; let pixelmap = frame['drawPixelMap'] let disposal = 0 @@ -666,7 +667,7 @@ 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(); - globalThis.ImageKnife.log('ImageKnifeComponent default drawMainSource end!') + LogUtil.log('ImageKnifeComponent default drawMainSource end!') } } diff --git a/imageknife/src/main/ets/components/imageknife/RequestOption.ets b/imageknife/src/main/ets/components/imageknife/RequestOption.ets index b16d173..066dd27 100644 --- a/imageknife/src/main/ets/components/imageknife/RequestOption.ets +++ b/imageknife/src/main/ets/components/imageknife/RequestOption.ets @@ -42,7 +42,7 @@ import {BlurTransformation} from '../imageknife/transform/BlurTransformation' import {PixelationFilterTransformation} from '../imageknife/transform/PixelationFilterTransformation' import {MaskTransformation} from '../imageknife/transform/MaskTransformation' import {SwirlFilterTransformation} from '../imageknife/transform/SwirlFilterTransformation' - +import {LogUtil} from '../imageknife/utils/LogUtil' export class RequestOption { loadSrc: string | PixelMap | Resource; @@ -324,11 +324,10 @@ export class RequestOption { return this; } - // 占位图解析成功 placeholderOnComplete(imageKnifeData: ImageKnifeData) { - globalThis.ImageKnife.log("placeholderOnComplete has called!"); - globalThis.ImageKnife.log("Main Image is Ready:" + this.loadMainReady); + LogUtil.log("placeholderOnComplete has called!"); + LogUtil.log("Main Image is Ready:" + this.loadMainReady); if (!this.loadMainReady && !(this.loadErrorReady || this.loadRetryReady) && !this.loadThumbnailReady) { // 主图未加载成功,并且未加载失败 显示占位图 主图加载成功或者加载失败后=>不展示占位图 this.placeholderFunc(imageKnifeData) @@ -337,7 +336,7 @@ export class RequestOption { // 占位图解析失败 placeholderOnError(error) { - globalThis.ImageKnife.log("占位图解析失败 error =" + error) + LogUtil.log("占位图解析失败 error =" + error) } @@ -353,7 +352,7 @@ export class RequestOption { // 缩略图解析失败 thumbholderOnError(error) { - globalThis.ImageKnife.log("缩略图解析失败 error =" + error) + LogUtil.log("缩略图解析失败 error =" + error) } // 加载失败 占位图解析成功 @@ -367,7 +366,7 @@ export class RequestOption { //加载失败 占位图解析失败 errorholderOnError(error) { - globalThis.ImageKnife.log("失败占位图解析失败 error =" + error) + LogUtil.log("失败占位图解析失败 error =" + error) } retryholderOnComplete(imageKnifeData: ImageKnifeData){ @@ -378,7 +377,7 @@ export class RequestOption { } retryholderOnError(error){ - globalThis.ImageKnife.log("重试占位图解析失败 error ="+ error) + LogUtil.log("重试占位图解析失败 error ="+ error) } loadComplete(imageKnifeData: ImageKnifeData) { @@ -395,8 +394,8 @@ export class RequestOption { } loadError(err) { - globalThis.ImageKnife.log("loadError:"+err); - globalThis.ImageKnife.log("loadError stack=:"+JSON.stringify(err.stack)); + LogUtil.log("loadError:"+err); + LogUtil.log("loadError stack=:"+JSON.stringify(err.stack)); //失败占位图展示规则 if (this.retryholderFunc) { // 重试图层优先于加载失败展示 diff --git a/imageknife/src/main/ets/components/imageknife/holder/ErrorHolderManager.ets b/imageknife/src/main/ets/components/imageknife/holder/ErrorHolderManager.ets index 139f18d..a195e7a 100644 --- a/imageknife/src/main/ets/components/imageknife/holder/ErrorHolderManager.ets +++ b/imageknife/src/main/ets/components/imageknife/holder/ErrorHolderManager.ets @@ -20,6 +20,7 @@ import { ParseImageUtil } from '../utils/ParseImageUtil' import { SupportFormat } from '../utils/FileTypeUtil' import { SVGParseImpl } from '../utils/svg/SVGParseImpl' import { ParseResClient } from '../resourcemanage/ParseResClient' +import {LogUtil} from '../../imageknife/utils/LogUtil' import image from '@ohos.multimedia.image' export class ErrorHolderManager { @@ -40,7 +41,7 @@ export class ErrorHolderManager { } private displayErrorholder(onComplete, onError) { - globalThis.ImageKnife.log("displayErrorholder") + LogUtil.log("displayErrorholder") if ((typeof (this.options.errorholderSrc as image.PixelMap).isEditable) == 'boolean') { let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, this.options.errorholderSrc as PixelMap) onComplete(imageKnifeData); diff --git a/imageknife/src/main/ets/components/imageknife/holder/PlaceHolderManager.ets b/imageknife/src/main/ets/components/imageknife/holder/PlaceHolderManager.ets index d5636dc..434520c 100644 --- a/imageknife/src/main/ets/components/imageknife/holder/PlaceHolderManager.ets +++ b/imageknife/src/main/ets/components/imageknife/holder/PlaceHolderManager.ets @@ -21,6 +21,7 @@ import {ParseImageUtil} from '../utils/ParseImageUtil' import {ParseResClient} from '../resourcemanage/ParseResClient' import { SupportFormat } from '../utils/FileTypeUtil' import { SVGParseImpl } from '../utils/svg/SVGParseImpl' +import {LogUtil} from '../../imageknife/utils/LogUtil' import resourceManager from '@ohos.resourceManager'; import image from "@ohos.multimedia.image" @@ -42,7 +43,7 @@ export class PlaceHolderManager { } private displayPlaceholder(onComplete, onError) { - globalThis.ImageKnife.log("displayPlaceholder") + LogUtil.log("displayPlaceholder") if ((typeof (this.options.placeholderSrc as image.PixelMap).isEditable) == 'boolean') { let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, this.options.placeholderSrc as PixelMap) onComplete(imageKnifeData); diff --git a/imageknife/src/main/ets/components/imageknife/holder/RetryHolderManager.ets b/imageknife/src/main/ets/components/imageknife/holder/RetryHolderManager.ets index 9271f75..93ee6ea 100644 --- a/imageknife/src/main/ets/components/imageknife/holder/RetryHolderManager.ets +++ b/imageknife/src/main/ets/components/imageknife/holder/RetryHolderManager.ets @@ -21,6 +21,7 @@ import {ParseImageUtil} from '../utils/ParseImageUtil' import {ParseResClient} from '../resourcemanage/ParseResClient' import { SupportFormat } from '../utils/FileTypeUtil' import { SVGParseImpl } from '../utils/svg/SVGParseImpl' +import {LogUtil} from '../../imageknife/utils/LogUtil' import resourceManager from '@ohos.resourceManager'; import image from "@ohos.multimedia.image" @@ -42,7 +43,7 @@ export class RetryHolderManager { } private displayRetryholder(onComplete, onError) { - globalThis.ImageKnife.log("displayRetryholder") + LogUtil.log("displayRetryholder") if ((typeof (this.options.retryholderSrc as image.PixelMap).isEditable) == 'boolean') { let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, this.options.placeholderSrc as PixelMap) onComplete(imageKnifeData); diff --git a/imageknife/src/main/ets/components/imageknife/requestmanage/RequestManager.ets b/imageknife/src/main/ets/components/imageknife/requestmanage/RequestManager.ets index 627b3ad..0a9a3a8 100644 --- a/imageknife/src/main/ets/components/imageknife/requestmanage/RequestManager.ets +++ b/imageknife/src/main/ets/components/imageknife/requestmanage/RequestManager.ets @@ -31,6 +31,7 @@ import image from "@ohos.multimedia.image" import { SVGParseImpl } from '../utils/svg/SVGParseImpl' import { GIFParseImpl } from '../utils/gif/GIFParseImpl' import { GIFFrame } from '../utils/gif/GIFFrame' +import {LogUtil} from '../../imageknife/utils/LogUtil' export interface AsyncString { (data: string): void; @@ -88,7 +89,7 @@ export class RequestManager { } static execute(option: RequestOption, memoryCache1: LruCache, diskMemoryCache1: DiskLruCache, dataFetch: IDataFetch, resourceFetch: IResourceFetch) { - globalThis.ImageKnife.log("RequestManager execute") + LogUtil.log("RequestManager execute") let manager = new RequestManager(option, memoryCache1, diskMemoryCache1, dataFetch, resourceFetch); return new Promise(manager.process.bind(manager)) .then(option.loadComplete.bind(option)) @@ -98,9 +99,9 @@ export class RequestManager { loadCompleteAfter() { try { // 内部消化问题 - globalThis.ImageKnife.log("loadCompleteAfter!") + LogUtil.log("loadCompleteAfter!") if (this.options.allCacheInfoCallback) { - globalThis.ImageKnife.log("RequestOption =" + JSON.stringify(this.options)); + LogUtil.log("RequestOption =" + JSON.stringify(this.options)); // 内存缓存 let allCacheInfo = new AllCacheInfo(); @@ -124,7 +125,7 @@ export class RequestManager { this.options.allCacheInfoCallback(allCacheInfo) } } catch (err) { - globalThis.ImageKnife.log("after err =" + err) + LogUtil.log("after err =" + err) } } @@ -134,12 +135,12 @@ export class RequestManager { private mRunReason: RunReason = RunReason.INITIALIZE; process(onComplete, onError) { - globalThis.ImageKnife.log("RequestManager process !"); + LogUtil.log("RequestManager process !"); this.loadLeve1MemoryCache(onComplete, onError) } private runWrapped(request: RequestOption, runReason: RunReason, onComplete, onError) { - globalThis.ImageKnife.log("RequestManager runWrapped") + LogUtil.log("RequestManager runWrapped") if (runReason == RunReason.INITIALIZE) { this.mStage = this.getNextStage(request, this.mStage); this.searchLoadFrom(this.options, this.mStage, onComplete, onError); @@ -170,7 +171,7 @@ export class RequestManager { //究竟从哪里加载数据 private searchLoadFrom(request: RequestOption, current: Stage, onComplete, onError) { - globalThis.ImageKnife.log("RequestManager searchLoadFrom") + LogUtil.log("RequestManager searchLoadFrom") if (current == Stage.RESOURCE_CACHE) { this.loadDiskFromTransform(request, onComplete, onError); } else if (current == Stage.DATA_CACHE) { @@ -194,13 +195,13 @@ export class RequestManager { // 加载本地资源 private loadSourceFormNative(request: RequestOption, onComplete, onError) { - globalThis.ImageKnife.log("RequestManager loadSourceFormNative") + LogUtil.log("RequestManager loadSourceFormNative") // 本地解析后进行一级缓存 let success = (arrayBuffer) => { // 使用媒体子系统 ImageSource解析文件 获取PixelMap let fileTypeUtil = new FileTypeUtil(); let typeValue = fileTypeUtil.getFileType(arrayBuffer) - globalThis.ImageKnife.log("RequestManager - 文件类型为= " + typeValue) + LogUtil.log("RequestManager - 文件类型为= " + typeValue) // gif处理 if(ImageKnifeData.GIF == typeValue && !request.dontAnimateFlag){ // 处理gif @@ -240,7 +241,7 @@ export class RequestManager { } // 加载磁盘缓存 原图 private loadDiskFromSource(request: RequestOption, onComplete, onError) { - globalThis.ImageKnife.log("RequestManager loadDiskFromSource") + LogUtil.log("RequestManager loadDiskFromSource") let cached = this.mDiskCacheProxy.getValue(request.generateDataKey) if (cached != null) { this.parseDiskFile2PixelMap(request, cached, onComplete, onError) @@ -252,7 +253,7 @@ export class RequestManager { // 加载磁盘缓存 变换后图片 private loadDiskFromTransform(request: RequestOption, onComplete, onError) { - globalThis.ImageKnife.log("RequestManager loadDiskFromTransform") + LogUtil.log("RequestManager loadDiskFromTransform") let cached = this.mDiskCacheProxy.getValue(request.generateResourceKey) if (cached != null) { this.parseDiskTransformFile2PixelMap(request, cached, onComplete, onError) @@ -263,7 +264,7 @@ export class RequestManager { } parseSource(request: RequestOption, onComplete, onError) { - globalThis.ImageKnife.log("RequestManager parseSource") + LogUtil.log("RequestManager parseSource") if ((typeof (request.loadSrc as image.PixelMap).isEditable) == 'boolean') { // PixelMap 外层捕获效率更高，不会进入这里 } else if (typeof request.loadSrc == 'string') { @@ -273,14 +274,14 @@ export class RequestManager { if (typeof res.id != 'undefined' && typeof res.id != 'undefined') { this.loadSourceFormNative(request, onComplete, onError) } else { - globalThis.ImageKnife.log("输入参数有问题！") + LogUtil.log("输入参数有问题！") } } } private loadLeve1MemoryCache(onComplete, onError) { - globalThis.ImageKnife.log("RequestManager loadLeve1MemoryCache") + LogUtil.log("RequestManager loadLeve1MemoryCache") // 一级缓存 内存获取 let cache = this.mMemoryCacheProxy.loadMemoryCache(this.options.generateCacheKey, this.options.isCacheable); if (cache == null || typeof cache == 'undefined') { @@ -414,7 +415,7 @@ export class RequestManager { } private downloadSuccess(source: ArrayBuffer, onComplete, onError) { - globalThis.ImageKnife.info('Download task completed.'); + LogUtil.log('Download task completed.'); if(source == null || source == undefined || source.byteLength <= 0){ onError('Download task completed. but download file is empty!') @@ -445,7 +446,7 @@ export class RequestManager { await this.mDiskCacheProxy.putValue(this.options.generateDataKey, arraybuffer) }) .catch(err=>{ - globalThis.ImageKnife.log('download file is ='+ImageKnifeData.GIF+'and save diskLruCache error ='+ err) + LogUtil.log('download file is ='+ImageKnifeData.GIF+'and save diskLruCache error ='+ err) }) }else if(ImageKnifeData.SVG == filetype){ // 处理svg @@ -459,7 +460,7 @@ export class RequestManager { await this.mDiskCacheProxy.putValue(this.options.generateDataKey, arraybuffer) }) .catch(err=>{ - globalThis.ImageKnife.log('download file is ='+ImageKnifeData.SVG+'and save diskLruCache error ='+ err) + LogUtil.log('download file is ='+ImageKnifeData.SVG+'and save diskLruCache error ='+ err) }) } else { // 进行变换 @@ -572,12 +573,12 @@ export class RequestManager { if(err){ onError(err) } - globalThis.ImageKnife.log("gifProcess data is null:"+(data == null)); + LogUtil.log("gifProcess data is null:"+(data == null)); if(!!data){ let imageKnifeData = this.createImageGIFFrame(ImageKnifeType.GIFFRAME,data) - globalThis.ImageKnife.log('gifProcess 生成gif 返回数据类型') + LogUtil.log('gifProcess 生成gif 返回数据类型') if(cacheStrategy){ - globalThis.ImageKnife.log('gifProcess 生成gif并且存入了缓存策略') + LogUtil.log('gifProcess 生成gif并且存入了缓存策略') cacheStrategy(imageKnifeData) } onComplete(imageKnifeData) diff --git a/imageknife/src/main/ets/components/imageknife/transform/BlurTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/BlurTransformation.ets index b445208..bd37413 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/BlurTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/BlurTransformation.ets @@ -20,6 +20,7 @@ import { RequestOption } from "../../imageknife/RequestOption" import { TransformUtils } from "../transform/TransformUtils" import image from "@ohos.multimedia.image" import { fastBlur } from "../utils/FastBlur" +import {LogUtil} from '../../imageknife/utils/LogUtil' export class BlurTransformation implements BaseTransform { @@ -35,7 +36,7 @@ export class BlurTransformation implements BaseTransform { transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";BlurTransformation buf is empty"); + LogUtil.log(Constants.PROJECT_TAG + ";BlurTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";BlurTransformation buf is empty", null); } @@ -73,7 +74,7 @@ export class BlurTransformation implements BaseTransform { fastBlur.blur(data, this._mRadius, true, func); }) .catch((e) => { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";error:" + e); + LogUtil.log(Constants.PROJECT_TAG + ";error:" + e); func(e, null); }) }) diff --git a/imageknife/src/main/ets/components/imageknife/transform/BrightnessFilterTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/BrightnessFilterTransformation.ets index fe245c8..aa05957 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/BrightnessFilterTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/BrightnessFilterTransformation.ets @@ -17,6 +17,7 @@ import { BaseTransform } from "../transform/BaseTransform" import { AsyncTransform } from "../transform/AsyncTransform" import { Constants } from "../constants/Constants" import { RequestOption } from "../../imageknife/RequestOption" +import {LogUtil} from '../../imageknife/utils/LogUtil' import image from "@ohos.multimedia.image" @@ -36,7 +37,7 @@ export class BrightnessFilterTransformation implements BaseTransform { async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty"); + LogUtil.log(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty", null); } diff --git a/imageknife/src/main/ets/components/imageknife/transform/ContrastFilterTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/ContrastFilterTransformation.ets index 9ecbf2d..b152aac 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/ContrastFilterTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/ContrastFilterTransformation.ets @@ -17,6 +17,7 @@ import { BaseTransform } from "../transform/BaseTransform" import { AsyncTransform } from "../transform/AsyncTransform" import { Constants } from "../constants/Constants" import { RequestOption } from "../../imageknife/RequestOption" +import {LogUtil} from '../../imageknife/utils/LogUtil' import image from "@ohos.multimedia.image" @@ -48,7 +49,7 @@ export class ContrastFilterTransformation implements BaseTransform { async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";ContrastFilterTransformation buf is empty"); + LogUtil.log(Constants.PROJECT_TAG + ";ContrastFilterTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";ContrastFilterTransformation buf is empty", null); } diff --git a/imageknife/src/main/ets/components/imageknife/transform/CropCircleTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/CropCircleTransformation.ets index c883282..d526c40 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/CropCircleTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/CropCircleTransformation.ets @@ -18,6 +18,7 @@ import { AsyncTransform } from "../transform/AsyncTransform" import { Constants } from "../constants/Constants" import { RequestOption } from "../../imageknife/RequestOption" import { TransformUtils } from "../transform/TransformUtils" +import {LogUtil} from '../../imageknife/utils/LogUtil' import image from "@ohos.multimedia.image" export class CropCircleTransformation implements BaseTransform { @@ -34,7 +35,7 @@ export class CropCircleTransformation implements BaseTransform { transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + CropCircleTransformation.TAG + " buf is empty"); + LogUtil.log(Constants.PROJECT_TAG + CropCircleTransformation.TAG + " buf is empty"); if (func) { func(Constants.PROJECT_TAG + CropCircleTransformation.TAG + " buf is empty", null); } @@ -77,7 +78,7 @@ export class CropCircleTransformation implements BaseTransform { this.transformCircle(p, func); }) .catch(e => { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + CropCircleTransformation.TAG + " transform e:" + e); + LogUtil.log(Constants.PROJECT_TAG + CropCircleTransformation.TAG + " transform e:" + e); if (func) { func(Constants.PROJECT_TAG + CropCircleTransformation.TAG + "e" + e, null); } diff --git a/imageknife/src/main/ets/components/imageknife/transform/CropCircleWithBorderTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/CropCircleWithBorderTransformation.ets index 5ae07ae..3cd5843 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/CropCircleWithBorderTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/CropCircleWithBorderTransformation.ets @@ -18,6 +18,7 @@ import { AsyncTransform } from "../transform/AsyncTransform" import { Constants } from "../constants/Constants" import { RequestOption } from "../../imageknife/RequestOption" import { TransformUtils } from "../transform/TransformUtils" +import {LogUtil} from '../../imageknife/utils/LogUtil' import image from "@ohos.multimedia.image" export class CropCircleWithBorderTransformation implements BaseTransform { @@ -53,7 +54,7 @@ export class CropCircleWithBorderTransformation implements BaseTransform) { if (!buf || buf.byteLength <= 0) { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation buf is empty"); + LogUtil.log(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation buf is empty", null); } @@ -96,7 +97,7 @@ export class CropCircleWithBorderTransformation implements BaseTransform { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation e:" + e); + LogUtil.log(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation e:" + e); if (func) { func(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation e:" + e, null); } diff --git a/imageknife/src/main/ets/components/imageknife/transform/CropSquareTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/CropSquareTransformation.ets index 428fad4..92d0256 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/CropSquareTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/CropSquareTransformation.ets @@ -17,6 +17,7 @@ import { BaseTransform } from "../transform/BaseTransform" import { AsyncTransform } from "../transform/AsyncTransform" import { Constants } from "../constants/Constants" import { RequestOption } from "../../imageknife/RequestOption" +import {LogUtil} from '../../imageknife/utils/LogUtil' import image from "@ohos.multimedia.image" @@ -29,7 +30,7 @@ export class CropSquareTransformation implements BaseTransform { transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";CropSquareTransformation buf is empty"); + LogUtil.log(Constants.PROJECT_TAG + ";CropSquareTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";CropSquareTransformation buf is empty", null); } diff --git a/imageknife/src/main/ets/components/imageknife/transform/CropTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/CropTransformation.ets index a088c98..c8af2ce 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/CropTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/CropTransformation.ets @@ -18,6 +18,7 @@ import { AsyncTransform } from "../transform/AsyncTransform" import { Constants } from "../constants/Constants" import { RequestOption } from "../../imageknife/RequestOption" import { TransformUtils } from "../transform/TransformUtils" +import {LogUtil} from '../../imageknife/utils/LogUtil' import image from "@ohos.multimedia.image" export class CropTransformation implements BaseTransform { @@ -40,7 +41,7 @@ export class CropTransformation implements BaseTransform { transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";CropTransformation buf is empty"); + LogUtil.log(Constants.PROJECT_TAG + ";CropTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";CropTransformation buf is empty", null); } @@ -85,7 +86,7 @@ export class CropTransformation implements BaseTransform { func("", data); }) .catch((e) => { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";error:" + e); + LogUtil.log(Constants.PROJECT_TAG + ";error:" + e); func(e, null); }) }) diff --git a/imageknife/src/main/ets/components/imageknife/transform/GrayscaleTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/GrayscaleTransformation.ets index 5c52270..2333d47 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/GrayscaleTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/GrayscaleTransformation.ets @@ -18,6 +18,7 @@ import { AsyncTransform } from "../transform/AsyncTransform" import { Constants } from "../constants/Constants" import { RequestOption } from "../../imageknife/RequestOption" import { TransformUtils } from "../transform/TransformUtils" +import {LogUtil} from '../../imageknife/utils/LogUtil' import image from "@ohos.multimedia.image" export class GrayscaleTransformation implements BaseTransform { @@ -27,7 +28,7 @@ export class GrayscaleTransformation implements BaseTransform { async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty"); + LogUtil.log(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty", null); } diff --git a/imageknife/src/main/ets/components/imageknife/transform/InvertFilterTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/InvertFilterTransformation.ets index 35d1e9b..91b9431 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/InvertFilterTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/InvertFilterTransformation.ets @@ -17,6 +17,7 @@ import { BaseTransform } from "../transform/BaseTransform" import { AsyncTransform } from "../transform/AsyncTransform" import { Constants } from "../constants/Constants" import { RequestOption } from "../../imageknife/RequestOption" +import {LogUtil} from '../../imageknife/utils/LogUtil' import image from "@ohos.multimedia.image" /** @@ -34,7 +35,7 @@ export class InvertFilterTransformation implements BaseTransform { async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";InvertFilterTransformation buf is empty"); + LogUtil.log(Constants.PROJECT_TAG + ";InvertFilterTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";InvertFilterTransformation buf is empty", null); } diff --git a/imageknife/src/main/ets/components/imageknife/transform/MaskTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/MaskTransformation.ets index c7fcdcb..51a413c 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/MaskTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/MaskTransformation.ets @@ -18,6 +18,7 @@ import { AsyncTransform } from "../transform/AsyncTransform" import { Constants } from "../constants/Constants" import { RequestOption } from "../../imageknife/RequestOption" import { MaskUtils } from "../utils/MaskUtils" +import {LogUtil} from '../../imageknife/utils/LogUtil' import image from "@ohos.multimedia.image" import resmgr from "@ohos.resourceManager" @@ -34,7 +35,7 @@ export class MaskTransformation implements BaseTransform { async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";MaskTransformation buf is empty"); + LogUtil.log(Constants.PROJECT_TAG + ";MaskTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";MaskTransformation buf is empty", null); } diff --git a/imageknife/src/main/ets/components/imageknife/transform/PixelationFilterTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/PixelationFilterTransformation.ets index b878c79..6aece60 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/PixelationFilterTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/PixelationFilterTransformation.ets @@ -18,6 +18,7 @@ import { AsyncTransform } from "../transform/AsyncTransform" import { Constants } from "../constants/Constants" import { RequestOption } from "../../imageknife/RequestOption" import { TransformUtils } from "../transform/TransformUtils" +import {LogUtil} from '../../imageknife/utils/LogUtil' import image from "@ohos.multimedia.image" import { pixelUtils } from "../utils/PixelUtils" @@ -40,7 +41,7 @@ export class PixelationFilterTransformation implements BaseTransform { transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";PixelationFilterTransformation buf is empty"); + LogUtil.log(Constants.PROJECT_TAG + ";PixelationFilterTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";PixelationFilterTransformation buf is empty", null); } @@ -78,7 +79,7 @@ export class PixelationFilterTransformation implements BaseTransform { pixelUtils.pixel(data, this._mPixel, func); }) .catch((e) => { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";error:" + e); + LogUtil.log(Constants.PROJECT_TAG + ";error:" + e); func(e, null); }) }) diff --git a/imageknife/src/main/ets/components/imageknife/transform/RotateImageTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/RotateImageTransformation.ets index 8266c94..4fc0325 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/RotateImageTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/RotateImageTransformation.ets @@ -17,6 +17,7 @@ import { AsyncTransform } from "../transform/AsyncTransform" import { Constants } from "../constants/Constants" import { RequestOption } from "../../imageknife/RequestOption" import { TransformUtils } from "../transform/TransformUtils" +import {LogUtil} from '../../imageknife/utils/LogUtil' import image from "@ohos.multimedia.image" @@ -33,7 +34,7 @@ export class RotateImageTransformation implements BaseTransform { transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";RotateImageTransformation buf is empty"); + LogUtil.log(Constants.PROJECT_TAG + ";RotateImageTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";RotateImageTransformation buf is empty", null); } @@ -72,7 +73,7 @@ export class RotateImageTransformation implements BaseTransform { func("", data); }) .catch((e) => { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";error:" + e); + LogUtil.log(Constants.PROJECT_TAG + ";error:" + e); func(e, null); }) }) diff --git a/imageknife/src/main/ets/components/imageknife/transform/RoundedCornersTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/RoundedCornersTransformation.ets index 6610742..dca0d44 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/RoundedCornersTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/RoundedCornersTransformation.ets @@ -18,6 +18,7 @@ import { ArcPoint } from "../entry/ArcPoint" import { Constants } from "../constants/Constants" import { RequestOption } from "../../imageknife/RequestOption" import { TransformUtils } from "../transform/TransformUtils" +import {LogUtil} from '../../imageknife/utils/LogUtil' import image from "@ohos.multimedia.image" @@ -49,10 +50,10 @@ export class RoundedCornersTransformation implements BaseTransform { } transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { - globalThis.ImageKnife.log('RoundedCornersTransformation = '+ this.getName() + LogUtil.log('RoundedCornersTransformation = '+ this.getName() + 'buf is null ='+ (buf == null)); if (!buf || buf.byteLength <= 0) { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";RoundedCornersTransformation buf is empty"); + LogUtil.log(Constants.PROJECT_TAG + ";RoundedCornersTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";RoundedCornersTransformation buf is empty", null); } @@ -114,11 +115,11 @@ export class RoundedCornersTransformation implements BaseTransform { } }) .catch((error) => { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + "RoundedCornersTransformation error:" + error); + LogUtil.log(Constants.PROJECT_TAG + "RoundedCornersTransformation error:" + error); }); }) .catch((e) => { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";error:" + e); + LogUtil.log(Constants.PROJECT_TAG + ";error:" + e); if (func) { func(e, null); } diff --git a/imageknife/src/main/ets/components/imageknife/transform/SepiaFilterTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/SepiaFilterTransformation.ets index 2199918..98f954e 100644 --- a/imageknife/src/main/ets/components/imageknife/transform/SepiaFilterTransformation.ets +++ b/imageknife/src/main/ets/components/imageknife/transform/SepiaFilterTransformation.ets @@ -17,6 +17,7 @@ import { BaseTransform } from "../transform/BaseTransform" import { AsyncTransform } from "../transform/AsyncTransform" import { Constants } from "../constants/Constants" import { RequestOption } from "../../imageknife/RequestOption" +import {LogUtil} from '../../imageknife/utils/LogUtil' import image from "@ohos.multimedia.image" /** @@ -31,7 +32,7 @@ export class SepiaFilterTransformation implements BaseTransform { async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform) { if (!buf || buf.byteLength <= 0) { - globalThis.ImageKnife.log(Constants.PROJECT_TAG + ";SepiaFilterTransformation buf is empty"); + LogUtil.log(Constants.PROJECT_TAG + ";SepiaFilterTransformation buf is empty"); if (func) { func(Constants.PROJECT_TAG + ";SepiaFilterTransformation buf is empty", null); } diff --git a/imageknife/src/main/ets/components/imageknife/utils/FileTypeUtil.ets b/imageknife/src/main/ets/components/imageknife/utils/FileTypeUtil.ets index 71289ca..d4ced98 100644 --- a/imageknife/src/main/ets/components/imageknife/utils/FileTypeUtil.ets +++ b/imageknife/src/main/ets/components/imageknife/utils/FileTypeUtil.ets @@ -12,7 +12,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - +import {LogUtil} from '../../imageknife/utils/LogUtil' export class FileTypeUtil { private map = new Map(); private READ_MIN_LENGTH; @@ -44,7 +44,7 @@ export class FileTypeUtil { } let dataView = new DataView(arraybuffer); - globalThis.ImageKnife.log('dataView +'+this.getDataViewAt(dataView,0)+this.getDataViewAt(dataView,1)) + LogUtil.log('dataView +'+this.getDataViewAt(dataView,0)+this.getDataViewAt(dataView,1)) for(var [key,value] of this.map){ let keySplit = key.split(',') @@ -58,10 +58,10 @@ export class FileTypeUtil { fileMagic+=this.getDataViewAt(dataView,offset+start) start++; } -// globalThis.ImageKnife.log('magic='+fileMagic+' keySplit[1]='+keySplit[1]+' fileMagic == keySplit[1] ='+(fileMagic == keySplit[1])+ +// LogUtil.log('magic='+fileMagic+' keySplit[1]='+keySplit[1]+' fileMagic == keySplit[1] ='+(fileMagic == keySplit[1])+ // ' fileMagic type ='+typeof(fileMagic) + ' keySplit[1]='+typeof(keySplit[1])) if(fileMagic == keySplit[1]){ - globalThis.ImageKnife.log('匹配到了 fileType='+value) + LogUtil.log('匹配到了 fileType='+value) fileType = value break; } @@ -105,7 +105,7 @@ export class FileTypeUtil { private printMapContent(){ for(var [key,value] of this.map){ - globalThis.ImageKnife.log('key='+key+'---value='+value) + LogUtil.log('key='+key+'---value='+value) } } diff --git a/imageknife/src/main/ets/components/imageknife/utils/LogUtil.ets b/imageknife/src/main/ets/components/imageknife/utils/LogUtil.ets new file mode 100644 index 0000000..28419f6 --- /dev/null +++ b/imageknife/src/main/ets/components/imageknife/utils/LogUtil.ets @@ -0,0 +1,32 @@ +export class LogUtil { + public static isDebug = false; + + public static debug(info: string) { + if (this.isDebug) { + console.debug(info) + } + } + + public static info(info: string) { + if (this.isDebug) { + console.info(info) + } + } + + public static log(info: string) { + if (this.isDebug) { + console.log(info) + } + } + + public static warn(info: string) { + if (this.isDebug) { + console.warn(info) + } + } + + // error 不做拦截 + public static error(info: string) { + console.error(info) + } +} \ No newline at end of file diff --git a/imageknife/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets b/imageknife/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets index 29552dc..82cbdd1 100644 --- a/imageknife/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets +++ b/imageknife/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets @@ -16,19 +16,20 @@ import { IParseGif } from './IParseGif' import { GIFFrame } from './GIFFrame' import { LoadType } from '../../../../../../../GifWorker' import { parseBufferToFrame } from './parse/GIFParse' +import {LogUtil} from '../../utils/LogUtil' import image from '@ohos.multimedia.image' export class GIFParseImpl implements IParseGif { parseGifs(imageinfo: ArrayBuffer, callback: (data?, err?) => void, worker?,runMainThread?:boolean) { let resolveWorker = worker; - globalThis.ImageKnife.log('parseGifs resolveWorker1 is null =' + (resolveWorker == null)) + LogUtil.log('parseGifs resolveWorker1 is null =' + (resolveWorker == null)) if (!resolveWorker) { resolveWorker = globalThis.ImageKnife.getGifWorker(); } - globalThis.ImageKnife.log('parseGifs resolveWorker2 is null =' + (resolveWorker == null)) + LogUtil.log('parseGifs resolveWorker2 is null =' + (resolveWorker == null)) if (!!resolveWorker && !runMainThread) { - globalThis.ImageKnife.log('parseGifs in worker thread!') + LogUtil.log('parseGifs in worker thread!') this.useWorkerParse(resolveWorker, imageinfo, (data, err) => { if (err) { callback(undefined, err) @@ -48,9 +49,9 @@ export class GIFParseImpl implements IParseGif { } }) } else { - globalThis.ImageKnife.log('parseGifs in main thread!') + LogUtil.log('parseGifs in main thread!') let frames = parseBufferToFrame(imageinfo) - globalThis.ImageKnife.log('frames length =' + frames.length) + LogUtil.log('frames length =' + frames.length) this.createPixelMapAll(frames).then((pixelmaps) => { if (pixelmaps.length == frames.length) { for (let i = 0;i < frames.length; i++) { @@ -58,11 +59,11 @@ export class GIFParseImpl implements IParseGif { frame['drawPixelMap'] = pixelmaps[i]; frame['patch'] = null; } - globalThis.ImageKnife.log('parseGifs in main thread! callback is done!') + LogUtil.log('parseGifs in main thread! callback is done!') callback(frames, undefined) } }).catch(err => { - globalThis.ImageKnife.log('parseGifs in main thread! err =' + err) + LogUtil.log('parseGifs in main thread! err =' + err) callback(undefined, err) }) } @@ -97,7 +98,7 @@ export class GIFParseImpl implements IParseGif { } worker.onexit = function () { - globalThis.ImageKnife.log('gifWork worker.onexit!') + LogUtil.log('gifWork worker.onexit!') } worker.onmessage = (e) => { diff --git a/package.json b/package.json index 3e96a82..fbc532c 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,9 @@ "repository": {}, "version": "1.0.0", "dependencies": { - "@ohos/hvigor": "1.3.1", - "@ohos/hvigor-ohos-plugin": "1.3.1", "@ohos/hypium": "1.0.3", - "@ohos/svg": "^1.1.0", - "hypium": "^1.0.0" + "@ohos/hvigor-ohos-plugin": "1.3.1", + "hypium": "^1.0.0", + "@ohos/hvigor": "1.3.1" } } From 17516eb53e111c66361f824e300fb04b5ba850dc Mon Sep 17 00:00:00 2001 From: zhoulisheng1 Date: Wed, 7 Dec 2022 02:41:42 -0800 Subject: [PATCH 10/15] =?UTF-8?q?1.=E8=A7=A3=E5=86=B3=E5=AD=90=E7=BA=BF?= =?UTF-8?q?=E7=A8=8Barraybuffer=20tansformer=E4=B9=8B=E5=90=8E=E4=B8=BB?= =?UTF-8?q?=E7=BA=BF=E7=A8=8B,=E5=AD=98=E5=85=A5=E7=A3=81=E7=9B=98?= =?UTF-8?q?=E5=A4=B1=E8=B4=A5=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zhoulisheng1 --- .../main/ets/components/imageknife/utils/gif/GIFParseImpl.ets | 1 + 1 file changed, 1 insertion(+) diff --git a/imageknife/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets b/imageknife/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets index 82cbdd1..1bb49e3 100644 --- a/imageknife/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets +++ b/imageknife/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets @@ -30,6 +30,7 @@ export class GIFParseImpl implements IParseGif { if (!!resolveWorker && !runMainThread) { LogUtil.log('parseGifs in worker thread!') + let copyBuffer = imageinfo.slice(0); this.useWorkerParse(resolveWorker, imageinfo, (data, err) => { if (err) { callback(undefined, err) From 8cb33d032168b1234cd7353e06abb4cfb8e1c90c Mon Sep 17 00:00:00 2001 From: zhoulisheng1 Date: Wed, 7 Dec 2022 02:42:31 -0800 Subject: [PATCH 11/15] =?UTF-8?q?1.npm=20=E5=BA=93=E9=85=8D=E7=BD=AE=20?= =?UTF-8?q?=E6=96=B0=E5=A2=9Emodule=20hvigorfile.ts=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E6=96=B0=E5=A2=9E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zhoulisheng1 --- imageknife/hvigorfile.ts | 3 +++ imageknife/package.json | 3 --- 2 files changed, 3 insertions(+), 3 deletions(-) create mode 100644 imageknife/hvigorfile.ts diff --git a/imageknife/hvigorfile.ts b/imageknife/hvigorfile.ts new file mode 100644 index 0000000..42ed4b4 --- /dev/null +++ b/imageknife/hvigorfile.ts @@ -0,0 +1,3 @@ +// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently. +module.exports = require('@ohos/hvigor-ohos-plugin').harTasks + diff --git a/imageknife/package.json b/imageknife/package.json index 8b7b83e..1615a48 100644 --- a/imageknife/package.json +++ b/imageknife/package.json @@ -22,9 +22,6 @@ "spark-md5": "^3.0.2" }, "tags": [ - "OpenHarmony", - "ImageKnife", - "glide", "ImageCache", "UI" ], From 3065a2883f4a92e805462845baefdc06771b8c20 Mon Sep 17 00:00:00 2001 From: zhoulisheng1 Date: Wed, 14 Dec 2022 01:58:17 -0800 Subject: [PATCH 12/15] =?UTF-8?q?1.=E7=BD=91=E7=BB=9C=E4=B8=8B=E8=BD=BD?= =?UTF-8?q?=E5=8F=AF=E8=83=BD=E4=BC=9A=E6=B2=A1=E6=9C=89=E6=80=BB=E9=95=BF?= =?UTF-8?q?=E5=BA=A6=E8=BF=94=E5=9B=9E=EF=BC=8C=E8=BF=99=E9=87=8C=E9=9C=80?= =?UTF-8?q?=E8=A6=81=E9=A2=9D=E5=A4=96=E5=A4=84=E7=90=86=EF=BC=8C=E9=81=BF?= =?UTF-8?q?=E5=85=8D=E5=87=BA=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zhoulisheng1 --- .../imageknife/networkmanage/DownloadClient.ets | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/imageknife/src/main/ets/components/imageknife/networkmanage/DownloadClient.ets b/imageknife/src/main/ets/components/imageknife/networkmanage/DownloadClient.ets index 51f099e..bdc85e0 100644 --- a/imageknife/src/main/ets/components/imageknife/networkmanage/DownloadClient.ets +++ b/imageknife/src/main/ets/components/imageknife/networkmanage/DownloadClient.ets @@ -46,9 +46,12 @@ export class DownloadClient implements IDataFetch { loadTask = downloadTask; loadTask.on('progress', (receivedSize, totalSize) => { - let percent = Math.round(((receivedSize * 1.0) / (totalSize * 1.0)) * 100) - if (request.progressFunc) { - request.progressFunc(percent); + if(totalSize > 0) { + // 并不是所有服务器都会返回totalSize 当没有文件大小的时候,下载进度没有百分比回调,只能知道目前下载了多少数据量 + let percent = Math.round(((receivedSize * 1.0) / (totalSize * 1.0)) * 100) + if (request.progressFunc) { + request.progressFunc(percent); + } } }); From b27a5ebb074a5bc7304e9c22838a801ea97f84d0 Mon Sep 17 00:00:00 2001 From: zhoulisheng1 Date: Wed, 14 Dec 2022 02:00:47 -0800 Subject: [PATCH 13/15] 1.update README.md CHANGELOG.md 2.publish version 1.0.5 Signed-off-by: zhoulisheng1 --- CHANGELOG.md | 25 ++++++++++++++++--- README.md | 15 +++++------ imageknife/package.json | 2 +- .../components/imageknife/utils/LogUtil.ets | 14 +++++++++++ 4 files changed, 42 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f2e93e1..1513f95 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,12 +1,29 @@ +## 1.0.5 +- 自定义组件已支持通用属性和通用事件绑定,因此ImageKnifeComponent将删除相关内容,相关内容由用户自定义实现，提高扩展能力 + +- ImageKnifeOption 支持列表绑定 + +- ImageKnifeOption + + 新增 + + - 1.onClick事件属性 + + 删除 + + - 1.size(设置大小) + - 2.sizeAnimated 显式动画 + - 3.backgroundColor背景色 + - 4.margin 组件外间距 等属性,删除的属性将由通用属性提供支持,可支持在ImageKnifeComponent自定义组件上链式调用 ## 1.0.4 -渲染显示部分使用Canvas组件替代Image组件 +- 渲染显示部分使用Canvas组件替代Image组件 -重构渲染封装层ImageKnifeComponent自定义组件 +- 重构渲染封装层ImageKnifeComponent自定义组件 -新增GIF图片解析能力 +- 新增GIF图片解析能力 -新增SVG图片解析能力 +- 新增SVG图片解析能力 ## 1.0.3 diff --git a/README.md b/README.md index e6e2a54..a9f03fd 100644 --- a/README.md +++ b/README.md @@ -52,8 +52,6 @@ struct Index { @State imageKnifeOption1: ImageKnifeOption = { // 加载一张本地的jpg资源（必选） loadSrc: $r('app.media.jpgSample'), - // 组件宽设置为300，高设置为300（必选） - size: { width: '300', height: '300' }, // 占位图使用本地资源icon_loading（可选） placeholderSrc: $r('app.media.icon_loading'), // 失败占位图使用本地资源icon_failed（可选） @@ -63,6 +61,8 @@ struct Index { Scroll() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 }) + .width(300) // 自定义组件支持通用属性链式调用，可以直接设置宽高 + .height(300) } } .width('100%') @@ -99,7 +99,6 @@ struct IndexFunctionDemo { @State imageKnifeOption: ImageKnifeOption = { loadSrc: $r('app.media.gifSample'), - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed') }; @@ -109,6 +108,8 @@ struct IndexFunctionDemo { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Text("简单示例：加载一张gif图片").fontSize(15) ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption }) + .width(300) // 自定义组件支持通用属性链式调用，可以直接设置宽高 + .height(300) } } .width('100%') @@ -188,7 +189,6 @@ arkWorker.parentPort.onmessage = gifHandler; | 参数名称 | 入参内容 | 功能简介 | | ---------------------------- | ------------------------------------------------------------ | ----------------------------------- | -| size | { width: string, height: string } | 设置组件宽高（必选） | | loadSrc | string \| PixelMap \| Resource | 设置主图资源（必选） | | mainScaleType | ScaleType | 设置主图展示样式（可选） | | strategy | DiskStrategy | 设置磁盘缓存策略（可选） | @@ -210,9 +210,6 @@ arkWorker.parentPort.onmessage = gifHandler; | transformation | BaseTransform | 单个变换（可选） | | transformations | Array> | 多个变换,目前仅支持单个变换（可选） | | allCacheInfoCallback | IAllCacheInfoCallback | 输出缓存相关内容和信息（可选） | -| backgroundColor | Color \| number \| string \| Resource | 组件背景颜色（可选） | -| margin | {
top?: number \| string \| Resource,
right?: number \| string \| Resource,
bottom?: number \| string \| Resource,
left?: number \| string \| Resource
} \| number \| string \| Resource | 组件间距（可选） | -| sizeAnimate | AnimateParam | 组件大小变化显式动画效果（可选） | | **drawLifeCycle** | **IDrawLifeCycle** | **用户自定义实现绘制方案（可选）** | 其他参数只需要在ImageKnifeOption对象上按需添加即可。 @@ -311,7 +308,7 @@ export default class MyAbilityStage extends AbilityStage { 下面我们会着重指导用户如何复用图片加载逻辑，重构自定义组件ImageKnifeComponent。 -首先我们先看看RequestOption构建的内容,如下表格所示: +首先我们先看看RequestOption构建的内容,如下所示: ### 数据加载 @@ -482,7 +479,7 @@ request.skipMemoryCache(true) /entry/src/ - main/ets/MainAbility - pages # 测试page页面列表 - - basicTestFeatureAbilityPage.ets # 测试元能力 + - basicTestFeatureAbilityPage.ets # 测试列表加载 - basicTestFileIOPage.ets # 测试fileio - basicTestMediaImage.ets # 测试媒体image - basicTestResourceManagerPage.ets # 测试本地资源解析 diff --git a/imageknife/package.json b/imageknife/package.json index 1615a48..40edd3c 100644 --- a/imageknife/package.json +++ b/imageknife/package.json @@ -12,7 +12,7 @@ }, "main": "index.ets", "repository": "https://gitee.com/openharmony-tpc/ImageKnife", - "version": "1.0.4", + "version": "1.0.5", "dependencies": { "pako": "^1.0.5", "js-binary-schema-parser": "^2.0.3", diff --git a/imageknife/src/main/ets/components/imageknife/utils/LogUtil.ets b/imageknife/src/main/ets/components/imageknife/utils/LogUtil.ets index 28419f6..21add41 100644 --- a/imageknife/src/main/ets/components/imageknife/utils/LogUtil.ets +++ b/imageknife/src/main/ets/components/imageknife/utils/LogUtil.ets @@ -1,3 +1,17 @@ +/* + * Copyright (C) 2022 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. + */ export class LogUtil { public static isDebug = false; From 42ee70ec08b8bae0373da1f45b19b0d07a9c0b6f Mon Sep 17 00:00:00 2001 From: zhoulisheng1 Date: Wed, 14 Dec 2022 23:18:41 -0800 Subject: [PATCH 14/15] =?UTF-8?q?1.=E8=A7=A3=E5=86=B3=E4=BA=86=E7=A3=81?= =?UTF-8?q?=E7=9B=98=E7=BC=93=E5=AD=98=E6=97=B6=E5=80=99,gif=E7=9A=84array?= =?UTF-8?q?buffer=E8=A2=AB=E5=AD=90=E7=BA=BF=E7=A8=8B=E9=87=8A=E6=94=BE?= =?UTF-8?q?=E7=9A=84=E6=83=85=E5=86=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zhoulisheng1 --- .../main/ets/components/imageknife/utils/gif/GIFParseImpl.ets | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/imageknife/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets b/imageknife/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets index 1bb49e3..96d6ea4 100644 --- a/imageknife/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets +++ b/imageknife/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets @@ -31,7 +31,7 @@ export class GIFParseImpl implements IParseGif { if (!!resolveWorker && !runMainThread) { LogUtil.log('parseGifs in worker thread!') let copyBuffer = imageinfo.slice(0); - this.useWorkerParse(resolveWorker, imageinfo, (data, err) => { + this.useWorkerParse(resolveWorker, copyBuffer, (data, err) => { if (err) { callback(undefined, err) } else { From 884b06bb327c80365ed144fe531a1758e7568e9d Mon Sep 17 00:00:00 2001 From: zhoulisheng1 Date: Thu, 15 Dec 2022 00:59:59 -0800 Subject: [PATCH 15/15] 1.LogUtil add grade all print log; 2.clean others codecheck problems Signed-off-by: zhoulisheng1 --- .../ets/pages/basicTestFeatureAbilityPage.ets | 2 +- .../imageknife/ImageKnifeComponent.ets | 12 +++--- .../components/imageknife/utils/LogUtil.ets | 39 ++++++++++++------- 3 files changed, 30 insertions(+), 23 deletions(-) diff --git a/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets b/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets index 85c4084..ee87e56 100644 --- a/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets +++ b/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets @@ -1,6 +1,6 @@ /* * Copyright (C) 2021 Huawei Device Co., Ltd. - * Licensed under the Apache License, Version 2.0 (the "License", + * 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 * diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets b/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets index e8543d5..7b5a2ce 100644 --- a/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets +++ b/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets @@ -84,7 +84,7 @@ export struct ImageKnifeComponent { } private canvasHasReady:boolean = false; private firstDrawFlag:boolean = false; - private onReadyNext:Function = undefined + private onReadyNext:()=>void = undefined build() { Canvas(this.context) .width('100%') @@ -98,7 +98,7 @@ export struct ImageKnifeComponent { // 前提：宽高值均有效,值>0. 条件1：当前宽高与上一次宽高不同 条件2:当前是第一次绘制 if( (this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth) || this.firstDrawFlag){ this.firstDrawFlag = false; - LogUtil.log('ImageKnifeComponent onAreaChange isValid Canvas currentWidth =' + this.currentWidth + ' currentHeight=' + this.currentHeight) + LogUtil.log('ImageKnifeComponent onAreaChange And Next To Execute. Canvas currentWidth =' + this.currentWidth + ' currentHeight=' + this.currentHeight) this.lastWidth = this.currentWidth this.lastHeight = this.currentHeight this.imageKnifeExecute() @@ -126,11 +126,11 @@ export struct ImageKnifeComponent { watchImageKnifeOption() { LogUtil.log('ImageKnifeComponent watchImageKnifeOption is happened!') - this.whetherWaitSize(); + this.whetherWaitSize(); } /** - * 判断当前是否由宽高,有直接重绘,没有则等待onAreaChange回调,当出现aboutToAppear第一次绘制的时候 + * 判断当前是否有宽高,有直接重绘,没有则等待onAreaChange回调,当出现aboutToAppear第一次绘制的时候 * 给firstDrawFlag置为true,保证size即使没有变化也要进入 请求绘制流程 * @param drawFirst 是否是aboutToAppear第一次绘制 */ @@ -157,7 +157,7 @@ export struct ImageKnifeComponent { * 待onReady执行的时候执行 * @param nextFunction 下一个方法 */ - runNextFunction(nextFunction:Function){ + runNextFunction(nextFunction:()=>void){ if(!this.canvasHasReady){ // canvas未初始化完成 this.onReadyNext = nextFunction; @@ -309,8 +309,6 @@ export struct ImageKnifeComponent { }) } } - - } displayMainSource(data: ImageKnifeData) { diff --git a/imageknife/src/main/ets/components/imageknife/utils/LogUtil.ets b/imageknife/src/main/ets/components/imageknife/utils/LogUtil.ets index 21add41..27ff820 100644 --- a/imageknife/src/main/ets/components/imageknife/utils/LogUtil.ets +++ b/imageknife/src/main/ets/components/imageknife/utils/LogUtil.ets @@ -13,34 +13,43 @@ * limitations under the License. */ export class LogUtil { - public static isDebug = false; + public static OFF: number = 1 + public static LOG: number = 2 + public static DEBUG: number = 3 + public static INFO: number = 4 + public static WARN: number = 5 + public static ERROR: number = 6 + public static ALL: number = 7 + public static mLogLevel:number = LogUtil.OFF; - public static debug(info: string) { - if (this.isDebug) { - console.debug(info) + public static debug(message: string, ...args: any[]) { + if (LogUtil.mLogLevel >= LogUtil.DEBUG) { + console.debug(message, args) } } - public static info(info: string) { - if (this.isDebug) { - console.info(info) + public static info(message: string, ...args: any[]) { + if (LogUtil.mLogLevel >= LogUtil.INFO) { + console.info(message, args) } } - public static log(info: string) { - if (this.isDebug) { - console.log(info) + public static log(message: string, ...args: any[]) { + if (LogUtil.mLogLevel >= LogUtil.LOG) { + console.log(message, args) } } - public static warn(info: string) { - if (this.isDebug) { - console.warn(info) + public static warn(message: string, ...args: any[]) { + if (LogUtil.mLogLevel >= LogUtil.WARN) { + console.warn(message, args) } } // error 不做拦截 - public static error(info: string) { - console.error(info) + public static error(message: string, ...args: any[]) { + if(LogUtil.mLogLevel >= LogUtil.ERROR) { + console.error(message, args) + } } } \ No newline at end of file