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() { build() {
Scroll() { Scroll() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 }) // ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
// ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption }) // ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 }) // ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 }) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 })
// Scroll() { // Scroll() {
// Text(this.progresshint).fontSize(15) // Text(this.progresshint).fontSize(15)
// }.width(300).height(200) // }.width(300).height(200)

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

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

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

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

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

@ -126,7 +126,7 @@ struct TestAllCacheInfoPage {
Scroll() { Scroll() {
Text(this.cacheinfo3).fontSize(15) Text(this.cacheinfo3).fontSize(15)
}.width(300).height(200) }.width(300).height(200)
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 }) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
Button("ImageKnifeComponent加载网络资源获取缓存信息").width(300).height(25) Button("ImageKnifeComponent加载网络资源获取缓存信息").width(300).height(25)
.onClick(() => { .onClick(() => {
@ -148,7 +148,7 @@ struct TestAllCacheInfoPage {
Scroll() { Scroll() {
Text(this.cacheinfo4).fontSize(15) Text(this.cacheinfo4).fontSize(15)
}.width(300).height(200) }.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({left:15}).backgroundColor(Color.Grey)
} }
.margin({top:15}) .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}) Text('下面为展示图片区域').margin({top:5})
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){ 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) }.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}) Text("下面为展示图片区域").margin({top:5})
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){ 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) }.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}) Text("下面为展示图片区域").margin({top:5})
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){ 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) }.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 }) Text("下面为展示图片区域").margin({ top: 5 })
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 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) }.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 }) Text("下面为展示图片区域").margin({ top: 5 })
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 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) }.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 }) .margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 }) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
} }
@ -293,7 +293,7 @@ struct TestPreloadPage {
} }
.margin({ top: 15 }) .margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption }) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
} }
@ -371,7 +371,7 @@ struct TestPreloadPage {
} }
.margin({ top: 15 }) .margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 }) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 })
} }
@ -449,7 +449,7 @@ struct TestPreloadPage {
} }
.margin({ top: 15 }) .margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 }) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 })
} }
@ -527,7 +527,7 @@ struct TestPreloadPage {
} }
.margin({ top: 15 }) .margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption5 }) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption5 })
} }
@ -605,7 +605,7 @@ struct TestPreloadPage {
} }
.margin({ top: 15 }) .margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption6 }) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption6 })
} }
} }

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

