diff --git a/README_zh.md b/README_zh.md index a15d2bd..9647e65 100644 --- a/README_zh.md +++ b/README_zh.md @@ -56,7 +56,7 @@ await ImageKnife.getInstance().initFileCache(context, 256, 256 * 1024 * 1024) ``` ImageKnifeComponent({ - ImageKnifeOption: { + imageKnifeOption: { loadSrc: $r("app.media.app_icon"), placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.app_icon"), @@ -69,7 +69,7 @@ ImageKnifeComponent({ ``` ImageKnifeComponent({ - ImageKnifeOption: { + imageKnifeOption: { loadSrc: this.localFile, placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.app_icon"), @@ -82,7 +82,7 @@ ImageKnifeComponent({ ``` ImageKnifeComponent({ - ImageKnifeOption: { + imageKnifeOption: { loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png", placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.app_icon"), @@ -95,7 +95,7 @@ ImageKnifeComponent({ ``` ImageKnifeComponent({ - ImageKnifeOption: { + imageKnifeOption: { loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg", placeholderSrc: $r("app.media.loading"), errorholderSrc: $r("app.media.app_icon"), @@ -117,7 +117,7 @@ async function custom(context: Context, src: string | PixelMap | Resource): Prom ``` ImageKnifeComponent({ - ImageKnifeOption: { + imageKnifeOption: { loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png", progressListener:(progress:number)=>{console.info("ImageKinfe:: call back progress = " + progress)} } @@ -127,10 +127,10 @@ ImageKnifeComponent({ #### 6.支持option传入border,设置边框,圆角 ``` -ImageKnifeComponent({ ImageKnifeOption: -{ - loadSrc: $r("app.media.rabbit"), - border: {radius:50} +ImageKnifeComponent({ + imageKnifeOption: { + loadSrc: $r("app.media.rabbit"), + border: {radius:50} } }).width(100).height(100) ``` @@ -138,11 +138,11 @@ ImageKnifeComponent({ ImageKnifeOption: #### 7.支持option图片变换 ``` -ImageKnifeComponent({ ImageKnifeOption: -{ - loadSrc: $r("app.media.rabbit"), - border: {radius:50}, - transformation: new BlurTransformation(3) +ImageKnifeComponent({ + imageKnifeOption: { + loadSrc: $r("app.media.rabbit"), + border: {radius:50}, + transformation: new BlurTransformation(3) } }).width(100).height(100) ``` @@ -154,12 +154,12 @@ transformations.push(new BlurTransformation(5)); transformations.push(new BrightnessTransformation(0.2)); ImageKnifeComponent({ 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 // 图形变换组 + 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) @@ -171,12 +171,12 @@ ImageKnifeComponent({ 圆形裁剪变换示例 ``` -ImageKnifeComponent({ ImageKnifeOption: - { - loadSrc: $r('app.media.pngSample'), - objectFit: ImageFit.Cover, - border: { radius: 150 } -} +ImageKnifeComponent({ + imageKnifeOption: { + loadSrc: $r('app.media.pngSample'), + objectFit: ImageFit.Cover, + border: { radius: 150 } + } }).width(300) .height(300) ``` @@ -184,12 +184,12 @@ ImageKnifeComponent({ ImageKnifeOption: 圆形裁剪带边框变换示例 ``` -ImageKnifeComponent({ ImageKnifeOption: - { - loadSrc: $r('app.media.pngSample'), - objectFit: ImageFit.Cover, - border: { radius: 150, color: Color.Red, width: 5 } -} +ImageKnifeComponent({ + imageKnifeOption: { + loadSrc: $r('app.media.pngSample'), + objectFit: ImageFit.Cover, + border: { radius: 150, color: Color.Red, width: 5 } + } }).width(300) .height(300) ``` @@ -222,8 +222,8 @@ ImageKnifeComponent({ #### 8.监听图片加载成功与失败 ``` -ImageKnifeComponent({ ImageKnifeOption: -{ +ImageKnifeComponent({ + imageKnifeOption: { loadSrc: $r("app.media.rabbit"), onLoadListener:{ onLoadStart:()=>{ @@ -248,61 +248,64 @@ ImageKnifeComponent({ ImageKnifeOption: 设置是否同步加载图片,默认是异步加载。建议加载尺寸较小的Resource图片时将syncLoad设为true,因为耗时较短,在主线程上执行即可 ``` ImageKnifeComponent({ - imageKnifeOption:{ - loadSrc:$r("app.media.pngSample"), - placeholderSrc:$r("app.media.loading") - },syncLoad:true - }) + imageKnifeOption:{ + loadSrc:$r("app.media.pngSample"), + placeholderSrc:$r("app.media.loading") + }, + syncLoad:true +}) ``` #### 10.ImageKnifeAnimatorComponent 示例 ``` ImageKnifeAnimatorComponent({ - imageKnifeOption: { - loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658", - placeholderSrc:$r('app.media.loading'), - errorholderSrc:$r('app.media.failed') - },animatorOption:this.animatorOption - }).width(300).height(300).backgroundColor(Color.Orange).margin({top:30}) + imageKnifeOption: { + loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658", + placeholderSrc:$r('app.media.loading'), + errorholderSrc:$r('app.media.failed') + }, + animatorOption:this.animatorOption +}).width(300).height(300).backgroundColor(Color.Orange).margin({top:30}) ``` #### 11.加载图片回调信息数据 示例 ``` -ImageKnifeComponent({ ImageKnifeOption: = { - loadSrc: $r('app.media.pngSample'), - objectFit: ImageFit.Contain, - onLoadListener: { - onLoadStart: (req) => { - let startCallBackData = JSON.stringify(req?.imageKnifeData); - }, - onLoadFailed: (res, req) => { - let failedBackData = res + ";" + JSON.stringify(req?.imageKnifeData); - }, - onLoadSuccess: (data, imageData, req) => { - let successBackData = JSON.stringify(req?.imageKnifeData); - }, - onLoadCancel: (res, req) => { - let cancelBackData = res + ";" + JSON.stringify(req?.imageKnifeData); - } - }, - border: { radius: 50 }, - onComplete: (event) => { - if (event && event.loadingStatus == 0) { - let render_success = JSON.stringify(Date.now()) - } - } - } +ImageKnifeComponent({ + imageKnifeOption: { + loadSrc: $r('app.media.pngSample'), + objectFit: ImageFit.Contain, + onLoadListener: { + onLoadStart: (req) => { + let startCallBackData = JSON.stringify(req?.imageKnifeData); + }, + onLoadFailed: (res, req) => { + let failedBackData = res + ";" + JSON.stringify(req?.imageKnifeData); + }, + onLoadSuccess: (data, imageData, req) => { + let successBackData = JSON.stringify(req?.imageKnifeData); + }, + onLoadCancel: (res, req) => { + let cancelBackData = res + ";" + JSON.stringify(req?.imageKnifeData); + } + }, + border: { radius: 50 }, + onComplete: (event) => { + if (event && event.loadingStatus == 0) { + let render_success = JSON.stringify(Date.now()) + } + } + } }).width(100).height(100) ``` #### 12.图片降采样 示例 ``` ImageKnifeComponent({ - imageKnifeOption:{ - loadSrc:$r("app.media.pngSample"), - placeholderSrc:$r('app.media.loading'), - errorholderSrc:$r('app.media.failed'), - downsampleOf: DownsampleStrategy.NONE - } - }).width(300).height(300) + imageKnifeOption:{ + loadSrc:$r("app.media.pngSample"), + placeholderSrc:$r('app.media.loading'), + errorholderSrc:$r('app.media.failed'), + downsampleOf: DownsampleStrategy.NONE + } +}).width(300).height(300) ``` #### 13.rcp自定义网络请求 ```