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

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

Merge pull request !143 from zhanghuan633/master
This commit is contained in:
openharmony_ci 2024-03-26 04:24:16 +00:00 committed by Gitee
parent 598b3eaf58 504e2ec6ca
commit 00f77d9cc5
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
8 changed files with 279 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -4,6 +4,7 @@
- 修复进度条问题
- 修复单帧gif图片加载失败
- removeRunning删除running队列log设置开关
- ImageKnife新增图片宽高自适应功能
## 2.1.2-rc.10
- 修复部分gif图片识别成静态图

6
README.md
View File

@ -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 # 数据切换测试,组件动画

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

@ -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('测试图片抗锯齿')

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

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

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

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

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

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

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

@ -40,6 +40,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

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