floraachy
/
ImageKnife
mirror of https://gitee.com/openharmony-tpc/ImageKnife.git
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

ImageKnife新增图片宽高自适应功能 

Signed-off-by: 张欢 <zhanghuan165@h-partners.com>
This commit is contained in:
张欢 2024-03-19 10:22:17 +08:00
parent 5b97cdf856
commit 2753ef46de
7 changed files with 220 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -1,3 +1,6 @@
## 2.1.2-rc.11
- ImageKnife新增图片宽高自适应功能
## 2.1.2-rc.10
- 修复部分gif图片识别成静态图
- 修复同一张图片发送多次请求

19
entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
View File

@ -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 }) {

56
entry/src/main/ets/pages/testImageKnifeAutoHeightPage.ets Normal file
View File

@ -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)
})
}
}
}
}

56
entry/src/main/ets/pages/testImageKnifeAutoPage.ets Normal file
View File

@ -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)
})
}
}
}
}

57
entry/src/main/ets/pages/testImageKnifeAutoWidthPage.ets Normal file
View File

@ -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)
})
}
}
}
}

5
entry/src/main/resources/base/profile/main_pages.json
View File

@ -39,6 +39,9 @@
"pages/testImageKnifeRouter1",
"pages/testImageKnifeRouter2",
"pages/RequestOptionLoadImage",
"pages/testImageKnifeHttpRequestHeader"
"pages/testImageKnifeHttpRequestHeader",
"pages/testImageKnifeAutoPage",
"pages/testImageKnifeAutoWidthPage",
"pages/testImageKnifeAutoHeightPage"
]
}

29
library/src/main/ets/components/imageknife/ImageKnifeComponent.ets
View File

@ -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
}