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

1.@Link 替换为 @ObjectLink 

2.ImageKnife的通用组件属性 sizeAnimate backgroundColor 和 width height不再维护,交给了业务链式调用相关接口。
3.ImageKnifeComponent 再次重构,适配了OpenHarmony自定义组件支持链式调用组件通用属性和事件以及动画的能力

Signed-off-by: zhoulisheng1 <zhoulisheng1@huawei.com>
This commit is contained in:
zhoulisheng1 2022-12-04 23:42:38 -08:00
parent 079d395284
commit 70b6d47d88
14 changed files with 111 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
entry/src/main/ets/pages/frescoImageTestCasePage.ets
View File

@ -58,10 +58,10 @@ struct FrescoImageTestCasePage {
build() {
Scroll() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
// ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption })
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 })
// Scroll() {
// Text(this.progresshint).fontSize(15)
// }.width(300).height(200)

8
entry/src/main/ets/pages/frescoRetryTestCasePage.ets
View File

@ -64,10 +64,10 @@ struct FrescoImageTestCasePage {
build() {
Scroll() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
// ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption })
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 })
}
}
.width('100%')

4
entry/src/main/ets/pages/index.ets
View File

@ -52,7 +52,7 @@ struct IndexFunctionDemo {
errorholderSrc: $r('app.media.icon_failed')
}
}).margin({ top: 5, left: 3 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
}.width('100%').backgroundColor(Color.Pink)
Text("简单示例2：加载一张网络gif图片").fontSize(15)
@ -68,7 +68,7 @@ struct IndexFunctionDemo {
displayProgress:true,
}
}).margin({ top: 5, left: 3 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 })
}.width('100%').backgroundColor(Color.Pink)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

8
entry/src/main/ets/pages/showErrorholderTestCasePage.ets
View File

@ -52,10 +52,10 @@ struct ShowErrorholderTestCasePage {
build() {
Scroll() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 })
}
}
.width('100%')

4
entry/src/main/ets/pages/testAllCacheInfoPage.ets
View File

@ -126,7 +126,7 @@ struct TestAllCacheInfoPage {
Scroll() {
Text(this.cacheinfo3).fontSize(15)
}.width(300).height(200)
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
Button("ImageKnifeComponent加载网络资源获取缓存信息").width(300).height(25)
.onClick(() => {
@ -148,7 +148,7 @@ struct TestAllCacheInfoPage {
Scroll() {
Text(this.cacheinfo4).fontSize(15)
}.width(300).height(200)
ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
}
}

2
entry/src/main/ets/pages/testGifDontAnimatePage.ets
View File

@ -83,7 +83,7 @@ struct TestGifDontAnimatePage {
}).margin({left:15}).backgroundColor(Color.Grey)
}
.margin({top:15})
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
}
}

2
entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets
View File

@ -181,7 +181,7 @@ struct TestImageKnifeOptionChangedPage {
Text('下面为展示图片区域').margin({top:5})
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
}.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)

2
entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets
View File

@ -89,7 +89,7 @@ struct TestImageKnifeOptionChangedPage2 {
Text("下面为展示图片区域").margin({top:5})
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
}.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)

2
entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets
View File

@ -230,7 +230,7 @@ struct TestImageKnifeOptionChangedPage3 {
Text("下面为展示图片区域").margin({top:5})
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
}.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)

2
entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets
View File

@ -102,7 +102,7 @@ struct TestImageKnifeOptionChangedPage4 {
Text("下面为展示图片区域").margin({ top: 5 })
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
}.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink)
}

2
entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets
View File

@ -89,7 +89,7 @@ struct TestImageKnifeOptionChangedPage5 {
Text("下面为展示图片区域").margin({ top: 5 })
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
}.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink)
}

12
entry/src/main/ets/pages/testPreloadPage.ets
View File

@ -213,7 +213,7 @@ struct TestPreloadPage {
}
.margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
}
@ -293,7 +293,7 @@ struct TestPreloadPage {
}
.margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
}
@ -371,7 +371,7 @@ struct TestPreloadPage {
}
.margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 })
}
@ -449,7 +449,7 @@ struct TestPreloadPage {
}
.margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 })
}
@ -527,7 +527,7 @@ struct TestPreloadPage {
}
.margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption5 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption5 })
}
@ -605,7 +605,7 @@ struct TestPreloadPage {
}
.margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption6 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption6 })
}
}

