diff --git a/CHANGELOG.md b/CHANGELOG.md index 76ca300..0bfe2e3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - 修复进度条问题 - 修复单帧gif图片加载失败 - removeRunning删除running队列log设置开关 +- 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 1cc2ca2..6677d37 100644 --- a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets +++ b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets @@ -15,7 +15,6 @@ import router from '@ohos.router'; - @Entry @Component struct IndexFunctionDemo { @@ -38,6 +37,7 @@ struct IndexFunctionDemo { }).margin({ top: 5, left: 3 }) }.width('100%').height(60).backgroundColor(Color.Pink) + Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button("测试全球化") .onClick(() => { @@ -53,8 +53,6 @@ struct IndexFunctionDemo { }.width('100%').height(60).backgroundColor(Color.Pink) - - Text("测试图片切换功能点").fontSize(15) Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -63,8 +61,29 @@ 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 }) { Button("测试thumbnail") .onClick(() => { @@ -190,6 +209,7 @@ struct IndexFunctionDemo { }).margin({ top: 15 }) }.width('100%').height(60).backgroundColor(Color.Pink) + Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button("组件显式动画") @@ -211,7 +231,6 @@ struct IndexFunctionDemo { }).margin({ top: 15 }) - }.width('100%').height(60).backgroundColor(Color.Pink) Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -262,13 +281,14 @@ struct IndexFunctionDemo { }).margin({ top: 5, left: 3 }) }.width('100%').height(60).backgroundColor(Color.Pink) + Text("HSP相关测试").fontSize(15) Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button("进入HSP的library共享包") .onClick(() => { - router.pushUrl({url:'@bundle:com.openharmony.imageknife/sharedlibrary/ets/pages/Index'}) - .then(()=>{ + router.pushUrl({ url: '@bundle:com.openharmony.imageknife/sharedlibrary/ets/pages/Index' }) + .then(() => { console.log('push page suceess') }) }).margin({ top: 15 }) @@ -278,12 +298,13 @@ struct IndexFunctionDemo { router.pushUrl({ url: "pages/hspCacheTestPage" }); }).margin({ top: 15 }) Button("不同的hsp资源加载") - .onClick(()=>{ + .onClick(() => { console.log("pages/multiHspTestPage 页面跳转") router.pushUrl({ url: "pages/multiHspTestPage" }); }) }.width('100%').height(60).backgroundColor(Color.Pink) + Text("测试图片加载稳定").fontSize(15) Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button("测试多张网络图片加载速度") @@ -299,6 +320,7 @@ struct IndexFunctionDemo { router.pushUrl({ url: "pages/testManyGifLoadWithPage" }); }).margin({ top: 5, left: 3 }) }.width('100%').height(60).backgroundColor(Color.Pink) + Text('测试图片抗锯齿').fontSize(15) Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button('测试图片抗锯齿') 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 3670de9..63e11fa 100644 --- a/entry/src/main/resources/base/profile/main_pages.json +++ b/entry/src/main/resources/base/profile/main_pages.json @@ -40,6 +40,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 45bc38e..5027b36 100644 --- a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets +++ b/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets @@ -106,11 +106,16 @@ 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; @@ -583,6 +588,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!') @@ -912,7 +927,13 @@ export enum ScaleType { // 如果图像大于组件则执行FIT_CENTER,小于组件则CENTER CENTER_INSIDE = 7, // 如果不想适配，直接展示原图大小 - NONE = 8 + NONE = 8, + // 设置宽的时候，图片高度自适应 + AUTO_HEIGHT =9, + // 设置高的时候，图片宽度自适应 + AUTO_WIDTH =10, + //没有设置宽和高，图片按照自身宽高显示 + AUTO =11 } @@ -949,7 +970,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 }