@ -23,22 +23,18 @@ import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle'
@Component @Component
export struct ImageKnifeComponent { export struct ImageKnifeComponent {
@Watch('watchImageKnifeOption') @Link imageKnifeOption: ImageKnifeOption; @Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption;
@State componentWidth: string = '100%'
@State componentHeight: string = '100%'
drawLifeCycle: IDrawLifeCycle
@State gifAutoPlay?:boolean = true;
autoPlay: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 settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private hasDisplayRetryholder = false; private hasDisplayRetryholder = false;
private lastWidth:number = 0
private lastHeight:number = 0
private currentWidth: number = 0 private currentWidth: number = 0
private currentHeight: number = 0 private currentHeight: number = 0
@ -85,24 +81,28 @@ export struct ImageKnifeComponent {
} }
} }
private canvasHasReady:boolean = false;
build() { build() {
Canvas(this.context) Canvas(this.context)
.width(this.componentWidth) .width('100%')
.height(this.componentHeight) .height('100%')
.onAreaChange((oldValue: Area, newValue: Area) => { .onAreaChange((oldValue: Area, newValue: Area) => {
this.currentWidth = newValue.width as number this.currentWidth = newValue.width as number
this.currentHeight = newValue.height as number this.currentHeight = newValue.height as number
console.log('onAreaChange stack currentWidth =' + this.currentWidth + ' currentHeight=' + this.currentHeight) if(this.currentWidth <=0 || this.currentHeight <=0 ){
if (this.onAreaCount > 0) { // 存在宽或者高为0,此次重回无意义,无需进行request请求
this.onAreaCount--; }else{
this.imageKnifeExecute() 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(() => { .onReady(() => {
this.canvasHasReady = true;
}) })
.onClick((event:ClickEvent) => { .onClick((event:ClickEvent) => {
// 需要将点击事件回传 // 需要将点击事件回传
@ -117,41 +117,46 @@ export struct ImageKnifeComponent {
watchImageKnifeOption() { watchImageKnifeOption() {
console.log('watchImageKnifeOption is happened!') console.log('watchImageKnifeOption is happened!')
// if (this.imageKnifeOption.sizeAnimate) {
if (this.imageKnifeOption.sizeAnimate) { // animateTo(this.imageKnifeOption.sizeAnimate, () => {
animateTo(this.imageKnifeOption.sizeAnimate, () => { // this.resetGifData();
this.resetGifData(); // this.whetherWaitSize();
this.whetherWaitSize(); // })
}) // } else {
} else {
this.resetGifData(); this.resetGifData();
this.whetherWaitSize(); this.whetherWaitSize();
} // }
} }
whetherWaitSize() { whetherWaitSize() {
this.componentWidth = this.imageKnifeOption.size.width if(this.currentHeight <= 0 || this.currentWidth <= 0){
this.componentHeight = this.imageKnifeOption.size.height // 宽或者高没有高度,需要等待canvas组件初始化完成
if (this.newSizeEqualPreSize(this.imageKnifeOption.size)) { }else{
console.log('whetherWaitSize 宽高不变 直接发送请求') console.log('whetherWaitSize 宽高有效 直接发送请求')
this.imageKnifeExecute() 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: { // newSizeEqualPreSize(newSize: {
width: string, // width: string,
height: string // height: string
}): boolean { // }): boolean {
if (this.preSize.width == newSize.width && this.preSize.height == newSize.height) { // if (this.preSize.width == newSize.width && this.preSize.height == newSize.height) {
return true; // return true;
} // }
return false; // return false;
} // }
retryClick() { retryClick() {
this.hasDisplayRetryholder = false; this.hasDisplayRetryholder = false;
@ -160,9 +165,6 @@ export struct ImageKnifeComponent {
aboutToAppear() { aboutToAppear() {
console.log('imageKnifeComponent aboutToAppear happened!') console.log('imageKnifeComponent aboutToAppear happened!')
this.onAreaCount++;
this.componentWidth = this.imageKnifeOption.size.width
this.componentHeight = this.imageKnifeOption.size.height
} }
configNecessary(request: RequestOption) { configNecessary(request: RequestOption) {
@ -173,13 +175,13 @@ export struct ImageKnifeComponent {
return false; return false;
}) })
if (this.imageKnifeOption.size) { // if (this.imageKnifeOption.size) {
let realSize = { let realSize = {
width: this.currentWidth, width: this.currentWidth,
height: this.currentHeight height: this.currentHeight
} }
request.setImageViewSize(realSize) request.setImageViewSize(realSize)
} // }
} }
configCacheStrategy(request: RequestOption) { configCacheStrategy(request: RequestOption) {
@ -261,7 +263,10 @@ export struct ImageKnifeComponent {
} }
displayPlaceholder(data: ImageKnifeData) { 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, if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayPlaceholder', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
@ -280,7 +285,10 @@ export struct ImageKnifeComponent {
} }
displayProgress(percent: number) { 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, if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayProgress', this.context, percent, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
@ -299,7 +307,10 @@ export struct ImageKnifeComponent {
} }
displayThumbSizeMultiplier(data: ImageKnifeData) { 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, if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayThumbSizeMultiplier', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
@ -318,7 +329,10 @@ export struct ImageKnifeComponent {
} }
displayMainSource(data: ImageKnifeData) { 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, if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayMainSource', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
@ -337,6 +351,11 @@ export struct ImageKnifeComponent {
} }
displayRetryholder(data: ImageKnifeData) { 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, if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayRetryholder', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
@ -354,7 +373,10 @@ export struct ImageKnifeComponent {
} }
displayErrorholder(data: ImageKnifeData) { 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, if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayErrorholder', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(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 { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle'
import { ScaleType } from '../imageknife/ImageKnifeComponent' import { ScaleType } from '../imageknife/ImageKnifeComponent'
@Observed
export class ImageKnifeOption { export class ImageKnifeOption {
// 组件大小
size: {
width: string,
height: string
};
// 主图资源 // 主图资源
loadSrc: string | PixelMap | Resource; loadSrc: string | PixelMap | Resource;
@ -86,7 +82,7 @@ export class ImageKnifeOption {
} }
// 变换相关 // 变换相关 不推荐使用该接口 建议直接使用transformation transformations这2个接口实现
transform?: { transform?: {
transformType: number, transformType: number,
blur?: number, blur?: number,
@ -122,16 +118,9 @@ export class ImageKnifeOption {
// 输出缓存相关内容和信息 // 输出缓存相关内容和信息
allCacheInfoCallback?: IAllCacheInfoCallback; 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() { constructor() {