From 1b05a2aa2d8e695c3161122cb81446208473c368 Mon Sep 17 00:00:00 2001 From: zgf Date: Mon, 5 Aug 2024 15:24:59 +0800 Subject: [PATCH] =?UTF-8?q?ComponentV2=E8=A3=85=E9=A5=B0=E5=99=A8=E9=80=82?= =?UTF-8?q?=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zgf --- CHANGELOG.md | 5 + README.md | 62 +-- .../src/main/ets/pages/ImageAnimatorPage.ets | 12 +- .../main/ets/pages/ImageTransformation.ets | 16 +- entry/src/main/ets/pages/Index.ets | 2 +- entry/src/main/ets/pages/ListPage.ets | 4 +- entry/src/main/ets/pages/LoadStatePage.ets | 26 +- entry/src/main/ets/pages/LongImagePage.ets | 8 +- .../src/main/ets/pages/ManyPhotoShowPage.ets | 8 +- entry/src/main/ets/pages/ObjectFitPage.ets | 18 +- .../src/main/ets/pages/SignatureTestPage.ets | 18 +- entry/src/main/ets/pages/SingleImage.ets | 28 +- entry/src/main/ets/pages/TestCommonImage.ets | 8 +- .../main/ets/pages/TestErrorHolderPage.ets | 16 +- entry/src/main/ets/pages/TestHeader.ets | 6 +- .../main/ets/pages/TestHspPreLoadImage.ets | 2 +- entry/src/main/ets/pages/TestImageFlash.ets | 28 +- entry/src/main/ets/pages/TestIsUrlExist.ets | 10 +- .../ets/pages/TestPrefetchToFileCache.ets | 8 +- entry/src/main/ets/pages/TestRemoveCache.ets | 12 +- .../main/ets/pages/TestSetCustomImagePage.ets | 18 +- .../main/ets/pages/TestWriteCacheStage.ets | 26 +- entry/src/main/ets/pages/TransformPage.ets | 8 +- entry/src/main/ets/pages/User.ets | 70 +-- entry/src/main/ets/pages/UserPage.ets | 56 +- .../main/ets/pages/dataShareUriLoadPage.ets | 12 +- entry/src/main/ets/pages/transformsPage.ets | 494 ------------------ library/src/main/ets/ImageKnife.ets | 10 +- library/src/main/ets/ImageKnifeOption.ets | 95 +++- .../ImageKnifeAnimatorComponent.ets | 36 +- .../ets/components/ImageKnifeComponent.ets | 34 +- sharedlibrary/src/main/ets/pages/Index.ets | 6 +- 32 files changed, 376 insertions(+), 786 deletions(-) delete mode 100644 entry/src/main/ets/pages/transformsPage.ets diff --git a/CHANGELOG.md b/CHANGELOG.md index 8af876a..07dce31 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## 3.1.0-rc.0 +- ComponentV2装饰器适配 +- imageKnifeOption={...}用法改为new ImageKnifeOption({...}) +- animatorOption={...}用法改为new AnimatorOption({...}) + ## 3.0.1 - 修复animatorOption属性设置初始化值失效 - 网络请求code为206、204时返回arraybuffer diff --git a/README.md b/README.md index 3f50768..b616b70 100644 --- a/README.md +++ b/README.md @@ -57,12 +57,12 @@ await ImageKnife.getInstance().initFileCache(context, 256, 256 * 1024 * 1024) ``` ImageKnifeComponent({ - ImageKnifeOption: { + ImageKnifeOption: new ImageKnifeOption({ loadSrc: $r("app.media.app_icon"), placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.app_icon"), objectFit: ImageFit.Auto - } + }) }).width(100).height(100) ``` @@ -70,12 +70,12 @@ ImageKnifeComponent({ ``` ImageKnifeComponent({ - ImageKnifeOption: { + ImageKnifeOption: new ImageKnifeOption({ loadSrc: this.localFile, placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.app_icon"), objectFit: ImageFit.Auto - } + }) }).width(100).height(100) ``` @@ -83,12 +83,12 @@ ImageKnifeComponent({ ``` ImageKnifeComponent({ - ImageKnifeOption: { + ImageKnifeOption: new ImageKnifeOption({ loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png", placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.app_icon"), objectFit: ImageFit.Auto - } + }) }).width(100).height(100) ``` @@ -96,13 +96,13 @@ ImageKnifeComponent({ ``` ImageKnifeComponent({ - ImageKnifeOption: { + ImageKnifeOption: new ImageKnifeOption({ loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg", placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.app_icon"), objectFit: ImageFit.Auto, customGetImage: custom - } + }) }).width(100).height(100) // 自定义实现图片获取方法，如自定义网络下载 @@ -118,33 +118,33 @@ async function custom(context: Context, src: string | PixelMap | Resource): Prom ``` ImageKnifeComponent({ - ImageKnifeOption: { + ImageKnifeOption: new ImageKnifeOption({ loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png", progressListener:(progress:number)=>{console.info("ImageKinfe:: call back progress = " + progress)} - } + }) }).width(100).height(100) ``` #### 6.支持option传入border，设置边框，圆角 ``` -ImageKnifeComponent({ ImageKnifeOption: +ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption( { loadSrc: $r("app.media.rabbit"), border: {radius:50} - } + }) }).width(100).height(100) ``` #### 7.支持option图片变换 ``` -ImageKnifeComponent({ ImageKnifeOption: +ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption( { loadSrc: $r("app.media.rabbit"), border: {radius:50}, transformation: new BlurTransformation(3) - } + }) }).width(100).height(100) ``` 多种组合变换用法 @@ -154,14 +154,14 @@ let transformations: collections.Array = new collections transformations.push(new BlurTransformation(5)); transformations.push(new BrightnessTransformation(0.2)); ImageKnifeComponent({ - { + imageKnifeOption: new ImageKnifeOption({ loadSrc: $r('app.media.pngSample'), placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.app_icon"), objectFit: ImageFit.Contain, border: { radius: { topLeft: 50, bottomRight: 50 } }, // 圆角设置 transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined // 图形变换组 -} +}) }).width(300) .height(300) .rotate({ angle: 90 }) // 旋转90度 @@ -172,12 +172,12 @@ ImageKnifeComponent({ 圆形裁剪变换示例 ``` -ImageKnifeComponent({ ImageKnifeOption: +ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption( { loadSrc: $r('app.media.pngSample'), objectFit: ImageFit.Cover, border: { radius: 150 } -} +}) }).width(300) .height(300) ``` @@ -185,12 +185,12 @@ ImageKnifeComponent({ ImageKnifeOption: 圆形裁剪带边框变换示例 ``` -ImageKnifeComponent({ ImageKnifeOption: +ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption( { loadSrc: $r('app.media.pngSample'), objectFit: ImageFit.Cover, border: { radius: 150, color: Color.Red, width: 5 } -} +}) }).width(300) .height(300) ``` @@ -199,9 +199,9 @@ ImageKnifeComponent({ ImageKnifeOption: ``` ImageKnifeComponent({ - imageKnifeOption: { + imageKnifeOption: new ImageKnifeOption({ loadSrc: $r('app.media.pngSample') - } + }) }).width(300) .height(300) .contrast(12) @@ -211,9 +211,9 @@ ImageKnifeComponent({ ``` ImageKnifeComponent({ - imageKnifeOption: { + imageKnifeOption: new ImageKnifeOption({ loadSrc: $r('app.media.pngSample') - } + }) }).width(300) .height(300) .rotate({angle:90}) @@ -223,7 +223,7 @@ ImageKnifeComponent({ #### 8.监听图片加载成功与失败 ``` -ImageKnifeComponent({ ImageKnifeOption: +ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption( { loadSrc: $r("app.media.rabbit"), onLoadListener:{ @@ -242,27 +242,27 @@ ImageKnifeComponent({ ImageKnifeOption: console.info(err) } } - } + }) }).width(100).height(100) ``` #### 9.ImageKnifeComponent - syncLoad 设置是否同步加载图片，默认是异步加载。建议加载尺寸较小的本地图片时将syncLoad设为true，因为耗时较短，在主线程上执行即可 ``` ImageKnifeComponent({ - imageKnifeOption:{ + imageKnifeOption:new ImageKnifeOption({ loadSrc:$r("app.media.pngSample"), placeholderSrc:$r("app.media.loading") - },syncLoad:true + }),syncLoad:true }) ``` #### 10.ImageKnifeAnimatorComponent 示例 ``` ImageKnifeAnimatorComponent({ - imageKnifeOption:{ + imageKnifeOption:new ImageKnifeOption({ loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658", placeholderSrc:$r('app.media.loading'), errorholderSrc:$r('app.media.failed') - },animatorOption:this.animatorOption + }),animatorOption:this.animatorOption }).width(300).height(300).backgroundColor(Color.Orange).margin({top:30}) ``` ## 接口说明 @@ -352,7 +352,7 @@ ImageKnifeAnimatorComponent({ ## 约束与限制 在下述版本验证通过： -DevEco Studio 5.0 Canary3（5.0.3.221）--SDK:API12 +DevEco Studio 5.0 Canary3（5.0.3.502）--SDK:API12 (5.0.0.31) ## 贡献代码 diff --git a/entry/src/main/ets/pages/ImageAnimatorPage.ets b/entry/src/main/ets/pages/ImageAnimatorPage.ets index 9269280..784e5f8 100644 --- a/entry/src/main/ets/pages/ImageAnimatorPage.ets +++ b/entry/src/main/ets/pages/ImageAnimatorPage.ets @@ -12,15 +12,15 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { AnimatorOption, ImageKnifeAnimatorComponent } from "@ohos/libraryimageknife" +import { AnimatorOption, ImageKnifeAnimatorComponent,ImageKnifeOption } from "@ohos/libraryimageknife" @Entry -@Component +@ComponentV2 struct ImageAnimatorPage { - @State animatorOption: AnimatorOption = { + @Local animatorOption: AnimatorOption = new AnimatorOption({ state: AnimationStatus.Running, iterations: -1 - } + }) build() { Column(){ Flex(){ @@ -44,11 +44,11 @@ struct ImageAnimatorPage { }) } ImageKnifeAnimatorComponent({ - imageKnifeOption:{ + imageKnifeOption:new ImageKnifeOption({ loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658", placeholderSrc:$r('app.media.loading'), errorholderSrc:$r('app.media.failed') - },animatorOption:this.animatorOption + }),animatorOption:this.animatorOption }).width(300).height(300).backgroundColor(Color.Orange).margin({top:30}) }.width("100%").height("100%") } diff --git a/entry/src/main/ets/pages/ImageTransformation.ets b/entry/src/main/ets/pages/ImageTransformation.ets index 844ed62..9226619 100644 --- a/entry/src/main/ets/pages/ImageTransformation.ets +++ b/entry/src/main/ets/pages/ImageTransformation.ets @@ -35,17 +35,17 @@ import { import { collections } from '@kit.ArkTS' @Entry -@Component +@ComponentV2 struct ImageTransformation { - @State imageKnifeOption: ImageKnifeOption = { + @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({ loadSrc: $r('app.media.pngSample'), placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.app_icon"), objectFit: ImageFit.Contain - } - @State isRound: boolean = false; - @State isContrast: boolean = false; - @State isRotate: boolean = false; + }) + @Local isRound: boolean = false; + @Local isContrast: boolean = false; + @Local isRotate: boolean = false; isBlur: boolean = false isBrightness: boolean = false isGrayScale: boolean = false; @@ -412,14 +412,14 @@ struct ImageTransformation { if (this.isMask) { transformations.push(new MaskTransformation($r('app.media.mask_starfish'))); } - this.imageKnifeOption = { + this.imageKnifeOption = new ImageKnifeOption({ loadSrc: $r('app.media.pngSample'), placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.app_icon"), objectFit: ImageFit.Contain, border: { radius: this.isRound ? { topLeft: 50, bottomRight: 50 } : 0 }, transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined - } + }) if (this.isCropCircle) { this.imageKnifeOption.objectFit = ImageFit.Cover; this.imageKnifeOption.border = { radius: 150 }; diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index 3383f6a..e3e5074 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -15,7 +15,7 @@ import router from '@system.router'; @Entry -@Component +@ComponentV2 struct Index { diff --git a/entry/src/main/ets/pages/ListPage.ets b/entry/src/main/ets/pages/ListPage.ets index c604d97..1c6d614 100644 --- a/entry/src/main/ets/pages/ListPage.ets +++ b/entry/src/main/ets/pages/ListPage.ets @@ -15,11 +15,11 @@ import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife'; @Entry -@Component +@ComponentV2 struct ListPage { private data: string[] = [] - @State ImageKnifeOption: ImageKnifeOption = { loadSrc: $r('app.media.startIcon')} + @Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption({ loadSrc: $r('app.media.startIcon')}) aboutToAppear(): void { diff --git a/entry/src/main/ets/pages/LoadStatePage.ets b/entry/src/main/ets/pages/LoadStatePage.ets index 80c41a3..ca87944 100644 --- a/entry/src/main/ets/pages/LoadStatePage.ets +++ b/entry/src/main/ets/pages/LoadStatePage.ets @@ -16,12 +16,12 @@ import { ImageKnifeComponent, ImageKnifeOption } from "@ohos/libraryimageknife" import matrix4 from '@ohos.matrix4' @Entry -@Component +@ComponentV2 struct LoadStatePage { starTime:number = new Date().getTime() - @State ImageKnifeOption: ImageKnifeOption = { + @Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption({ loadSrc: $r("app.media.rabbit"), placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.app_icon"), @@ -35,14 +35,14 @@ struct LoadStatePage { }, }, border: { radius: 50 } - } - @State imageKnifeOption1: ImageKnifeOption = { + }) + @Local imageKnifeOption1: ImageKnifeOption = new ImageKnifeOption({ loadSrc: $r('app.media.startIcon') - } - @State message: string = "" - @State currentWidth: number = 200 - @State currentHeight: number = 200 - @State typeValue: string = "" + }) + @Local message: string = "" + @Local currentWidth: number = 200 + @Local currentHeight: number = 200 + @Local typeValue: string = "" build() { Column() { Text('测试失败场景请先关闭网络，并保证本地没有此网络图片的缓存') @@ -50,7 +50,7 @@ struct LoadStatePage { Row() { Button('测试失败/成功场景') .onClick(() => { - this.ImageKnifeOption = { + this.ImageKnifeOption = new ImageKnifeOption({ loadSrc: "https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png", placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.app_icon"), @@ -75,7 +75,7 @@ struct LoadStatePage { onComplete:(event)=>{ console.error("Load onComplete width:"+event?.width , " height:"+event?.height , " componentWidth:"+event?.componentWidth," componentHeight:" + event?.componentHeight); } - } + }) }) } .margin({ top: 20 }) @@ -83,7 +83,7 @@ struct LoadStatePage { ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption }).height(this.currentHeight).width(this.currentWidth) .margin({ top: 20 }) Button("自定义下载失败").onClick(()=>{ - this.imageKnifeOption1 = { + this.imageKnifeOption1 = new ImageKnifeOption({ loadSrc: "abc", placeholderSrc:$r('app.media.loading'), errorholderSrc:$r('app.media.failed'), @@ -93,7 +93,7 @@ struct LoadStatePage { this.message = "err:" + err } } - } + }) }).margin({ top: 20 }) Text(this.message).fontSize(20).margin({ top: 20 }) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).height(this.currentHeight).width(this.currentWidth) diff --git a/entry/src/main/ets/pages/LongImagePage.ets b/entry/src/main/ets/pages/LongImagePage.ets index c8f6e1f..0d09a96 100644 --- a/entry/src/main/ets/pages/LongImagePage.ets +++ b/entry/src/main/ets/pages/LongImagePage.ets @@ -12,10 +12,10 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { ImageKnifeComponent } from '@ohos/libraryimageknife' +import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife' @Entry -@Component +@ComponentV2 struct LongImagePage { build() { @@ -25,13 +25,13 @@ struct LongImagePage { // Image($r("app.media.aaa")).objectFit(ImageFit.Auto).width(200) ImageKnifeComponent({ - imageKnifeOption: { + imageKnifeOption: new ImageKnifeOption({ loadSrc:"https://wx2.sinaimg.cn/mw690/006HyQKGgy1hnqp08dw09j30u04twu0x.jpg", //src:$r("app.media.aaa"), placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.failed"), objectFit: ImageFit.Auto - } + }) }) } .height('100%') .width('100%') diff --git a/entry/src/main/ets/pages/ManyPhotoShowPage.ets b/entry/src/main/ets/pages/ManyPhotoShowPage.ets index 0719141..545b121 100644 --- a/entry/src/main/ets/pages/ManyPhotoShowPage.ets +++ b/entry/src/main/ets/pages/ManyPhotoShowPage.ets @@ -12,12 +12,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { ImageKnifeComponent } from '@ohos/libraryimageknife'; +import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife'; @Entry -@Component +@ComponentV2 struct ManyPhotoShowPage { private data: TestDataSource = new TestDataSource(); @@ -36,7 +36,7 @@ struct ManyPhotoShowPage { // loadSrc: item.thumbnail, // mainScaleType: ScaleType.FIT_XY, // } }) - ImageKnifeComponent({imageKnifeOption:{ + ImageKnifeComponent({imageKnifeOption:new ImageKnifeOption({ loadSrc: item.thumbnail, //src:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png", // src: this.localFile, @@ -44,7 +44,7 @@ struct ManyPhotoShowPage { errorholderSrc:$r("app.media.failed"), objectFit: ImageFit.Auto, border: {radius:50} - }}) + })}) } .width(56).height(56) //滤镜标题 diff --git a/entry/src/main/ets/pages/ObjectFitPage.ets b/entry/src/main/ets/pages/ObjectFitPage.ets index c86415f..7a1f2ab 100644 --- a/entry/src/main/ets/pages/ObjectFitPage.ets +++ b/entry/src/main/ets/pages/ObjectFitPage.ets @@ -15,49 +15,49 @@ import { ImageKnife, ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife' @Entry -@Component +@ComponentV2 struct ObjectFitPage { - @State imageKnifeOption: ImageKnifeOption = { + @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({ loadSrc: $r("app.media.app_icon"), placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.app_icon"), objectFit: ImageFit.Fill - } + }) build() { Column() { Button("主图Fill拉伸填充").onClick(()=>{ - this.imageKnifeOption = { + this.imageKnifeOption = new ImageKnifeOption({ loadSrc: $r("app.media.app_icon"), placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.app_icon"), objectFit: ImageFit.Fill - } + }) }) Button("占位图Contain保持比例填充").margin({top:10}).onClick(async () => { ImageKnife.getInstance().removeAllMemoryCache() await ImageKnife.getInstance().removeAllFileCache() - this.imageKnifeOption = { + this.imageKnifeOption = new ImageKnifeOption({ loadSrc: "https://wx2.sinaimg.cn/mw690/006HyQKGgy1hnqp08dw09j30u04twu0x.jpg", placeholderSrc: $r("app.media.app_icon"), errorholderSrc: $r("app.media.app_icon"), objectFit: ImageFit.Fill, placeholderObjectFit: ImageFit.Contain - } + }) }) Button("错误图None不变化").margin({top:10}).onClick(() => { - this.imageKnifeOption = { + this.imageKnifeOption = new ImageKnifeOption({ loadSrc: "http://xxxxx", placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.app_icon"), objectFit: ImageFit.Fill, errorholderObjectFit: ImageFit.None - } + }) }) ImageKnifeComponent({ diff --git a/entry/src/main/ets/pages/SignatureTestPage.ets b/entry/src/main/ets/pages/SignatureTestPage.ets index 42f49e4..d01ec45 100644 --- a/entry/src/main/ets/pages/SignatureTestPage.ets +++ b/entry/src/main/ets/pages/SignatureTestPage.ets @@ -16,18 +16,18 @@ import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife'; @Entry -@Component +@ComponentV2 struct SignatureTestPage { - @State imageKnifeOption1: ImageKnifeOption = + @Local imageKnifeOption1: ImageKnifeOption =new ImageKnifeOption( { loadSrc: $r('app.media.icon'), placeholderSrc:$r("app.media.loading"), - }; - @State imageKnifeOption2: ImageKnifeOption = + }); + @Local imageKnifeOption2: ImageKnifeOption =new ImageKnifeOption( { loadSrc: $r('app.media.icon'), placeholderSrc:$r("app.media.loading"), - }; + }); build() { Scroll() { @@ -37,11 +37,11 @@ struct SignatureTestPage { Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button("加载") .onClick(() => { - this.imageKnifeOption1 = { + this.imageKnifeOption1 = new ImageKnifeOption({ loadSrc: 'https://img-blog.csdn.net/20140514114029140', placeholderSrc:$r("app.media.loading"), signature: "1" - } + }) }).margin({ top: 5, left: 3 }) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300) }.width('100%').backgroundColor(Color.Pink) @@ -50,11 +50,11 @@ struct SignatureTestPage { Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button("加载") .onClick(() => { - this.imageKnifeOption2 = { + this.imageKnifeOption2 = new ImageKnifeOption({ loadSrc: 'https://img-blog.csdn.net/20140514114029140', placeholderSrc:$r("app.media.loading"), signature: new Date().getTime().toString() - } + }) }).margin({ top: 5, left: 3 }) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300) }.width('100%').backgroundColor(Color.Pink) diff --git a/entry/src/main/ets/pages/SingleImage.ets b/entry/src/main/ets/pages/SingleImage.ets index b7fc9b3..b92d6eb 100644 --- a/entry/src/main/ets/pages/SingleImage.ets +++ b/entry/src/main/ets/pages/SingleImage.ets @@ -12,19 +12,19 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { ImageKnifeComponent,BlurTransformation } from '@ohos/libraryimageknife'; +import { ImageKnifeComponent,BlurTransformation,ImageKnifeOption } from '@ohos/libraryimageknife'; import fs from '@ohos.file.fs'; import image from '@ohos.multimedia.image'; import { common2D, drawing } from '@kit.ArkGraphics2D'; @Entry -@Component +@ComponentV2 struct SingleImage { resource: string = "app.media.svgSample" scroller: Scroller = new Scroller; localFile: string = getContext(this).filesDir + "/icon.png" - @State pixelMap:PixelMap | undefined = undefined; - @State DrawingColorFilter: ColorFilter | undefined = undefined + @Local pixelMap:PixelMap | undefined = undefined; + @Local DrawingColorFilter: ColorFilter | undefined = undefined private color: common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; aboutToAppear(): void { // 拷贝本地文件 @@ -46,12 +46,12 @@ struct SingleImage { .fontSize(30) .fontWeight(FontWeight.Bold) ImageKnifeComponent({ - imageKnifeOption: { + imageKnifeOption: new ImageKnifeOption({ loadSrc: $r("app.media.svgSample"), placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.failed"), objectFit: ImageFit.Contain - } + }) }).width(100).height(100) .onClick(()=>{ this.DrawingColorFilter = drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN); @@ -60,48 +60,48 @@ struct SingleImage { .fontSize(30) .fontWeight(FontWeight.Bold) ImageKnifeComponent({ - imageKnifeOption: { + imageKnifeOption: new ImageKnifeOption({ loadSrc: this.localFile, placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.failed"), objectFit: ImageFit.Contain - } + }) }).width(100).height(100) Text("网络图片") .fontSize(30) .fontWeight(FontWeight.Bold) ImageKnifeComponent({ - imageKnifeOption: { + imageKnifeOption: new ImageKnifeOption({ loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png", placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.failed"), objectFit: ImageFit.Contain, progressListener:(progress:number)=>{console.info("ImageKnife:: call back progress = " + progress)} - } + }) }).width(100).height(100) Text("自定义下载") .fontSize(30) .fontWeight(FontWeight.Bold) ImageKnifeComponent({ - imageKnifeOption: { + imageKnifeOption: new ImageKnifeOption({ loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg", placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.failed"), objectFit: ImageFit.Contain, customGetImage: custom, transformation: new BlurTransformation(10) - } + }) }).width(100).height(100) Text("pixelMap加载图片") .fontSize(30) .fontWeight(FontWeight.Bold) ImageKnifeComponent({ - imageKnifeOption: { + imageKnifeOption: new ImageKnifeOption({ loadSrc: this.pixelMap!, placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.failed"), objectFit: ImageFit.Contain, - } + }) }).width(100).height(100) } .width('100%') diff --git a/entry/src/main/ets/pages/TestCommonImage.ets b/entry/src/main/ets/pages/TestCommonImage.ets index 669220c..66f3514 100644 --- a/entry/src/main/ets/pages/TestCommonImage.ets +++ b/entry/src/main/ets/pages/TestCommonImage.ets @@ -12,10 +12,10 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { ImageKnifeComponent } from '@ohos/libraryimageknife'; +import { ImageKnifeComponent ,ImageKnifeOption} from '@ohos/libraryimageknife'; @Entry -@Component +@ComponentV2 struct TestCommonImage { private data: Array = [] aboutToAppear(): void { @@ -30,13 +30,13 @@ struct TestCommonImage { FlowItem() { Column(){ ImageKnifeComponent({ - imageKnifeOption: { + imageKnifeOption: new ImageKnifeOption({ loadSrc: item, placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.failed"), objectFit: ImageFit.Contain, signature: "aaa" - } + }) }).width("50%").height(200) } }.height(200) diff --git a/entry/src/main/ets/pages/TestErrorHolderPage.ets b/entry/src/main/ets/pages/TestErrorHolderPage.ets index f49ab6c..0b716e2 100644 --- a/entry/src/main/ets/pages/TestErrorHolderPage.ets +++ b/entry/src/main/ets/pages/TestErrorHolderPage.ets @@ -12,34 +12,34 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { ImageKnifeComponent } from '@ohos/libraryimageknife' +import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife' @Entry -@Component +@ComponentV2 struct TestErrorHolderPage { build() { Column() { Text("ImageKnifeComponent1").fontSize(20) ImageKnifeComponent({ - imageKnifeOption: { + imageKnifeOption: new ImageKnifeOption({ loadSrc: "abc", errorholderSrc:$r('app.media.failed') - } + }) }).width(200).height(200) Text("ImageKnifeComponent2").fontSize(20) ImageKnifeComponent({ - imageKnifeOption: { + imageKnifeOption: new ImageKnifeOption({ loadSrc: "abc", errorholderSrc:$r('app.media.startIcon') - } + }) }).width(200).height(200) Text("ImageKnifeComponent2").fontSize(20) ImageKnifeComponent({ - imageKnifeOption: { + imageKnifeOption: new ImageKnifeOption({ loadSrc: "abc", errorholderSrc:$r('app.media.mask_starfish') - } + }) }).width(200).height(200) } .height('100%') .width('100%') diff --git a/entry/src/main/ets/pages/TestHeader.ets b/entry/src/main/ets/pages/TestHeader.ets index 9be198e..50027b0 100644 --- a/entry/src/main/ets/pages/TestHeader.ets +++ b/entry/src/main/ets/pages/TestHeader.ets @@ -15,9 +15,9 @@ import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife' @Entry -@Component +@ComponentV2 struct TestPrefetchToFileCachePage { - @State imageKnifeOption: ImageKnifeOption = { + @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({ loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658", placeholderSrc:$r('app.media.loading'), headerOption:[ @@ -26,7 +26,7 @@ struct TestPrefetchToFileCachePage { value:"单个" } ] - } + }) build() { Column() { diff --git a/entry/src/main/ets/pages/TestHspPreLoadImage.ets b/entry/src/main/ets/pages/TestHspPreLoadImage.ets index 16ff464..e1084b8 100644 --- a/entry/src/main/ets/pages/TestHspPreLoadImage.ets +++ b/entry/src/main/ets/pages/TestHspPreLoadImage.ets @@ -15,7 +15,7 @@ import { IndexComponent } from "@ohos/libraryimageknife" @Entry -@Component +@ComponentV2 struct TestHspPreLoadImage { build() { Column() { diff --git a/entry/src/main/ets/pages/TestImageFlash.ets b/entry/src/main/ets/pages/TestImageFlash.ets index 75144e0..e5ed578 100644 --- a/entry/src/main/ets/pages/TestImageFlash.ets +++ b/entry/src/main/ets/pages/TestImageFlash.ets @@ -12,9 +12,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { ImageKnifeComponent } from '@ohos/libraryimageknife' +import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife' -@Observed +@ObservedV2 export class MsgModel { id: string cId: string @@ -30,10 +30,10 @@ export class MsgModel { } -@Reusable -@Component +// @Reusable +@ComponentV2 export struct MsgItem { - count: number = 0 + @Param count: number = 0 private data: Array = [ "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg", "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg", @@ -59,37 +59,37 @@ export struct MsgItem { build(){ if (this.count % 2 == 0 && this.count <6){ ImageKnifeComponent({ - imageKnifeOption:{ + imageKnifeOption:new ImageKnifeOption({ loadSrc:$r("app.media.startIcon"), placeholderSrc:$r("app.media.loading") - },syncLoad:true + }),syncLoad:true }) }else if (this.count > 6 && this.count - 6 < this.data.length){ ImageKnifeComponent({ - imageKnifeOption:{ + imageKnifeOption:new ImageKnifeOption({ loadSrc:this.data[this.count - 6], placeholderSrc:$r("app.media.loading") - },syncLoad:true + }),syncLoad:true }) }else { ImageKnifeComponent({ - imageKnifeOption:{ + imageKnifeOption:new ImageKnifeOption({ loadSrc:$r("app.media.pngSample"), placeholderSrc:$r("app.media.loading") - },syncLoad:true + }),syncLoad:true }) } } } @Entry -@Component +@ComponentV2 struct ImageTestPage { count : number = 0 rCount: number = 0 scroller: Scroller = new Scroller() - @State list: MsgModel[] = [] - @State imageSize: number =100 + @Local list: MsgModel[] = [] + @Local imageSize: number =100 handAdd(){ this.count++ const msgItem = new MsgModel('add_id'+this.count, 'addBody'+this.count,'cId'+ this.count) diff --git a/entry/src/main/ets/pages/TestIsUrlExist.ets b/entry/src/main/ets/pages/TestIsUrlExist.ets index 1225edc..04e3714 100644 --- a/entry/src/main/ets/pages/TestIsUrlExist.ets +++ b/entry/src/main/ets/pages/TestIsUrlExist.ets @@ -15,15 +15,15 @@ import { ImageKnifeComponent, ImageKnife, ImageKnifeOption, CacheStrategy } from '@ohos/libraryimageknife' @Entry -@Component +@ComponentV2 struct TestIsUrlExist { - @State imageKnifeOption: ImageKnifeOption = { + @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({ loadSrc: $r('app.media.startIcon'), placeholderSrc: $r('app.media.loading'), errorholderSrc:$r('app.media.failed') - } - @State source: PixelMap | string | Resource = $r("app.media.startIcon") - @State source1: PixelMap | string | Resource = $r("app.media.startIcon") + }) + @Local source: PixelMap | string | Resource = $r("app.media.startIcon") + @Local source1: PixelMap | string | Resource = $r("app.media.startIcon") build() { Column() { diff --git a/entry/src/main/ets/pages/TestPrefetchToFileCache.ets b/entry/src/main/ets/pages/TestPrefetchToFileCache.ets index eb735a7..b59d1d5 100644 --- a/entry/src/main/ets/pages/TestPrefetchToFileCache.ets +++ b/entry/src/main/ets/pages/TestPrefetchToFileCache.ets @@ -15,19 +15,19 @@ import { ImageKnifeComponent,ImageKnife,ImageKnifeOption } from '@ohos/libraryimageknife' @Entry -@Component +@ComponentV2 struct TestPrefetchToFileCachePage { - @State imageKnifeOption: ImageKnifeOption = { + @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({ loadSrc:$r('app.media.startIcon'), placeholderSrc:$r('app.media.loading'), errorholderSrc:$r('app.media.failed') - } + }) async preload(url:string) { let fileCachePath = await ImageKnife.getInstance().preLoadCache(url) console.log("preload-fileCachePath=="+ fileCachePath) } async preload1(url:string) { - let fileCachePath = await ImageKnife.getInstance().preLoadCache({ loadSrc: url }) + let fileCachePath = await ImageKnife.getInstance().preLoadCache(new ImageKnifeOption({ loadSrc: url })) console.log("preload-fileCachePath1=="+ fileCachePath) } build() { diff --git a/entry/src/main/ets/pages/TestRemoveCache.ets b/entry/src/main/ets/pages/TestRemoveCache.ets index 13e7def..05370ae 100644 --- a/entry/src/main/ets/pages/TestRemoveCache.ets +++ b/entry/src/main/ets/pages/TestRemoveCache.ets @@ -15,16 +15,16 @@ import { ImageKnifeComponent, ImageKnife, ImageKnifeOption, CacheStrategy } from '@ohos/libraryimageknife' @Entry -@Component +@ComponentV2 struct TestRemoveCache { - @State imageKnifeOption: ImageKnifeOption = { + @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({ loadSrc: $r('app.media.startIcon'), placeholderSrc: $r('app.media.loading'), errorholderSrc:$r('app.media.failed') - } - @State source: PixelMap | string | Resource = $r("app.media.startIcon"); - @State source1: PixelMap | string | Resource = $r("app.media.startIcon"); - @State url: string = ''; + }) + @Local source: PixelMap | string | Resource = $r("app.media.startIcon"); + @Local source1: PixelMap | string | Resource = $r("app.media.startIcon"); + @Local url: string = ''; build() { Column() { diff --git a/entry/src/main/ets/pages/TestSetCustomImagePage.ets b/entry/src/main/ets/pages/TestSetCustomImagePage.ets index 809769f..2369de8 100644 --- a/entry/src/main/ets/pages/TestSetCustomImagePage.ets +++ b/entry/src/main/ets/pages/TestSetCustomImagePage.ets @@ -15,12 +15,12 @@ import { ImageKnifeComponent, ImageKnife, ImageKnifeOption } from '@ohos/libraryimageknife' @Entry -@Component +@ComponentV2 struct TestSetCustomImagePage { - @State imageKnifeOption: ImageKnifeOption = { + @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({ loadSrc: $r('app.media.startIcon'), placeholderSrc: $r('app.media.loading') - } + }) aboutToAppear(): void { ImageKnife.getInstance().setCustomGetImage(custom) } @@ -30,22 +30,22 @@ struct TestSetCustomImagePage { build() { Column() { Button("自定义下载a").onClick(()=>{ - this.imageKnifeOption = { + this.imageKnifeOption = new ImageKnifeOption({ loadSrc: "aaa", placeholderSrc: $r('app.media.loading') - } + }) }) Button("自定义下载b").onClick(()=>{ - this.imageKnifeOption = { + this.imageKnifeOption = new ImageKnifeOption({ loadSrc: "bbb", placeholderSrc: $r('app.media.loading') - } + }) }) Button("自定义下载c").onClick(()=>{ - this.imageKnifeOption = { + this.imageKnifeOption = new ImageKnifeOption({ loadSrc: "ccc", placeholderSrc: $r('app.media.loading') - } + }) }) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption diff --git a/entry/src/main/ets/pages/TestWriteCacheStage.ets b/entry/src/main/ets/pages/TestWriteCacheStage.ets index 6b0b203..e58d9da 100644 --- a/entry/src/main/ets/pages/TestWriteCacheStage.ets +++ b/entry/src/main/ets/pages/TestWriteCacheStage.ets @@ -15,55 +15,55 @@ import { ImageKnifeComponent,CacheStrategy,ImageKnifeOption } from '@ohos/libraryimageknife' @Entry -@Component +@ComponentV2 struct TestWriteCacheStage { - @State imageKnifeOption1: ImageKnifeOption = { + @Local imageKnifeOption1: ImageKnifeOption = new ImageKnifeOption({ loadSrc:$r('app.media.startIcon'), placeholderSrc:$r('app.media.loading'), errorholderSrc:$r('app.media.failed') - } - @State imageKnifeOption2: ImageKnifeOption = { + }) + @Local imageKnifeOption2: ImageKnifeOption = new ImageKnifeOption({ loadSrc:$r('app.media.startIcon'), placeholderSrc:$r('app.media.loading'), errorholderSrc:$r('app.media.failed') - } - @State imageKnifeOption3: ImageKnifeOption = { + }) + @Local imageKnifeOption3: ImageKnifeOption = new ImageKnifeOption({ loadSrc:$r('app.media.startIcon'), placeholderSrc:$r('app.media.loading'), errorholderSrc:$r('app.media.failed') - } + }) build() { Column() { Button("写入内存文件缓存").margin({top:10}).onClick(async ()=>{ - this.imageKnifeOption1 = { + this.imageKnifeOption1 = new ImageKnifeOption({ loadSrc:'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp', placeholderSrc:$r('app.media.loading'), errorholderSrc:$r('app.media.failed'), writeCacheStrategy:CacheStrategy.Default - } + }) }) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(200).height(200).margin({top:10}) Button("写入内存缓存").margin({top:10}).onClick(async ()=>{ - this.imageKnifeOption2 = { + this.imageKnifeOption2 = new ImageKnifeOption({ loadSrc:"https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB", placeholderSrc:$r('app.media.loading'), errorholderSrc:$r('app.media.failed'), writeCacheStrategy:CacheStrategy.Memory - } + }) }) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(200).height(200).margin({top:10}) Button("写入文件缓存").margin({top:10}).onClick(async ()=>{ - this.imageKnifeOption3 = { + this.imageKnifeOption3 = new ImageKnifeOption({ loadSrc:'https://img-blog.csdn.net/20140514114029140', placeholderSrc:$r('app.media.loading'), errorholderSrc:$r('app.media.failed'), writeCacheStrategy:CacheStrategy.File - } + }) }) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 diff --git a/entry/src/main/ets/pages/TransformPage.ets b/entry/src/main/ets/pages/TransformPage.ets index 7674156..55332d9 100644 --- a/entry/src/main/ets/pages/TransformPage.ets +++ b/entry/src/main/ets/pages/TransformPage.ets @@ -17,17 +17,17 @@ import matrix4 from '@ohos.matrix4' @Entry -@Component +@ComponentV2 struct TransformPage { private custom_scale:number = 1 - @State matrix1:object = matrix4.identity().scale({ x: 1, y: 1 }) - @State ImageKnifeOption: ImageKnifeOption = { + @Local matrix1:object = matrix4.identity().scale({ x: 1, y: 1 }) + @Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption({ loadSrc: $r("app.media.rabbit"), placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.app_icon"), objectFit: ImageFit.Contain, border: { radius: 50 } - } + }) build() { Column() { diff --git a/entry/src/main/ets/pages/User.ets b/entry/src/main/ets/pages/User.ets index 1e3e582..603b767 100644 --- a/entry/src/main/ets/pages/User.ets +++ b/entry/src/main/ets/pages/User.ets @@ -15,24 +15,50 @@ import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife' // const logger = new imUtils.logger.IMLogger('Avatar') - -class MyImageOption extends ImageKnifeOption { - account?: string +@ObservedV2 +export class MyStorage { + static instance:MyStorage | undefined = undefined + static getInstance(){ + if(MyStorage.instance == undefined) { + MyStorage.instance = new MyStorage() + } + return MyStorage.instance + } + @Trace WeLink_Mob_fontSize_multiple: number = 1 } -@Component +@ComponentV2 export struct UserAvatar { - @Prop @Watch('userInfoUpdate') userInfo: string = "" // @Prop userInfo: string = "" imgSize: number = 100 radius: number = 12 borderSize: number = 0 imgSizes: number = 1 - @State ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption() - @StorageProp('WeLink_Mob_fontSize_multiple') @Watch('updateImgSize') WeLink_Mob_fontSize_multiple: number = 0 + @Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption() scalable: boolean = true; - @State calcImgSize: number = 100 - + @Local calcImgSize: number = 100 + @Param userInfo: string = "" + @Monitor('userInfo') + userInfoUpdate() { + // if (uri === 'userInfo' && this.imageKnifeOption.account !== this.userInfo.contactId) return; + // // logger.info(`userInfoUpdate uri=${uri} oldAcc=${this.imageKnifeOption.loadSrc} nowAcc=${this.userInfo.externalHeadUrl}`) + // if (this.userInfo.externalHeadUrl === this.imageKnifeOption.loadSrc && this.userInfo.infoUpdateTime.getTime() + // .toString() === this.imageKnifeOption?.signature?.getKey()) return; + this.ImageKnifeOption = new ImageKnifeOption({ + //TODO:写死loadSRC，场景：变更组件大小，所有图片不显示 + loadSrc: this.userInfo, + placeholderSrc: $r('app.media.loading'), + errorholderSrc: $r('app.media.failed'), + border: { radius:20,width:5,color:$r('app.color.start_window_background') }, + objectFit:ImageFit.Contain + // signature: new ObjectKey(this.userInfo.infoUpdateTime.getTime().toString()) + }) + } + @Local storage: MyStorage = MyStorage.getInstance() + @Monitor('storage.WeLink_Mob_fontSize_multiple') + updateImgSize() { + this.setImageSize() + } aboutToAppear(): void { this.userInfoUpdate() this.setImageSize() @@ -41,39 +67,19 @@ export struct UserAvatar { setImageSize() { if (!this.scalable) { this.calcImgSize = this.imgSize - } else if (this.WeLink_Mob_fontSize_multiple < 0.9) { + } else if (this.storage.WeLink_Mob_fontSize_multiple < 0.9) { this.calcImgSize = this.imgSize * 0.9 - } else if (this.WeLink_Mob_fontSize_multiple > 1.6) { + } else if (this.storage.WeLink_Mob_fontSize_multiple > 1.6) { this.calcImgSize = this.imgSize * 1.6 } else { - this.calcImgSize = this.imgSize * this.WeLink_Mob_fontSize_multiple + this.calcImgSize = this.imgSize * this.storage.WeLink_Mob_fontSize_multiple } } - updateImgSize() { - this.setImageSize() - } - aboutToReuse(param: ESObject) { this.userInfoUpdate() } - userInfoUpdate() { - // if (uri === 'userInfo' && this.imageKnifeOption.account !== this.userInfo.contactId) return; - // // logger.info(`userInfoUpdate uri=${uri} oldAcc=${this.imageKnifeOption.loadSrc} nowAcc=${this.userInfo.externalHeadUrl}`) - // if (this.userInfo.externalHeadUrl === this.imageKnifeOption.loadSrc && this.userInfo.infoUpdateTime.getTime() - // .toString() === this.imageKnifeOption?.signature?.getKey()) return; - this.ImageKnifeOption = { - //TODO:写死loadSRC，场景：变更组件大小，所有图片不显示 - loadSrc: this.userInfo, - placeholderSrc: $r('app.media.loading'), - errorholderSrc: $r('app.media.failed'), - border: { radius:20,width:5,color:$r('app.color.start_window_background') }, - objectFit:ImageFit.Contain - // signature: new ObjectKey(this.userInfo.infoUpdateTime.getTime().toString()) - } - } - build() { Row() { // Image(this.imageKnifeOption.loadSrc) diff --git a/entry/src/main/ets/pages/UserPage.ets b/entry/src/main/ets/pages/UserPage.ets index ee210bc..30e711d 100644 --- a/entry/src/main/ets/pages/UserPage.ets +++ b/entry/src/main/ets/pages/UserPage.ets @@ -12,7 +12,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { UserAvatar } from './User' +import { MyStorage, UserAvatar } from './User' class CommonDataSource implements IDataSource { private dataArray: T[] = [] @@ -55,9 +55,9 @@ class CommonDataSource implements IDataSource { } } @Entry -@Component +@ComponentV2 struct Index { - @State hotCommendList:CommonDataSource = new CommonDataSource([]) + @Local hotCommendList:CommonDataSource = new CommonDataSource([]) private data:string[] = [ "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg", "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg", @@ -85,26 +85,42 @@ struct Index { 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp', ] aboutToAppear(): void { - this.hotCommendList.addData(this.hotCommendList.totalCount(),this.data) - AppStorage.set("WeLink_Mob_fontSize_multiple",1) + MyStorage.getInstance().WeLink_Mob_fontSize_multiple = 1 } build() { Column() { Button("bigger").onClick(()=>{ - AppStorage.set("WeLink_Mob_fontSize_multiple",1.6) + MyStorage.getInstance().WeLink_Mob_fontSize_multiple = 1.6 }) Button("small").onClick(()=>{ - AppStorage.set("WeLink_Mob_fontSize_multiple",0.8) + MyStorage.getInstance().WeLink_Mob_fontSize_multiple = 0.8 }) List(){ - LazyForEach(this.hotCommendList,(item:string)=>{ - ListItem(){ - ReuseImage({ - userInfo:item - }).width("100%").height("100%").backgroundColor(Color.Yellow) - }.width(200).height(200).margin({bottom:5}) - }) + // LazyForEach(this.hotCommendList,(item:string)=>{ + // ListItem(){ + // ReuseImage({ + // userInfo:item + // }).width("100%").height("100%").backgroundColor(Color.Yellow) + // }.width(200).height(200).margin({bottom:5}) + // }) + Repeat(this.data) + .each((repeatItem)=>{ + ListItem(){ + ReuseImage({ + userInfo:repeatItem.item + }).width("100%").height("100%").backgroundColor(Color.Yellow) + }.width(200).height(200).margin({bottom:5}).key("reuse") + }) + .key(item => item+"reuse") + .virtualScroll() + .template("1",(repeatItem)=>{ + ListItem(){ + ReuseImage({ + userInfo:repeatItem.item + }).width("100%").height("100%").backgroundColor(Color.Yellow) + }.width(200).height(200).margin({bottom:5}).key("reuse") + }) } // .cachedCount(20) .width("100%") @@ -115,13 +131,13 @@ struct Index { } -@Reusable -@Component +// @Reusable +@ComponentV2 struct ReuseImage { - @State userInfo:string = "" - aboutToReuse(params: ESObject): void { - this.userInfo = params.userInfo - } + @Param userInfo:string = "" + // aboutToReuse(params: ESObject): void { + // this.userInfo = params.userInfo + // } build() { Column(){ diff --git a/entry/src/main/ets/pages/dataShareUriLoadPage.ets b/entry/src/main/ets/pages/dataShareUriLoadPage.ets index bb71ac2..9e4aa06 100644 --- a/entry/src/main/ets/pages/dataShareUriLoadPage.ets +++ b/entry/src/main/ets/pages/dataShareUriLoadPage.ets @@ -18,15 +18,15 @@ import { photoAccessHelper } from '@kit.MediaLibraryKit'; @Entry -@Component +@ComponentV2 struct DataShareUriLoadPage { - @State imageKnifeOption1: ImageKnifeOption = - { + @Local imageKnifeOption1: ImageKnifeOption = + new ImageKnifeOption({ loadSrc: $r('app.media.icon'), placeholderSrc: $r('app.media.loading'), errorholderSrc: $r('app.media.failed') - }; + }); build() { @@ -43,10 +43,10 @@ struct DataShareUriLoadPage { let photoViewPicker = new photoAccessHelper.PhotoViewPicker(); let photoSelectResult: photoAccessHelper.PhotoSelectResult = await photoViewPicker.select(photoSelectOptions); uris = photoSelectResult.photoUris; - this.imageKnifeOption1 = { + this.imageKnifeOption1 = new ImageKnifeOption({ loadSrc: uris[0], placeholderSrc:$r('app.media.loading') - } + }) }).margin({ top: 5, left: 3 }) ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300) }.width('100%').backgroundColor(Color.Pink) diff --git a/entry/src/main/ets/pages/transformsPage.ets b/entry/src/main/ets/pages/transformsPage.ets deleted file mode 100644 index e06f22c..0000000 --- a/entry/src/main/ets/pages/transformsPage.ets +++ /dev/null @@ -1,494 +0,0 @@ -/* - * Copyright (C) 2024 Huawei Device Co., Ltd. - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import { - GrayscaleTransformation, - ImageKnifeComponent, - ImageKnifeOption, - RotateImageTransformation, - SketchFilterTransformation, - CropCircleTransformation, - ToonFilterTransform, - VignetteFilterTransform, - BaseTransform, - BlurTransformation, - BrightnessFilterTransformation, - InvertFilterTransformation, - CropCircleWithBorderTransformation, - CropSquareTransformation, - CropTransformation, - CropType, - ContrastFilterTransformation, - PixelationFilterTransformation, - RoundedCornersTransformation, - SepiaFilterTransformation, - MaskTransformation, - SwirlFilterTransformation, - KuwaharaFilterTransform -} from '@ohos/libraryimageknife' - -@Entry -@Component -struct transformsPage { - @State imageKnifeOption: ImageKnifeOption = - { - loadSrc: $r('app.media.jpgSample'), - placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed') - }; - @State option1: ImageKnifeOption = { - loadSrc: $r('app.media.pngSample'), - } - @State option2: ImageKnifeOption = { - loadSrc: $r('app.media.pngSample'), - } - private transformations: Array> = new Array(); - private blurTransformation: BlurTransformation = new BlurTransformation(15, 3); - private brightnessFilterTransformation: BrightnessFilterTransformation = new BrightnessFilterTransformation(0.5); - private contrastFilterTransformation: ContrastFilterTransformation = new ContrastFilterTransformation(2.0); - private cropCircleTransformation: CropCircleTransformation = new CropCircleTransformation(); - private cropCircleWithBorderTransformation: CropCircleWithBorderTransformation = - new CropCircleWithBorderTransformation(16, { r_color: 100, g_color: 100, b_color: 100 }); - private cropSquareTransformation: CropSquareTransformation = new CropSquareTransformation(); - private cropTransformation: CropTransformation = new CropTransformation(100, 100, CropType.CENTER); - private grayscaleTransformation: GrayscaleTransformation = new GrayscaleTransformation(); - private invertFilterTransformation: InvertFilterTransformation = new InvertFilterTransformation(); - private pixelationFilterTransformation: PixelationFilterTransformation = new PixelationFilterTransformation(5.0); - private rotateImageTransformation: RotateImageTransformation = new RotateImageTransformation(90); - private roundedCornersTransformation: RoundedCornersTransformation = new RoundedCornersTransformation({ - top_left: 5, - bottom_left: 5, - top_right: 5, - bottom_right: 5 - }); - private sepiaFilterTransformation: SepiaFilterTransformation = new SepiaFilterTransformation(); - private sketchFilterTransformation: SketchFilterTransformation = new SketchFilterTransformation(); - private maskTransformation: MaskTransformation = new MaskTransformation($r('app.media.mask_starfish')); - private swirlFilterTransformation: SwirlFilterTransformation = new SwirlFilterTransformation(80); - private kuwaharaFilterTransform: KuwaharaFilterTransform = new KuwaharaFilterTransform(10); - private toonFilterTransform: ToonFilterTransform = new ToonFilterTransform(0.3, 10.0); - private vignetteFilterTransform: VignetteFilterTransform = new VignetteFilterTransform([0.5, 0.5], [0.0, 0.0, 0.0], [0.3, 0.75]); - - build() { - Scroll() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Flex({ direction: FlexDirection.Row }) { - Row() { - Checkbox({ name: '模糊' }) - .width(32) - .height(32) - .onChange((value: boolean) => { - if (value) { - this.transformations.push(this.blurTransformation); - } else { - for (let index = 0; index < this.transformations.length; index++) { - if (this.transformations[index].getClassName() == this.blurTransformation.getClassName()) { - this.transformations.splice(index, 1); - } - } - } - }) - Text('模糊变换').margin({ left: 16 }) - }.margin({ left: 16 }) - - Row() { - Checkbox({ name: '亮度滤波' }) - .width(32) - .height(32) - .onChange((value: boolean) => { - if (value) { - this.transformations.push(this.brightnessFilterTransformation); - } else { - for (let index = 0; index < this.transformations.length; index++) { - if (this.transformations[index].getClassName() == this.brightnessFilterTransformation.getClassName()) { - this.transformations.splice(index, 1); - } - } - } - }) - Text('亮度滤波').margin({ left: 16 }) - }.margin({ left: 16 }) - }.margin({ top: 32, left: 16 }) - - Flex({ direction: FlexDirection.Row }) { - Row() { - Checkbox({ name: '对比度' }) - .width(32) - .height(32) - .onChange((value: boolean) => { - if (value) { - this.transformations.push(this.contrastFilterTransformation); - } else { - for (let index = 0; index < this.transformations.length; index++) { - if (this.transformations[index].getClassName() == this.contrastFilterTransformation.getClassName()) { - this.transformations.splice(index, 1); - } - } - } - }) - Text('对比度').margin({ left: 16 }) - }.margin({ left: 16 }) - - Row() { - Checkbox({ name: '圆形裁剪' }) - .width(32) - .height(32) - .onChange((value: boolean) => { - if (value) { - this.transformations.push(this.cropCircleTransformation); - } else { - for (let index = 0; index < this.transformations.length; index++) { - if (this.transformations[index].getClassName() == this.cropCircleTransformation.getClassName()) { - this.transformations.splice(index, 1); - } - } - } - }) - Text('圆形裁剪').margin({ left: 16 }) - }.margin({ left: 16 }) - }.margin({ top: 32, left: 16 }) - - Flex({ direction: FlexDirection.Row }) { - Row() { - Checkbox({ name: '圆环' }) - .width(32) - .height(32) - .onChange((value: boolean) => { - if (value) { - this.transformations.push(this.cropCircleWithBorderTransformation); - } else { - for (let index = 0; index < this.transformations.length; index++) { - if (this.transformations[index].getClassName() == this.cropCircleWithBorderTransformation.getClassName()) { - this.transformations.splice(index, 1); - } - } - } - }) - Text('圆环').margin({ left: 16 }) - }.margin({ left: 16 }) - - Row() { - Checkbox({ name: '正方形裁剪' }) - .width(32) - .height(32) - .onChange((value: boolean) => { - if (value) { - this.transformations.push(this.cropSquareTransformation); - } else { - for (let index = 0; index < this.transformations.length; index++) { - if (this.transformations[index].getClassName() == this.cropSquareTransformation.getClassName()) { - this.transformations.splice(index, 1); - } - } - } - }) - Text('正方形裁剪').margin({ left: 16 }) - }.margin({ left: 16 }) - }.margin({ top: 32, left: 16 }) - - Flex({ direction: FlexDirection.Row }) { - Row() { - Checkbox({ name: '自定义矩形' }) - .width(32) - .height(32) - .onChange((value: boolean) => { - if (value) { - this.transformations.push(this.cropTransformation); - } else { - for (let index = 0; index < this.transformations.length; index++) { - if (this.transformations[index].getClassName() == this.cropTransformation.getClassName()) { - this.transformations.splice(index, 1); - } - } - } - }) - Text('自定义矩形').margin({ left: 16 }) - }.margin({ left: 16 }) - - Row() { - Checkbox({ name: '灰度' }) - .width(32) - .height(32) - .onChange((value: boolean) => { - if (value) { - this.transformations.push(this.grayscaleTransformation); - } else { - for (let index = 0; index < this.transformations.length; index++) { - if (this.transformations[index].getClassName() == this.grayscaleTransformation.getClassName()) { - this.transformations.splice(index, 1); - } - } - } - }) - Text('灰度').margin({ left: 16 }) - }.margin({ left: 16 }) - }.margin({ top: 32, left: 16 }) - - Flex({ direction: FlexDirection.Row }) { - Row() { - Checkbox({ name: '反转' }) - .width(32) - .height(32) - .onChange((value: boolean) => { - if (value) { - this.transformations.push(this.invertFilterTransformation); - } else { - for (let index = 0; index < this.transformations.length; index++) { - if (this.transformations[index].getClassName() == this.invertFilterTransformation.getClassName()) { - this.transformations.splice(index, 1); - } - } - } - }) - Text('反转').margin({ left: 16 }) - }.margin({ left: 16 }) - - Row() { - Checkbox({ name: '像素化' }) - .width(32) - .height(32) - .onChange((value: boolean) => { - if (value) { - this.transformations.push(this.pixelationFilterTransformation); - } else { - for (let index = 0; index < this.transformations.length; index++) { - if (this.transformations[index].getClassName() == this.pixelationFilterTransformation.getClassName()) { - this.transformations.splice(index, 1); - } - } - } - }) - Text('像素化').margin({ left: 16 }) - }.margin({ left: 16 }) - }.margin({ top: 32, left: 16 }) - - Flex({ direction: FlexDirection.Row }) { - Row() { - Checkbox({ name: '旋转' }) - .width(32) - .height(32) - .onChange((value: boolean) => { - if (value) { - this.transformations.push(this.rotateImageTransformation); - } else { - for (let index = 0; index < this.transformations.length; index++) { - if (this.transformations[index].getClassName() == this.rotateImageTransformation.getClassName()) { - this.transformations.splice(index, 1); - } - } - } - }) - Text('旋转').margin({ left: 16 }) - }.margin({ left: 16 }) - - Row() { - Checkbox({ name: '圆角' }) - .width(32) - .height(32) - .onChange((value: boolean) => { - if (value) { - this.transformations.push(this.roundedCornersTransformation); - } else { - for (let index = 0; index < this.transformations.length; index++) { - if (this.transformations[index].getClassName() == this.roundedCornersTransformation.getClassName()) { - this.transformations.splice(index, 1); - } - } - } - }) - Text('圆角').margin({ left: 16 }) - }.margin({ left: 16 }) - }.margin({ top: 32, left: 16 }) - - Flex({ direction: FlexDirection.Row }) { - Row() { - Checkbox({ name: '乌墨色滤波' }) - .width(32) - .height(32) - .onChange((value: boolean) => { - if (value) { - this.transformations.push(this.sepiaFilterTransformation); - } else { - for (let index = 0; index < this.transformations.length; index++) { - if (this.transformations[index].getClassName() == this.sepiaFilterTransformation.getClassName()) { - this.transformations.splice(index, 1); - } - } - } - }) - Text('乌墨色滤波').margin({ left: 16 }) - }.margin({ left: 16 }) - - Row() { - Checkbox({ name: '素描' }) - .width(32) - .height(32) - .onChange((value: boolean) => { - if (value) { - this.transformations.push(this.sketchFilterTransformation); - } else { - for (let index = 0; index < this.transformations.length; index++) { - if (this.transformations[index].getClassName() == this.sketchFilterTransformation.getClassName()) { - this.transformations.splice(index, 1); - } - } - } - }) - Text('素描').margin({ left: 16 }) - }.margin({ left: 16 }) - }.margin({ top: 32, left: 16 }) - - Flex({ direction: FlexDirection.Row }) { - Row() { - Checkbox({ name: '遮罩' }) - .width(32) - .height(32) - .onChange((value: boolean) => { - if (value) { - this.transformations.push(this.maskTransformation); - } else { - for (let index = 0; index < this.transformations.length; index++) { - if (this.transformations[index].getClassName() == this.maskTransformation.getClassName()) { - this.transformations.splice(index, 1); - } - } - } - }) - Text('遮罩').margin({ left: 16 }) - }.margin({ left: 16 }) - - Row() { - Checkbox({ name: '扭曲滤波' }) - .width(32) - .height(32) - .onChange((value: boolean) => { - if (value) { - this.transformations.push(this.swirlFilterTransformation); - } else { - for (let index = 0; index < this.transformations.length; index++) { - if (this.transformations[index].getClassName() == this.swirlFilterTransformation.getClassName()) { - this.transformations.splice(index, 1); - } - } - } - }) - Text('扭曲滤波').margin({ left: 16 }) - }.margin({ left: 16 }) - }.margin({ top: 32, left: 16 }) - - Flex({ direction: FlexDirection.Row }) { - Row() { - Checkbox({ name: '桑原滤波' }) - .width(32) - .height(32) - .onChange((value: boolean) => { - if (value) { - this.transformations.push(this.kuwaharaFilterTransform); - } else { - for (let index = 0; index < this.transformations.length; index++) { - if (this.transformations[index].getClassName() == this.kuwaharaFilterTransform.getClassName()) { - this.transformations.splice(index, 1); - } - } - } - }) - Text('桑原滤波').margin({ left: 16 }) - }.margin({ left: 16 }) - - Row() { - Checkbox({ name: '动画滤波' }) - .width(32) - .height(32) - .onChange((value: boolean) => { - if (value) { - this.transformations.push(this.toonFilterTransform); - } else { - for (let index = 0; index < this.transformations.length; index++) { - if (this.transformations[index].getClassName() == this.toonFilterTransform.getClassName()) { - this.transformations.splice(index, 1); - } - } - } - }) - Text('动画滤波').margin({ left: 16 }) - }.margin({ left: 16 }) - }.margin({ top: 32, left: 16 }) - - Flex({ direction: FlexDirection.Row }) { - Row() { - Checkbox({ name: '装饰滤波' }) - .width(32) - .height(32) - .onChange((value: boolean) => { - if (value) { - this.transformations.push(this.vignetteFilterTransform); - } else { - for (let index = 0; index < this.transformations.length; index++) { - if (this.transformations[index].getClassName() == this.vignetteFilterTransform.getClassName()) { - this.transformations.splice(index, 1); - } - } - } - }) - Text('装饰滤波').margin({ left: 16 }) - }.margin({ left: 16 }) - }.margin({ top: 32, left: 16 }) - - Button("显示效果").onClick(() => { - this.imageKnifeOption = { - loadSrc: $r('app.media.jpgSample'), - placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - enableGpu: true, - transformations: this.transformations - }; - }).margin({ left: 5 }).backgroundColor(Color.Blue) - Text("下面为展示图片区域").margin({ top: 5 }) - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300) - }.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink) - - Button("同资源不同转换效果").onClick(() => { - this.option1 = { - loadSrc: $r('app.media.pngSample'), - errorholderSrc: $r("app.media.app_icon"), - transformation: new CropCircleTransformation() - } - this.option2 = { - loadSrc: $r('app.media.pngSample'), - errorholderSrc: $r("app.media.app_icon"), - transformations: [new RotateImageTransformation(45), new InvertFilterTransformation()] - } - }).margin(10).backgroundColor(Color.Blue) - Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center}) { - ImageKnifeComponent({ - imageKnifeOption: this.option1 - }).width(300) - .height(300) - .margin(10) - .borderWidth(3) - ImageKnifeComponent({ - imageKnifeOption: this.option2 - }).width(300) - .height(300) - .margin(10) - .borderWidth(3) - } - } - } - .width('100%') - .height('100%') - } -} - diff --git a/library/src/main/ets/ImageKnife.ets b/library/src/main/ets/ImageKnife.ets index d168038..88f099a 100644 --- a/library/src/main/ets/ImageKnife.ets +++ b/library/src/main/ets/ImageKnife.ets @@ -191,10 +191,10 @@ export class ImageKnife { */ getCacheImage(loadSrc: string, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string): Promise { - let option: ImageKnifeOption = { + let option: ImageKnifeOption = new ImageKnifeOption({ loadSrc: loadSrc, signature:signature - } + }) let engineKeyImpl: IEngineKey = this.getEngineKeyImpl(); return new Promise((resolve, reject) => { @@ -218,7 +218,7 @@ export class ImageKnife { */ putCacheImage(url: string, pixelMap: PixelMap, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string) { let memoryKey = this.getEngineKeyImpl() - .generateMemoryKey(url, ImageKnifeRequestSource.SRC, { loadSrc: url, signature: signature }); + .generateMemoryKey(url, ImageKnifeRequestSource.SRC, new ImageKnifeOption({ loadSrc: url, signature: signature })); let fileKey = this.getEngineKeyImpl().generateFileKey(url, signature); let imageKnifeData: ImageKnifeData = { source: pixelMap, imageWidth: 0, imageHeight: 0 }; switch (cacheType) { @@ -252,9 +252,9 @@ export class ImageKnife { if (url instanceof ImageKnifeOption) { imageKnifeOption = url; } else { - imageKnifeOption = { + imageKnifeOption = new ImageKnifeOption({ loadSrc: url - }; + }); } let key = this.getEngineKeyImpl().generateFileKey(imageKnifeOption.loadSrc, imageKnifeOption.signature); if (this.fileCache !== undefined) { diff --git a/library/src/main/ets/ImageKnifeOption.ets b/library/src/main/ets/ImageKnifeOption.ets index 438849e..68b23da 100644 --- a/library/src/main/ets/ImageKnifeOption.ets +++ b/library/src/main/ets/ImageKnifeOption.ets @@ -22,28 +22,36 @@ export interface HeaderOptions { key: string; value: Object; } - -@Observed -export class AnimatorOption { - @Track - state?: AnimationStatus = AnimationStatus.Running - @Track - iterations?: number = -1 - @Track - reverse?: boolean = false +interface AnimatorType { + state?: AnimationStatus + iterations?: number + reverse?: boolean } +@ObservedV2 +export class AnimatorOption { + @Trace + state?: AnimationStatus = AnimationStatus.Running + @Trace + iterations?: number = -1 + @Trace + reverse?: boolean = false -@Observed -export class ImageKnifeOption { + constructor(option?:AnimatorType) { + this.state = option?.state + this.iterations = option?.iterations + this.reverse = option?.reverse + } +} +interface ImageOption { // 主图资源 - loadSrc: string | PixelMap | Resource = ""; + loadSrc: string | PixelMap | Resource // 占位图 - placeholderSrc?: string | PixelMap | Resource; + placeholderSrc?: string | PixelMap | Resource // 失败占位图 - errorholderSrc?: string | PixelMap | Resource; + errorholderSrc?: string | PixelMap | Resource headerOption?: Array; // 自定义缓存关键字 - signature?: string; + signature?: string // 主图填充效果 objectFit?: ImageFit // 占位图填充效果 @@ -55,16 +63,65 @@ export class ImageKnifeOption { // 缓存策略 writeCacheStrategy?: CacheStrategy // 仅使用缓存加载数据 - onlyRetrieveFromCache?: boolean = false; - priority?: taskpool.Priority = taskpool.Priority.LOW + onlyRetrieveFromCache?: boolean; + priority?: taskpool.Priority context?: common.UIAbilityContext; progressListener?: (progress: number) => void; transformation?: PixelMapTransformation onLoadListener?: OnLoadCallBack | undefined; onComplete?:(event:EventImage | undefined) => void drawingColorFilter?: ColorFilter | drawing.ColorFilter - constructor() { - +} +@ObservedV2 +export class ImageKnifeOption { + // 主图资源 + @Trace loadSrc: string | PixelMap | Resource = ""; + // 占位图 + placeholderSrc?: string | PixelMap | Resource; + // 失败占位图 + errorholderSrc?: string | PixelMap | Resource; + headerOption?: Array; + // 自定义缓存关键字 + @Trace signature?: string; + // 主图填充效果 + @Trace objectFit?: ImageFit + // 占位图填充效果 + placeholderObjectFit?: ImageFit + // 错误图填充效果 + errorholderObjectFit?: ImageFit + customGetImage?: (context: Context, src: string | PixelMap | Resource) => Promise + @Trace border?: BorderOptions + // 缓存策略 + writeCacheStrategy?: CacheStrategy + // 仅使用缓存加载数据 + onlyRetrieveFromCache?: boolean = false; + priority?: taskpool.Priority = taskpool.Priority.LOW + context?: common.UIAbilityContext; + progressListener?: (progress: number) => void; + @Trace transformation?: PixelMapTransformation + onLoadListener?: OnLoadCallBack | undefined; + onComplete?:(event:EventImage | undefined) => void + drawingColorFilter?: ColorFilter | drawing.ColorFilter + constructor(option?:ImageOption) { + this.loadSrc = option?.loadSrc == undefined ? "" : option?.loadSrc + this.placeholderSrc = option?.placeholderSrc + this.errorholderSrc = option?.errorholderSrc + this.headerOption = option?.headerOption + this.signature = option?.signature + this.objectFit = option?.objectFit + this.placeholderObjectFit = option?.placeholderObjectFit + this.errorholderObjectFit = option?.errorholderObjectFit + this.customGetImage = option?.customGetImage + this.border = option?.border + this.writeCacheStrategy = option?.writeCacheStrategy + this.onlyRetrieveFromCache = option?.onlyRetrieveFromCache + this.priority = option?.priority + this.context = option?.context + this.progressListener = option?.progressListener + this.transformation = option?.transformation + this.onLoadListener = option?.onLoadListener + this.onComplete = option?.onComplete + this.drawingColorFilter = option?.drawingColorFilter } } diff --git a/library/src/main/ets/components/ImageKnifeAnimatorComponent.ets b/library/src/main/ets/components/ImageKnifeAnimatorComponent.ets index f3bc678..e34e350 100644 --- a/library/src/main/ets/components/ImageKnifeAnimatorComponent.ets +++ b/library/src/main/ets/components/ImageKnifeAnimatorComponent.ets @@ -19,15 +19,14 @@ import { ImageKnife } from '../ImageKnife'; import { LogUtil } from '../utils/LogUtil'; import { ImageKnifeRequestSource } from '../model/ImageKnifeData'; -@Component +@ComponentV2 export struct ImageKnifeAnimatorComponent { - @Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption; - @State animatorOption: AnimatorOption = new AnimatorOption(); - @State pixelMap: PixelMap | string | undefined = undefined - @State imageAnimator: Array | undefined = undefined - @State adaptiveWidth: Length = '100%' - @State adaptiveHeight: Length = '100%' - @State objectFit: ImageFit = ImageFit.Contain + @Param animatorOption: AnimatorOption = new AnimatorOption(); + @Local pixelMap: PixelMap | string | undefined = undefined + @Local imageAnimator: Array | undefined = undefined + @Local adaptiveWidth: Length = '100%' + @Local adaptiveHeight: Length = '100%' + @Local objectFit: ImageFit = ImageFit.Contain private request: ImageKnifeRequest | undefined private lastWidth: number = 0 private lastHeight: number = 0 @@ -35,7 +34,17 @@ export struct ImageKnifeAnimatorComponent { private currentHeight: number = 0 private componentVersion: number = 0 private currentContext: common.UIAbilityContext | undefined = undefined - + @Param imageKnifeOption: ImageKnifeOption = new ImageKnifeOption(); + @Monitor('imageKnifeOption', + "imageKnifeOption.loadSrc","imageKnifeOption.signature","imageKnifeOption.transformation","imageKnifeOption.border","imageKnifeOption.objectFit") + watchImageKnifeOption() { + if (this.request !== undefined) { + this.request.requestState = ImageKnifeRequestState.DESTROY + } + this.request = undefined + this.componentVersion++ + ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight)) + } aboutToAppear(): void { this.objectFit = this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit } @@ -81,15 +90,6 @@ export struct ImageKnifeAnimatorComponent { }) } - watchImageKnifeOption() { - if (this.request !== undefined) { - this.request.requestState = ImageKnifeRequestState.DESTROY - } - this.request = undefined - this.componentVersion++ - ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight),true) - } - getCurrentContext(): common.UIAbilityContext { if (this.currentContext == undefined) { this.currentContext = getContext(this) as common.UIAbilityContext diff --git a/library/src/main/ets/components/ImageKnifeComponent.ets b/library/src/main/ets/components/ImageKnifeComponent.ets index 57e7432..29a2b20 100644 --- a/library/src/main/ets/components/ImageKnifeComponent.ets +++ b/library/src/main/ets/components/ImageKnifeComponent.ets @@ -21,14 +21,13 @@ import { ImageKnifeData, ImageKnifeRequestSource } from '../model/ImageKnifeData import { IEngineKey } from '../key/IEngineKey'; import { DefaultEngineKey } from '../key/DefaultEngineKey'; -@Component +@ComponentV2 export struct ImageKnifeComponent { - @Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption; - @State pixelMap: PixelMap | string | undefined = undefined - @State syncLoad: boolean = false - @State adaptiveWidth: Length = '100%' - @State adaptiveHeight: Length = '100%' - @State objectFit: ImageFit = ImageFit.Contain + @Local pixelMap: PixelMap | string | undefined = undefined + @Param syncLoad: boolean = false + @Local adaptiveWidth: Length = '100%' + @Local adaptiveHeight: Length = '100%' + @Local objectFit: ImageFit = ImageFit.Contain private request: ImageKnifeRequest | undefined private lastWidth: number = 0 private lastHeight: number = 0 @@ -36,7 +35,17 @@ export struct ImageKnifeComponent { private currentHeight: number = 0 private componentVersion: number = 0 private currentContext: common.UIAbilityContext | undefined = undefined - + @Param imageKnifeOption: ImageKnifeOption = new ImageKnifeOption(); + @Monitor('imageKnifeOption', + "imageKnifeOption.loadSrc","imageKnifeOption.signature","imageKnifeOption.transformation","imageKnifeOption.border","imageKnifeOption.objectFit") + watchImageKnifeOption() { + if (this.request !== undefined) { + this.request.requestState = ImageKnifeRequestState.DESTROY + } + this.request = undefined + this.componentVersion++ + ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight)) + } aboutToAppear(): void { //闪动问题失效，注释相应代码后续修复 if(this.syncLoad) { @@ -102,15 +111,6 @@ export struct ImageKnifeComponent { }) } - watchImageKnifeOption() { - if (this.request !== undefined) { - this.request.requestState = ImageKnifeRequestState.DESTROY - } - this.request = undefined - this.componentVersion++ - ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight)) - } - getCurrentContext(): common.UIAbilityContext { if (this.currentContext == undefined) { this.currentContext = getContext(this) as common.UIAbilityContext diff --git a/sharedlibrary/src/main/ets/pages/Index.ets b/sharedlibrary/src/main/ets/pages/Index.ets index ad35007..53fb147 100644 --- a/sharedlibrary/src/main/ets/pages/Index.ets +++ b/sharedlibrary/src/main/ets/pages/Index.ets @@ -14,11 +14,11 @@ */ import { ImageKnife , ImageKnifeComponent ,ImageKnifeOption } from "@ohos/imageknife" -@Component +@ComponentV2 export struct IndexComponent { - @State imageKnifeOption: ImageKnifeOption = { + @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({ loadSrc: $r('app.media.startIcon') - } + }) build() { Column() { Button("预加载").onClick((event: ClickEvent) => {