From caa8d7b3569cfaab9541fe9a206b9a805815adc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=AC=A2?= Date: Wed, 20 Mar 2024 09:48:23 +0800 Subject: [PATCH 1/2] =?UTF-8?q?ImageKnife=E6=96=B0=E5=A2=9E=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E5=AE=BD=E9=AB=98=E8=87=AA=E9=80=82=E5=BA=94=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 张欢 --- CHANGELOG.md | 1 + README.md | 6 ++ .../ets/pages/imageknifeTestCaseIndex.ets | 19 +++++ .../pages/testImageKnifeAutoHeightPage.ets | 71 ++++++++++++++++++ .../main/ets/pages/testImageKnifeAutoPage.ets | 71 ++++++++++++++++++ .../ets/pages/testImageKnifeAutoWidthPage.ets | 72 +++++++++++++++++++ .../resources/base/profile/main_pages.json | 5 +- .../imageknife/ImageKnifeComponent.ets | 30 ++++++-- 8 files changed, 270 insertions(+), 5 deletions(-) create mode 100644 entry/src/main/ets/pages/testImageKnifeAutoHeightPage.ets create mode 100644 entry/src/main/ets/pages/testImageKnifeAutoPage.ets create mode 100644 entry/src/main/ets/pages/testImageKnifeAutoWidthPage.ets diff --git a/CHANGELOG.md b/CHANGELOG.md index 3234e15..453f72b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## 2.1.2-rc.11 - 修复设置磁盘容量最大值出现闪退 +- ImageKnife新增图片宽高自适应功能 ## 2.1.2-rc.10 - 修复部分gif图片识别成静态图 diff --git a/README.md b/README.md index c6c8dac..327873a 100644 --- a/README.md +++ b/README.md @@ -364,6 +364,9 @@ request.skipMemoryCache(true) | ScaleType.FIT_XY | int | 图像拉伸至组件大小 | | ScaleType.CENTER_INSIDE | int | 如果图像大于组件则执行FIT_CENTER,小于组件则CENTER | | ScaleType.NONE | int | 如果不想适配，直接展示原图大小 | +| ScaleType.AUTO_HEIGHT | int | 设置宽的时候，图片高度自适应 | +| ScaleType.AUTO_WIDTH | int | 设置高的时候，图片宽度自适应 | +| ScaleType.AUTO | int | 没有设置宽和高，图片按照自身宽高显示 | ### 图片变换相关 @@ -503,6 +506,9 @@ HSP场景适配: - storageTestDiskLruCache.ets # 磁盘缓存测试 - storageTestLruCache.ets # 内存缓存测试 - testAllCacheInfoPage.ets # 所有缓存信息获取测试 + - testImageKnifeAutoHeightPage.ets # 图片高度自适应测试 + - testImageKnifeAutoWidthPage.ets # 图片宽度自适应测试 + - testImageKnifeAutoPage.ets # 图片宽高自适应测试 - testImageKnifeOptionChangedPage.ets # 数据切换测试 - testImageKnifeOptionChangedPage2.ets # 数据切换测试,部分变换 - testImageKnifeOptionChangedPage3.ets # 数据切换测试,组件动画 diff --git a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets index 3fec8c9..72d2c2a 100644 --- a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets +++ b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets @@ -63,6 +63,25 @@ struct IndexFunctionDemo { console.log("测试ImageKnifeComponent所有图片切换") router.pushUrl({ url: "pages/testImageKnifeOptionChangedPage" }); }).margin({ top: 5, left: 3 }) + Button("测试图片高度自适应") + .onClick(() => { + console.log("测试ImageKnifeComponent图片高度自适应") + router.pushUrl({ url: "pages/testImageKnifeAutoHeightPage" }); + }).margin({ top: 5, left: 3 }) + + }.width('100%').height(60).backgroundColor(Color.Pink) + Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + + Button("测试图片宽度自适应") + .onClick(() => { + console.log("测试ImageKnifeComponent图片宽度自适应") + router.pushUrl({ url: "pages/testImageKnifeAutoWidthPage" }); + }).margin({ top: 5, left: 3 }) + Button("测试图片宽高自适应") + .onClick(() => { + console.log("测试ImageKnifeComponent图片宽高自适应") + router.pushUrl({ url: "pages/testImageKnifeAutoPage" }); + }).margin({ top: 5, left: 3 }) }.width('100%').height(60).backgroundColor(Color.Pink) Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { diff --git a/entry/src/main/ets/pages/testImageKnifeAutoHeightPage.ets b/entry/src/main/ets/pages/testImageKnifeAutoHeightPage.ets new file mode 100644 index 0000000..701b868 --- /dev/null +++ b/entry/src/main/ets/pages/testImageKnifeAutoHeightPage.ets @@ -0,0 +1,71 @@ +/* + * Copyright (C) 2021 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 { ComponentUtils } from '@ohos.arkui.UIContext' +import display from '@ohos.display'; +import { ImageKnifeComponent, + ScaleType } from '@ohos/libraryimageknife' +import componentUtils from '@ohos.arkui.componentUtils'; + +@Entry +@Component + +struct testImageKnifeAutoHeightPage { + + + private currentWidth: number =0 + private currentHeight: number =0 + + @State value : componentUtils.ComponentInfo = componentUtils.getRectangleById("ImageKnifeCanvas"); + + aboutToAppear(){ + let displayClas : ESObject =null + try { + displayClas = display.getDefaultDisplaySync() + console.info('........width'+ displayClas.width) + console.info('........height'+ displayClas.height) + + }catch (e){ + + console.error('error' + e) + } + + + } + build(){ + Scroll(){ + Column(){ + ImageKnifeComponent({ + imageKnifeOption:{ + loadSrc :$r('app.media.pngSample'), + mainScaleType:ScaleType.AUTO_HEIGHT, + } + }) + .width("100%") + Button(){ + Text('getRectangleById').fontSize(40).fontWeight(FontWeight.Bold); + } + .onClick(()=> { + this.value = componentUtils.getRectangleById("ImageKnifeCanvas") + this.currentWidth = px2vp(this.value.size.width) + this.currentHeight = px2vp(this.value.size.height) + console.log('currentWidth'+this.currentWidth) + console.log('currentHeight'+this.currentHeight) + }) + } + } + + } +} \ No newline at end of file diff --git a/entry/src/main/ets/pages/testImageKnifeAutoPage.ets b/entry/src/main/ets/pages/testImageKnifeAutoPage.ets new file mode 100644 index 0000000..1251d76 --- /dev/null +++ b/entry/src/main/ets/pages/testImageKnifeAutoPage.ets @@ -0,0 +1,71 @@ +/* + * Copyright (C) 2021 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 { ComponentUtils } from '@ohos.arkui.UIContext' +import display from '@ohos.display'; +import { ImageKnifeComponent, + ScaleType } from '@ohos/libraryimageknife' +import componentUtils from '@ohos.arkui.componentUtils'; + +@Entry +@Component + +struct testImageKnifeAutoPage { + + + private currentWidth: number =0 + private currentHeight: number =0 + + @State value : componentUtils.ComponentInfo = componentUtils.getRectangleById("ImageKnifeCanvas"); + + aboutToAppear(){ + let displayClas : ESObject =null + try { + displayClas = display.getDefaultDisplaySync() + console.info('........width'+ displayClas.width) + console.info('........height'+ displayClas.height) + + }catch (e){ + + console.error('error' + e) + } + + + } + build(){ + Scroll(){ + Column(){ + ImageKnifeComponent({ + imageKnifeOption:{ + loadSrc :$r('app.media.pngSample'), + mainScaleType:ScaleType.AUTO, + } + }) + + Button(){ + Text('getRectangleById').fontSize(40).fontWeight(FontWeight.Bold); + } + .onClick(()=> { + this.value = componentUtils.getRectangleById("ImageKnifeCanvas") + this.currentWidth = px2vp(this.value.size.width) + this.currentHeight = px2vp(this.value.size.height) + console.log('currentWidth'+this.currentWidth) + console.log('currentHeight'+this.currentHeight) + }) + } + } + + } +} \ No newline at end of file diff --git a/entry/src/main/ets/pages/testImageKnifeAutoWidthPage.ets b/entry/src/main/ets/pages/testImageKnifeAutoWidthPage.ets new file mode 100644 index 0000000..256f29c --- /dev/null +++ b/entry/src/main/ets/pages/testImageKnifeAutoWidthPage.ets @@ -0,0 +1,72 @@ +/* + * Copyright (C) 2021 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 { ComponentUtils } from '@ohos.arkui.UIContext' +import display from '@ohos.display'; +import { ImageKnifeComponent, + ScaleType } from '@ohos/libraryimageknife' +import componentUtils from '@ohos.arkui.componentUtils'; + +@Entry +@Component + +struct testImageKnifeAutoWidthPage { + + + private currentWidth: number =0 + private currentHeight: number =0 + + @State value : componentUtils.ComponentInfo = componentUtils.getRectangleById("ImageKnifeCanvas"); + + aboutToAppear(){ + let displayClas : ESObject =null + try { + displayClas = display.getDefaultDisplaySync() + console.info('........width'+ displayClas.width) + console.info('........height'+ displayClas.height) + + }catch (e){ + + console.error('error' + e) + } + + + } + build(){ + Scroll(){ + Column(){ + ImageKnifeComponent({ + imageKnifeOption:{ + loadSrc :$r('app.media.pngSample'), + mainScaleType:ScaleType.AUTO_WIDTH, + } + }) + .height(400) + + Button(){ + Text('getRectangleById').fontSize(40).fontWeight(FontWeight.Bold); + } + .onClick(()=> { + this.value = componentUtils.getRectangleById("ImageKnifeCanvas") + this.currentWidth = px2vp(this.value.size.width) + this.currentHeight = px2vp(this.value.size.height) + console.log('currentWidth'+this.currentWidth) + console.log('currentHeight'+this.currentHeight) + }) + } + } + + } +} \ No newline at end of file diff --git a/entry/src/main/resources/base/profile/main_pages.json b/entry/src/main/resources/base/profile/main_pages.json index e06a871..36c2b17 100644 --- a/entry/src/main/resources/base/profile/main_pages.json +++ b/entry/src/main/resources/base/profile/main_pages.json @@ -39,6 +39,9 @@ "pages/testImageKnifeRouter1", "pages/testImageKnifeRouter2", "pages/RequestOptionLoadImage", - "pages/testImageKnifeHttpRequestHeader" + "pages/testImageKnifeHttpRequestHeader", + "pages/testImageKnifeAutoPage", + "pages/testImageKnifeAutoWidthPage", + "pages/testImageKnifeAutoHeightPage" ] } \ No newline at end of file diff --git a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets b/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets index 5fb1ff1..5279c0e 100644 --- a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets +++ b/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets @@ -104,11 +104,17 @@ export struct ImageKnifeComponent { listener: inspector.ComponentObserver = inspector.createComponentObserver(this.keyCanvas.keyId) private value: componentUtils.ComponentInfo = componentUtils.getRectangleById(this.keyCanvas.keyId) + + @State currentSize : Size = { + width: 0.01, + height: 0.01 + } + build() { Canvas(this.context) .key(this.keyCanvas.keyId) - .width('100%') - .height('100%') + .width((this.imageKnifeOption!=undefined && this.imageKnifeOption.mainScaleType!= undefined && this.imageKnifeOption.mainScaleType == ScaleType.AUTO_WIDTH )? this.currentSize.width:'100%') + .height((this.imageKnifeOption!=undefined && this.imageKnifeOption.mainScaleType!= undefined && this.imageKnifeOption.mainScaleType == ScaleType.AUTO_HEIGHT )? this.currentSize.height:'100%') .renderFit(RenderFit.RESIZE_FILL) .onReady(() => { let ctx = this.context; @@ -542,6 +548,16 @@ export struct ImageKnifeComponent { LogUtil.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height + 'scaleType=' + scaleType) context.save(); context.clearRect(0, 0, compWidth, compHeight) + let scaleHeight = imageInfo.size.height/imageInfo.size.width + let scaleWidth = imageInfo.size.width/imageInfo.size.height + if (this.imageKnifeOption.mainScaleType == ScaleType.AUTO_WIDTH){ + this.currentSize.width=this.context.height*scaleWidth + }else if (this.imageKnifeOption.mainScaleType == ScaleType.AUTO_HEIGHT){ + this.currentSize.height=this.context.width*scaleHeight + }else if (this.imageKnifeOption.mainScaleType == ScaleType.AUTO){ + this.currentSize.height=imageInfo.size.height + this.currentSize.width =imageInfo.size.width + } ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap?.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); LogUtil.log('ImageKnifeComponent default drawMainSource end!') @@ -847,7 +863,13 @@ export enum ScaleType { // 如果图像大于组件则执行FIT_CENTER,小于组件则CENTER CENTER_INSIDE = 7, // 如果不想适配，直接展示原图大小 - NONE = 8 + NONE = 8, + // 设置宽的时候，图片高度自适应 + AUTO_HEIGHT =9, + // 设置高的时候，图片宽度自适应 + AUTO_WIDTH =10, + //没有设置宽和高，图片按照自身宽高显示 + AUTO =11 } @@ -884,7 +906,7 @@ export class ScaleTypeHelper { ScaleTypeHelper.drawNone(context, source, imageWidth, imageHeight, imageOffsetX, imageOffsetY) break; default: - ScaleTypeHelper.drawNone(context, source, imageWidth, imageHeight, imageOffsetX, imageOffsetY) + ScaleTypeHelper.drawFitCenter(context, source, minScale, imageWidth, imageHeight, compWidth, compHeight, imageOffsetX, imageOffsetY) break } From d9e91622701803e29adb2bf3a64e8d1013a7bada Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=AC=A2?= Date: Mon, 25 Mar 2024 15:55:31 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E8=87=AA=E9=80=82=E5=BA=94=E5=B1=9E=E6=80=A7log?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 张欢 --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 453f72b..0bfe2e3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ ## 2.1.2-rc.11 - 修复设置磁盘容量最大值出现闪退 +- 修复概率出现jscrash问题 +- 修复进度条问题 +- 修复单帧gif图片加载失败 +- removeRunning删除running队列log设置开关 - ImageKnife新增图片宽高自适应功能 ## 2.1.2-rc.10