diff --git a/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets b/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets index 07fab70..85c4084 100644 --- a/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets +++ b/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets @@ -62,8 +62,8 @@ struct BasicTestFeatureAbilityPage { List({ space: 20, initialIndex: 0 }) { ForEach(this.options, (item) => { ListItem() { - ImageKnifeComponent({imageKnifeOption:item}) - }.editable(true) + ImageKnifeComponent({imageKnifeOption:item}).width(300).height(300) + } }, item => item.loadSrc) } .listDirection(Axis.Vertical) // 排列方向 diff --git a/entry/src/main/ets/pages/frescoImageTestCasePage.ets b/entry/src/main/ets/pages/frescoImageTestCasePage.ets index 997704f..c12ee29 100644 --- a/entry/src/main/ets/pages/frescoImageTestCasePage.ets +++ b/entry/src/main/ets/pages/frescoImageTestCasePage.ets @@ -25,7 +25,7 @@ struct FrescoImageTestCasePage { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), displayProgress: true @@ -33,7 +33,7 @@ struct FrescoImageTestCasePage { @State ImageKnifeOption: ImageKnifeOption = { loadSrc: "https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), displayProgress: true @@ -41,7 +41,7 @@ struct FrescoImageTestCasePage { @State imageKnifeOption3: ImageKnifeOption = { loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), displayProgress: true @@ -49,7 +49,7 @@ struct FrescoImageTestCasePage { @State imageKnifeOption4: ImageKnifeOption = { loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), displayProgress: true, @@ -62,6 +62,8 @@ struct FrescoImageTestCasePage { // ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }) // ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }) + .width(300) + .height(300) // Scroll() { // Text(this.progresshint).fontSize(15) // }.width(300).height(200) diff --git a/entry/src/main/ets/pages/frescoRetryTestCasePage.ets b/entry/src/main/ets/pages/frescoRetryTestCasePage.ets index d8fe743..b44bfba 100644 --- a/entry/src/main/ets/pages/frescoRetryTestCasePage.ets +++ b/entry/src/main/ets/pages/frescoRetryTestCasePage.ets @@ -23,7 +23,7 @@ struct FrescoImageTestCasePage { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), retryholderSrc: $r('app.media.icon_retry'), @@ -33,7 +33,7 @@ struct FrescoImageTestCasePage { @State ImageKnifeOption: ImageKnifeOption = { loadSrc: "https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), retryholderSrc: $r('app.media.icon_retry'), @@ -43,7 +43,7 @@ struct FrescoImageTestCasePage { @State imageKnifeOption3: ImageKnifeOption = { loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), retryholderSrc: $r('app.media.icon_retry'), @@ -53,7 +53,7 @@ struct FrescoImageTestCasePage { @State imageKnifeOption4: ImageKnifeOption = { loadSrc: "https://hbimg.huabanimg.com/testRetryxxxx", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), retryholderSrc: $r('app.media.icon_retry'), @@ -68,6 +68,8 @@ struct FrescoImageTestCasePage { // ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }) // ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }) + .width(300) + .height(300) } } .width('100%') diff --git a/entry/src/main/ets/pages/index.ets b/entry/src/main/ets/pages/index.ets index 3b7f00e..d3a0cc4 100644 --- a/entry/src/main/ets/pages/index.ets +++ b/entry/src/main/ets/pages/index.ets @@ -25,7 +25,7 @@ struct IndexFunctionDemo { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: $r('app.media.icon'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed') }; @@ -33,7 +33,7 @@ struct IndexFunctionDemo { @State imageKnifeOption2: ImageKnifeOption = { loadSrc: $r('app.media.icon'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed') }; @@ -47,12 +47,12 @@ struct IndexFunctionDemo { .onClick(() => { this.imageKnifeOption1 = { loadSrc: $r('app.media.pngSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed') } }).margin({ top: 5, left: 3 }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300) }.width('100%').backgroundColor(Color.Pink) Text("简单示例2：加载一张网络gif图片").fontSize(15) @@ -62,13 +62,13 @@ struct IndexFunctionDemo { .onClick(() => { this.imageKnifeOption2 = { loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), displayProgress:true, } }).margin({ top: 5, left: 3 }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300) }.width('100%').backgroundColor(Color.Pink) Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { diff --git a/entry/src/main/ets/pages/showErrorholderTestCasePage.ets b/entry/src/main/ets/pages/showErrorholderTestCasePage.ets index 42f504e..ad82adf 100644 --- a/entry/src/main/ets/pages/showErrorholderTestCasePage.ets +++ b/entry/src/main/ets/pages/showErrorholderTestCasePage.ets @@ -23,28 +23,28 @@ struct ShowErrorholderTestCasePage { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: "https://thirdwx.qlogo.cn/mmopen/xxxxx", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), }; - @State ImageKnifeOption: ImageKnifeOption = + @State imageKnifeOption: ImageKnifeOption = { loadSrc: "https://hbimg.huabanimg.com/xxxxx", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), }; @State imageKnifeOption3: ImageKnifeOption = { loadSrc: "https://hbimg.huabanimg.com/xxxxx", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), }; @State imageKnifeOption4: ImageKnifeOption = { loadSrc: "https://hbimg.huabanimg.com/xxxxx", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), }; @@ -52,10 +52,10 @@ struct ShowErrorholderTestCasePage { build() { Scroll() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }).width(300).height(300) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }).width(300).height(300) } } .width('100%') diff --git a/entry/src/main/ets/pages/testAllCacheInfoPage.ets b/entry/src/main/ets/pages/testAllCacheInfoPage.ets index 66b5db1..a2f4123 100644 --- a/entry/src/main/ets/pages/testAllCacheInfoPage.ets +++ b/entry/src/main/ets/pages/testAllCacheInfoPage.ets @@ -45,23 +45,23 @@ struct TestAllCacheInfoPage { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: $r('app.media.pngSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{top:15}, + transform: { transformType:TransformType.RotateImageTransformation, rotateImage:180 }, allCacheInfoCallback:this.allCacheInfoCallback1 }; - @State ImageKnifeOption: ImageKnifeOption = + @State imageKnifeOption: ImageKnifeOption = { loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{top:15}, + transform: { transformType:TransformType.RotateImageTransformation, rotateImage:180 @@ -112,10 +112,10 @@ struct TestAllCacheInfoPage { this.imageKnifeOption1 = { loadSrc: $r('app.media.pngSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { top: 15 }, + transform: { transformType:TransformType.RotateImageTransformation, rotateImage:this.imageKnifeComponentAngle @@ -131,13 +131,13 @@ struct TestAllCacheInfoPage { Button("ImageKnifeComponent加载网络资源获取缓存信息").width(300).height(25) .onClick(() => { this.imageKnifeComponentAngle = this.imageKnifeComponentAngle + 45; - this.ImageKnifeOption = + this.imageKnifeOption = { loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { top: 15 }, + transform: { transformType:TransformType.RotateImageTransformation, rotateImage:this.imageKnifeComponentAngle @@ -148,7 +148,7 @@ struct TestAllCacheInfoPage { Scroll() { Text(this.cacheinfo4).fontSize(15) }.width(300).height(200) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300) } } diff --git a/entry/src/main/ets/pages/testGifDontAnimatePage.ets b/entry/src/main/ets/pages/testGifDontAnimatePage.ets index b8d3107..b9ec490 100644 --- a/entry/src/main/ets/pages/testGifDontAnimatePage.ets +++ b/entry/src/main/ets/pages/testGifDontAnimatePage.ets @@ -23,10 +23,8 @@ struct TestGifDontAnimatePage { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:15,top:15,right:15,bottom:15} + errorholderSrc: $r('app.media.icon_failed') }; @@ -38,10 +36,9 @@ struct TestGifDontAnimatePage { .onClick(() => { this.imageKnifeOption1 = { loadSrc: $r('app.media.gifSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } } }).margin({left:15}).backgroundColor(Color.Grey) @@ -49,10 +46,8 @@ struct TestGifDontAnimatePage { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: $r('app.media.gifSample'), - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:15,top:15,right:15,bottom:15}, dontAnimateFlag:true } @@ -64,26 +59,24 @@ struct TestGifDontAnimatePage { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700', - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:15,top:15,right:15,bottom:15} }; }).margin({left:15}).backgroundColor(Color.Grey) Button('网络资源gif静态') .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700', - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:15,top:15,right:15,bottom:15}, dontAnimateFlag:true }; }).margin({left:15}).backgroundColor(Color.Grey) } .margin({top:15}) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) + .width(300) + .height(300) } } diff --git a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets index 47e964a..a0a31b3 100644 --- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets +++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets @@ -25,10 +25,10 @@ struct TestImageKnifeOptionChangedPage { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + }; @@ -40,10 +40,10 @@ struct TestImageKnifeOptionChangedPage { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + }; }).margin({left:5}).backgroundColor(Color.Blue) @@ -51,10 +51,10 @@ struct TestImageKnifeOptionChangedPage { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: $r('app.media.pngSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + }; }).margin({left:5}).backgroundColor(Color.Blue) @@ -62,10 +62,10 @@ struct TestImageKnifeOptionChangedPage { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: $r('app.media.bmpSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + }; }).margin({left:5}).backgroundColor(Color.Blue) @@ -73,10 +73,9 @@ struct TestImageKnifeOptionChangedPage { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + errorholderSrc: $r('app.media.icon_failed') }; }).margin({left:5}).backgroundColor(Color.Blue) @@ -84,10 +83,9 @@ struct TestImageKnifeOptionChangedPage { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: $r('app.media.svgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + errorholderSrc: $r('app.media.icon_failed') }; }).margin({left:5}).backgroundColor(Color.Blue) @@ -95,10 +93,9 @@ struct TestImageKnifeOptionChangedPage { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: $r('app.media.gifSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + errorholderSrc: $r('app.media.icon_failed') }; }).margin({left:5}).backgroundColor(Color.Blue) @@ -109,60 +106,54 @@ struct TestImageKnifeOptionChangedPage { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + errorholderSrc: $r('app.media.icon_failed') }; }).margin({left:5}).backgroundColor(Color.Blue) Button('png') .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + errorholderSrc: $r('app.media.icon_failed') }; }).margin({left:5}).backgroundColor(Color.Blue) Button('bmp') .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: 'https://img-blog.csdn.net/20140514114029140', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + errorholderSrc: $r('app.media.icon_failed') }; }).margin({left:5}).backgroundColor(Color.Blue) Button('webp') .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + errorholderSrc: $r('app.media.icon_failed') }; }).margin({left:5}).backgroundColor(Color.Blue) Button('svg') .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: 'http://design-svc.fat.lunz.cn/StaticFiles/BP9999999772/BV9999999422/SA9999998420/30df266a-485e-411e-b178-b9fb1d8e0748.svg', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + errorholderSrc: $r('app.media.icon_failed') }; }).margin({left:5}).backgroundColor(Color.Blue) Button('gif') .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5} + errorholderSrc: $r('app.media.icon_failed') }; }).margin({left:5}).backgroundColor(Color.Blue) @@ -170,10 +161,9 @@ struct TestImageKnifeOptionChangedPage { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: "https://img13.360buyimg.com/n1/jfs/t1/220646/38/10395/30916/61d6e061E1a6d91c8/c0a9a67e726dd7a4.jpg.dpg", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, + errorholderSrc: $r('app.media.icon_failed') }; }).margin({left:5}).backgroundColor(Color.Blue) } @@ -182,6 +172,8 @@ struct TestImageKnifeOptionChangedPage { Text('下面为展示图片区域').margin({top:5}) Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){ ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) + .width(300) + .height(300) }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink) diff --git a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets index 61aab30..8c90a6e 100644 --- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets +++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets @@ -24,10 +24,10 @@ struct TestImageKnifeOptionChangedPage2 { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, + thumbSizeMultiplier:0.1 }; @@ -40,10 +40,10 @@ struct TestImageKnifeOptionChangedPage2 { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, + thumbSizeMultiplier:0.1, transformation:new RotateImageTransformation(180) }; @@ -52,10 +52,10 @@ struct TestImageKnifeOptionChangedPage2 { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, + thumbSizeMultiplier:0.1, transformations:[new RotateImageTransformation(180)] }; @@ -64,10 +64,10 @@ struct TestImageKnifeOptionChangedPage2 { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: "https://img-blog.csdn.net/20140514114029140", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, + thumbSizeMultiplier:0.1, transformations:[new GrayscaleTransformation()] }; @@ -76,10 +76,10 @@ struct TestImageKnifeOptionChangedPage2 { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, + thumbSizeMultiplier:0.1, transformations:[new SketchFilterTransformation()] }; @@ -89,7 +89,7 @@ struct TestImageKnifeOptionChangedPage2 { Text("下面为展示图片区域").margin({top:5}) Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){ - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300) }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink) diff --git a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets index 17c7e23..6b0d443 100644 --- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets +++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets @@ -27,10 +27,11 @@ struct TestImageKnifeOptionChangedPage3 { { loadSrc: $r('app.media.jpgSample'), mainScaleType: ScaleType.FIT_CENTER, - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), }; + @State compWidht:number = 300 + @State compHeight:number = 300 build() { @@ -42,46 +43,48 @@ struct TestImageKnifeOptionChangedPage3 { this.imageKnifeOption1 = { loadSrc: $r('app.media.jpgSample'), mainScaleType: ScaleType.FIT_CENTER, - size: { width: '350', height: '350' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, thumbSizeMultiplier:0.1, transformation:new RotateImageTransformation(180), - sizeAnimate: { - duration: 500, - curve: Curve.EaseInOut, - delay: 100, - iterations: 1, - playMode:PlayMode.Normal, - onFinish:()=>{ - console.log('play end!') - } - } }; + animateTo({ + duration: 500, + curve: Curve.EaseInOut, + delay: 100, + iterations: 1, + playMode:PlayMode.Normal, + onFinish:()=>{ + console.log('play end!') + } + },()=>{ + this.compHeight = 350 + this.compWidht = 350 + }) }).margin({left:5}).backgroundColor(Color.Blue) Button("本地png") .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: $r('app.media.pngSample'), mainScaleType: ScaleType.FIT_CENTER, - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, thumbSizeMultiplier:0.1, transformation:new RotateImageTransformation(180), - sizeAnimate: { - duration: 500, - curve: Curve.EaseInOut, - delay: 100, - iterations: 1, - playMode: PlayMode.Normal, - onFinish: () => { - console.log('play end!') - } - } }; + animateTo({ + duration: 500, + curve: Curve.EaseInOut, + delay: 100, + iterations: 1, + playMode:PlayMode.Normal, + onFinish:()=>{ + console.log('play end!') + } + },()=>{ + this.compHeight = 400 + this.compWidht = 300 + }) }).margin({left:5}).backgroundColor(Color.Blue) }.margin({top:15}) Flex({direction:FlexDirection.Row}){ @@ -90,46 +93,48 @@ struct TestImageKnifeOptionChangedPage3 { this.imageKnifeOption1 = { loadSrc: $r('app.media.bmpSample'), mainScaleType: ScaleType.FIT_CENTER, - size: { width: '100', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, thumbSizeMultiplier:0.1, transformations:[new GrayscaleTransformation()], - sizeAnimate: { - duration: 500, - curve: Curve.EaseInOut, - delay: 100, - iterations: 1, - playMode: PlayMode.Normal, - onFinish: () => { - console.log('play end!') - } - } }; + animateTo({ + duration: 500, + curve: Curve.EaseInOut, + delay: 100, + iterations: 1, + playMode:PlayMode.Normal, + onFinish:()=>{ + console.log('play end!') + } + },()=>{ + this.compHeight = 250 + this.compWidht = 350 + }) }).margin({left:5}).backgroundColor(Color.Blue) Button("本地webp") .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: $r('app.media.webpSample'), mainScaleType: ScaleType.FIT_CENTER, - size: { width: '300', height: '100' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, thumbSizeMultiplier:0.1, transformations:[new SketchFilterTransformation()], - sizeAnimate: { - duration: 500, - curve: Curve.EaseInOut, - delay: 100, - iterations: 1, - playMode: PlayMode.Normal, - onFinish: () => { - console.log('play end!') - } - } }; + animateTo({ + duration: 500, + curve: Curve.EaseInOut, + delay: 100, + iterations: 1, + playMode:PlayMode.Normal, + onFinish:()=>{ + console.log('play end!') + } + },()=>{ + this.compHeight = 400 + this.compWidht = 400 + }) }).margin({left:5}).backgroundColor(Color.Blue) }.margin({top:15}) Flex({direction:FlexDirection.Row}){ @@ -137,21 +142,9 @@ struct TestImageKnifeOptionChangedPage3 { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB", - size: { width: '200', height: '200' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, displayProgress:true, - sizeAnimate: { - duration: 500, - curve: Curve.EaseInOut, - delay: 100, - iterations: 1, - playMode: PlayMode.Normal, - onFinish: () => { - console.log('play end!') - } - }, thumbSizeMultiplier:0.1, transformation:new RotateImageTransformation(180) }; @@ -160,22 +153,10 @@ struct TestImageKnifeOptionChangedPage3 { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png", - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, displayProgress:true, thumbSizeMultiplier:0.1, - sizeAnimate: { - duration: 500, - curve: Curve.EaseInOut, - delay: 100, - iterations: 1, - playMode: PlayMode.Normal, - onFinish: () => { - console.log('play end!') - } - }, transformations:[new RotateImageTransformation(180)] }; }).margin({left:5}).backgroundColor(Color.Blue) @@ -185,22 +166,10 @@ struct TestImageKnifeOptionChangedPage3 { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: "https://img-blog.csdn.net/20140514114029140", - size: { width: '400', height: '400' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, displayProgress:true, thumbSizeMultiplier:0.1, - sizeAnimate: { - duration: 500, - curve: Curve.EaseInOut, - delay: 100, - iterations: 1, - playMode: PlayMode.Normal, - onFinish: () => { - console.log('play end!') - } - }, transformations:[new GrayscaleTransformation()] }; }).margin({left:5}).backgroundColor(Color.Blue) @@ -208,29 +177,17 @@ struct TestImageKnifeOptionChangedPage3 { .onClick(()=>{ this.imageKnifeOption1 = { loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp", - size: { width: '500', height: '500' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin:{left:5,top:5,right:5,bottom:5}, displayProgress:true, thumbSizeMultiplier:0.1, - sizeAnimate: { - duration: 500, - curve: Curve.EaseInOut, - delay: 100, - iterations: 1, - playMode: PlayMode.Normal, - onFinish: () => { - console.log('play end!') - } - }, }; }).margin({left:5}).backgroundColor(Color.Blue) }.margin({top:15}) Text("下面为展示图片区域").margin({top:5}) Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){ - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(this.compWidht).height(this.compHeight) }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink) diff --git a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets index 87180d2..2b97fd5 100644 --- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets +++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets @@ -31,10 +31,10 @@ struct TestImageKnifeOptionChangedPage4 { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 5, top: 5, right: 5, bottom: 5 }, + thumbSizeMultiplier: 0.1, drawLifeCycle:this.createViewLifeCycle() }; @@ -48,10 +48,10 @@ struct TestImageKnifeOptionChangedPage4 { .onClick(() => { this.imageKnifeOption1 = { loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 5, top: 5, right: 5, bottom: 5 }, + thumbSizeMultiplier: 0.1, transformation: new RotateImageTransformation(180), drawLifeCycle:this.createViewLifeCycle() @@ -61,10 +61,10 @@ struct TestImageKnifeOptionChangedPage4 { .onClick(() => { this.imageKnifeOption1 = { loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 5, top: 5, right: 5, bottom: 5 }, + thumbSizeMultiplier: 0.1, transformations: [new RotateImageTransformation(180)], drawLifeCycle:this.createViewLifeCycle() @@ -76,10 +76,10 @@ struct TestImageKnifeOptionChangedPage4 { .onClick(() => { this.imageKnifeOption1 = { loadSrc: "https://img-blog.csdn.net/20140514114029140", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 5, top: 5, right: 5, bottom: 5 }, + thumbSizeMultiplier: 0.1, transformations: [new GrayscaleTransformation()], drawLifeCycle:this.createViewLifeCycle() @@ -89,10 +89,10 @@ struct TestImageKnifeOptionChangedPage4 { .onClick(() => { this.imageKnifeOption1 = { loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp", - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 5, top: 5, right: 5, bottom: 5 }, + thumbSizeMultiplier: 0.1, transformations: [new SketchFilterTransformation()], drawLifeCycle:this.createViewLifeCycle() @@ -102,7 +102,7 @@ struct TestImageKnifeOptionChangedPage4 { Text("下面为展示图片区域").margin({ top: 5 }) Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300) }.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink) } diff --git a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets index 1739548..25cae43 100644 --- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets +++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets @@ -32,7 +32,6 @@ struct TestImageKnifeOptionChangedPage5 { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval) @@ -47,7 +46,6 @@ struct TestImageKnifeOptionChangedPage5 { .onClick(() => { this.imageKnifeOption1 = { loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB", - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval) @@ -57,7 +55,6 @@ struct TestImageKnifeOptionChangedPage5 { .onClick(() => { this.imageKnifeOption1 = { loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png", - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval) @@ -69,7 +66,6 @@ struct TestImageKnifeOptionChangedPage5 { .onClick(() => { this.imageKnifeOption1 = { loadSrc: "https://img-blog.csdn.net/20140514114029140", - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval) @@ -79,7 +75,6 @@ struct TestImageKnifeOptionChangedPage5 { .onClick(() => { this.imageKnifeOption1 = { loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp", - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval) @@ -89,7 +84,7 @@ struct TestImageKnifeOptionChangedPage5 { Text("下面为展示图片区域").margin({ top: 5 }) Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300) }.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink) } diff --git a/entry/src/main/ets/pages/testPreloadPage.ets b/entry/src/main/ets/pages/testPreloadPage.ets index 1da8e2e..b7cf66d 100644 --- a/entry/src/main/ets/pages/testPreloadPage.ets +++ b/entry/src/main/ets/pages/testPreloadPage.ets @@ -24,51 +24,51 @@ struct TestPreloadPage { @State imageKnifeOption1: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; - @State ImageKnifeOption: ImageKnifeOption = + @State imageKnifeOption: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; @State imageKnifeOption3: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; @State imageKnifeOption4: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; @State imageKnifeOption5: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; @State imageKnifeOption6: ImageKnifeOption = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; build() { @@ -99,10 +99,10 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption1 = { loadSrc: $r('app.media.gifSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + } }) @@ -132,10 +132,8 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption1 = { loadSrc: $r('app.media.gifSample'), - size: { width: '300', height: '300' }, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 }, dontAnimateFlag: true } @@ -169,10 +167,10 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption1 = { loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; }) .margin({ left: 15 }) @@ -201,10 +199,9 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption1 = { loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 }, dontAnimateFlag: true }; }) @@ -213,7 +210,7 @@ struct TestPreloadPage { } .margin({ top: 15 }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(200).height(200) } @@ -240,12 +237,12 @@ struct TestPreloadPage { Button('本地资源svg') .onClick(() => { - this.ImageKnifeOption = { + this.imageKnifeOption = { loadSrc: $r('app.media.svgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + } }) @@ -278,12 +275,12 @@ struct TestPreloadPage { Button('网络资源svg') .onClick(() => { - this.ImageKnifeOption = { + this.imageKnifeOption = { loadSrc: 'http://design-svc.fat.lunz.cn/StaticFiles/BP9999999772/BV9999999422/SA9999998420/4dc8463e-8ac6-4eb4-862c-783bf486a242.svg', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; }) .margin({ left: 15 }) @@ -293,7 +290,7 @@ struct TestPreloadPage { } .margin({ top: 15 }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(200).height(200) } @@ -322,10 +319,10 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption3 = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + } }) @@ -360,10 +357,10 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption3 = { loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; }) .margin({ left: 15 }) @@ -371,7 +368,7 @@ struct TestPreloadPage { } .margin({ top: 15 }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }).width(200).height(200) } @@ -400,10 +397,10 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption4 = { loadSrc: $r('app.media.bmpSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + } }) @@ -438,10 +435,10 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption4 = { loadSrc: 'https://img-blog.csdn.net/20140514114029140', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; }) .margin({ left: 15 }) @@ -449,7 +446,7 @@ struct TestPreloadPage { } .margin({ top: 15 }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }).width(200).height(200) } @@ -478,10 +475,10 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption5 = { loadSrc: $r('app.media.pngSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + } }) @@ -516,10 +513,10 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption5 = { loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; }) .margin({ left: 15 }) @@ -527,7 +524,7 @@ struct TestPreloadPage { } .margin({ top: 15 }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption5 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption5 }).width(200).height(200) } @@ -556,10 +553,10 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption6 = { loadSrc: $r('app.media.jpgSample'), - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + } }) @@ -594,10 +591,10 @@ struct TestPreloadPage { .onClick(() => { this.imageKnifeOption6 = { loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB', - size: { width: '300', height: '300' }, + placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), - margin: { left: 15, top: 15, right: 15, bottom: 15 } + }; }) .margin({ left: 15 }) @@ -605,7 +602,7 @@ struct TestPreloadPage { } .margin({ top: 15 }) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption6 }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption6 }).width(200).height(200) } }