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

1.通用属性和通用事件能力,从ImageKnifeComponent剥离,解除耦合 

2.pages目录中所有测试的页面,ImageKnifeComponent的入参ImageKnifeOption发生了改变

Signed-off-by: zhoulisheng1 <zhoulisheng1@huawei.com>
This commit is contained in:
zhoulisheng1 2022-12-06 23:09:05 -08:00
parent 791cf55158
commit 40af0d2285
13 changed files with 198 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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) // 排列方向

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

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

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

@ -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%')

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

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

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

@ -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%')

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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