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..87b1b6a --- /dev/null +++ b/entry/src/main/ets/pages/testImageKnifeAutoHeightPage.ets @@ -0,0 +1,56 @@ +import { ComponentUtils } from '@ohos.arkui.UIContext' +import display from '@ohos.display'; +import { ImageKnifeComponent, + ScaleType } from '@ohos/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent'; +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..7e9df9a --- /dev/null +++ b/entry/src/main/ets/pages/testImageKnifeAutoPage.ets @@ -0,0 +1,56 @@ +import { ComponentUtils } from '@ohos.arkui.UIContext' +import display from '@ohos.display'; +import { ImageKnifeComponent, + ScaleType } from '@ohos/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent'; +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, + } + }) + + 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..59cac02 --- /dev/null +++ b/entry/src/main/ets/pages/testImageKnifeAutoWidthPage.ets @@ -0,0 +1,57 @@ +import { ComponentUtils } from '@ohos.arkui.UIContext' +import display from '@ohos.display'; +import { ImageKnifeComponent, + ScaleType } from '@ohos/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent'; +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_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..34641cd 100644 --- a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets +++ b/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets @@ -104,11 +104,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.mainScaleType == ScaleType.AUTO_WIDTH || this.imageKnifeOption .mainScaleType == ScaleType.AUTO)? this.currentSize.width:'100%') + .height((this.imageKnifeOption.mainScaleType == ScaleType.AUTO_WIDTH || this.imageKnifeOption .mainScaleType== ScaleType.AUTO)? this.currentSize.height:'100%') .renderFit(RenderFit.RESIZE_FILL) .onReady(() => { let ctx = this.context; @@ -542,6 +547,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.currentHeight*scaleWidth + }else if (this.imageKnifeOption.mainScaleType == ScaleType.AUTO_HEIGHT){ + this.currentSize.height=this.currentWidth*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 +862,13 @@ export enum ScaleType { // 如果图像大于组件则执行FIT_CENTER,小于组件则CENTER CENTER_INSIDE = 7, // 如果不想适配,直接展示原图大小 - NONE = 8 + NONE = 8, + // 设置宽的时候,图片高度自适应 + AUTO_HEIGHT =9, + // 设置高的时候,图片宽度自适应 + AUTO_WIDTH =10, + //设置了宽和高,图片按照自身宽高显示 + AUTO =11 } @@ -884,7 +905,7 @@ export class ScaleTypeHelper { ScaleTypeHelper.drawNone(context, source, imageWidth, imageHeight, imageOffsetX, imageOffsetY) break; default: - ScaleTypeHelper.drawNone(context, source, imageWidth, imageHeight, imageOffsetX, imageOffsetY) + ScaleTypeHelper.drawCenter(context, source, imageWidth, imageHeight, compWidth, compHeight, imageOffsetX, imageOffsetY) break }