134
imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets
View File

@ -23,22 +23,18 @@ import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle'
@Component
export struct ImageKnifeComponent {
@Watch('watchImageKnifeOption') @Link imageKnifeOption: ImageKnifeOption;
@State componentWidth: string = '100%'
@State componentHeight: string = '100%'
drawLifeCycle: IDrawLifeCycle
@Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption;
@State gifAutoPlay?:boolean = true;
autoPlay:boolean = true
// 有效onAreaChanged触发计数
private onAreaCount: number = 0
private preSize: {
width: string,
height: string
} = { width: '0', height: '0' }
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private hasDisplayRetryholder = false;
private lastWidth:number = 0
private lastHeight:number = 0
private currentWidth: number = 0
private currentHeight: number = 0
@ -85,24 +81,28 @@ export struct ImageKnifeComponent {
}
}
private canvasHasReady:boolean = false;
build() {
Canvas(this.context)
.width(this.componentWidth)
.height(this.componentHeight)
.width('100%')
.height('100%')
.onAreaChange((oldValue: Area, newValue: Area) => {
this.currentWidth = newValue.width as number
this.currentHeight = newValue.height as number
console.log('onAreaChange stack currentWidth =' + this.currentWidth + ' currentHeight=' + this.currentHeight)
if (this.onAreaCount > 0) {
this.onAreaCount--;
if(this.currentWidth <=0 || this.currentHeight <=0 ){
// 存在宽或者高为0,此次重回无意义,无需进行request请求
}else{
if(this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth){
// 宽高发生了变化
console.log('onAreaChange isValid Canvas currentWidth =' + this.currentWidth + ' currentHeight=' + this.currentHeight)
this.lastWidth = this.currentWidth
this.lastHeight = this.currentHeight
this.imageKnifeExecute()
}
}
})
.backgroundColor(this.imageKnifeOption.backgroundColor ? this.imageKnifeOption.backgroundColor : Color.White)
.margin(this.imageKnifeOption.margin ? this.imageKnifeOption.margin : { left: 0, top: 0, right: 0, bottom: 0 })
.onReady(() => {
this.canvasHasReady = true;
})
.onClick((event:ClickEvent) => {
// 需要将点击事件回传
@ -117,41 +117,46 @@ export struct ImageKnifeComponent {
watchImageKnifeOption() {
console.log('watchImageKnifeOption is happened!')
if (this.imageKnifeOption.sizeAnimate) {
animateTo(this.imageKnifeOption.sizeAnimate, () => {
// if (this.imageKnifeOption.sizeAnimate) {
// animateTo(this.imageKnifeOption.sizeAnimate, () => {
// this.resetGifData();
// this.whetherWaitSize();
// })
// } else {
this.resetGifData();
this.whetherWaitSize();
})
} else {
this.resetGifData();
this.whetherWaitSize();
}
// }
}
whetherWaitSize() {
this.componentWidth = this.imageKnifeOption.size.width
this.componentHeight = this.imageKnifeOption.size.height
if (this.newSizeEqualPreSize(this.imageKnifeOption.size)) {
console.log('whetherWaitSize 宽高不变 直接发送请求')
if(this.currentHeight <= 0 || this.currentWidth <= 0){
// 宽或者高没有高度,需要等待canvas组件初始化完成
}else{
console.log('whetherWaitSize 宽高有效 直接发送请求')
this.imageKnifeExecute()
} else {
this.onAreaCount++;
// waitSize changed
this.preSize = this.imageKnifeOption.size
console.log('whetherWaitSize 宽高改变 等待组件回调onAreaChange后发送请求')
}
// this.componentWidth = this.imageKnifeOption.size.width
// this.componentHeight = this.imageKnifeOption.size.height
// if (this.newSizeEqualPreSize(this.imageKnifeOption.size)) {
// console.log('whetherWaitSize 宽高不变 直接发送请求')
// this.imageKnifeExecute()
// } else {
// this.onAreaCount++;
// // waitSize changed
// this.preSize = this.imageKnifeOption.size
// console.log('whetherWaitSize 宽高改变 等待组件回调onAreaChange后发送请求')
// }
}
newSizeEqualPreSize(newSize: {
width: string,
height: string
}): boolean {
if (this.preSize.width == newSize.width && this.preSize.height == newSize.height) {
return true;
}
return false;
}
// newSizeEqualPreSize(newSize: {
// width: string,
// height: string
// }): boolean {
// if (this.preSize.width == newSize.width && this.preSize.height == newSize.height) {
// return true;
// }
// return false;
// }
retryClick() {
this.hasDisplayRetryholder = false;
@ -160,9 +165,6 @@ export struct ImageKnifeComponent {
aboutToAppear() {
console.log('imageKnifeComponent aboutToAppear happened!')
this.onAreaCount++;
this.componentWidth = this.imageKnifeOption.size.width
this.componentHeight = this.imageKnifeOption.size.height
}
configNecessary(request: RequestOption) {
@ -173,13 +175,13 @@ export struct ImageKnifeComponent {
return false;
})
if (this.imageKnifeOption.size) {
// if (this.imageKnifeOption.size) {
let realSize = {
width: this.currentWidth,
height: this.currentHeight
}
request.setImageViewSize(realSize)
}
// }
}
configCacheStrategy(request: RequestOption) {
@ -261,7 +263,10 @@ export struct ImageKnifeComponent {
}
displayPlaceholder(data: ImageKnifeData) {
if(!this.canvasHasReady){
console.log('Canvas is not Initialized! displayPlaceholder is Failed!')
return;
}
if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayPlaceholder', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId)
@ -280,7 +285,10 @@ export struct ImageKnifeComponent {
}
displayProgress(percent: number) {
if(!this.canvasHasReady){
console.log('Canvas is not Initialized! displayProgress is Failed!')
return;
}
if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayProgress', this.context, percent, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId)
@ -299,7 +307,10 @@ export struct ImageKnifeComponent {
}
displayThumbSizeMultiplier(data: ImageKnifeData) {
if(!this.canvasHasReady){
console.log('Canvas is not Initialized! displayThumbSizeMultiplier is Failed!')
return;
}
if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayThumbSizeMultiplier', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId)
@ -318,7 +329,10 @@ export struct ImageKnifeComponent {
}
displayMainSource(data: ImageKnifeData) {
if(!this.canvasHasReady){
console.log('Canvas is not Initialized! displayMainSource is Failed!')
return;
}
if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayMainSource', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId)
@ -337,6 +351,11 @@ export struct ImageKnifeComponent {
}
displayRetryholder(data: ImageKnifeData) {
if(!this.canvasHasReady){
console.log('Canvas is not Initialized! displayRetryholder is Failed!')
return;
}
if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayRetryholder', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId)
@ -354,7 +373,10 @@ export struct ImageKnifeComponent {
}
displayErrorholder(data: ImageKnifeData) {
if(!this.canvasHasReady){
console.log('Canvas is not Initialized! displayErrorholder is Failed!')
return;
}
if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayErrorholder', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId)

19
imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets
View File

@ -23,12 +23,8 @@ import { AllCacheInfo, IAllCacheInfoCallback } from '../imageknife/interface/IAl
import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle'
import { ScaleType } from '../imageknife/ImageKnifeComponent'
@Observed
export class ImageKnifeOption {
// 组件大小
size: {
width: string,
height: string
};
// 主图资源
loadSrc: string | PixelMap | Resource;
@ -86,7 +82,7 @@ export class ImageKnifeOption {
}
// 变换相关
// 变换相关 不推荐使用该接口 建议直接使用transformation transformations这2个接口实现
transform?: {
transformType: number,
blur?: number,
@ -122,16 +118,9 @@ export class ImageKnifeOption {
// 输出缓存相关内容和信息
allCacheInfoCallback?: IAllCacheInfoCallback;
imageFit?: ImageFit;
backgroundColor?: Color | number | string | Resource;
margin?: {
top?: number | string | Resource,
right?: number | string | Resource,
bottom?: number | string | Resource,
left?: number | string | Resource
} | number | string | Resource
sizeAnimate?: AnimateParam
// sizeAnimate?: AnimateParam 由业务自定义不再支持
constructor() {