update README_zh.md.

大写的 ImageKnifeOption 会有错误提示 '@ObjectLink' decorated 'imageKnifeOption' must be initialized through the component constructor. <ArkTSCheck>

Signed-off-by: 聪小陈 <448627663@qq.com>
This commit is contained in:
聪小陈 2025-02-19 02:22:35 +00:00 committed by Gitee
parent acb45a66bc
commit ca44a78092
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
1 changed files with 79 additions and 76 deletions

View File

@ -56,7 +56,7 @@ await ImageKnife.getInstance().initFileCache(context, 256, 256 * 1024 * 1024)
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
ImageKnifeOption: { imageKnifeOption: {
loadSrc: $r("app.media.app_icon"), loadSrc: $r("app.media.app_icon"),
placeholderSrc: $r("app.media.loading"), placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"), errorholderSrc: $r("app.media.app_icon"),
@ -69,7 +69,7 @@ ImageKnifeComponent({
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
ImageKnifeOption: { imageKnifeOption: {
loadSrc: this.localFile, loadSrc: this.localFile,
placeholderSrc: $r("app.media.loading"), placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"), errorholderSrc: $r("app.media.app_icon"),
@ -82,7 +82,7 @@ ImageKnifeComponent({
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
ImageKnifeOption: { imageKnifeOption: {
loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png", loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
placeholderSrc: $r("app.media.loading"), placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"), errorholderSrc: $r("app.media.app_icon"),
@ -95,7 +95,7 @@ ImageKnifeComponent({
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
ImageKnifeOption: { imageKnifeOption: {
loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg", loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
placeholderSrc: $r("app.media.loading"), placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"), errorholderSrc: $r("app.media.app_icon"),
@ -117,7 +117,7 @@ async function custom(context: Context, src: string | PixelMap | Resource): Prom
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
ImageKnifeOption: { imageKnifeOption: {
loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png", loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
progressListener:(progress:number)=>{console.info("ImageKinfe:: call back progress = " + progress)} progressListener:(progress:number)=>{console.info("ImageKinfe:: call back progress = " + progress)}
} }
@ -127,8 +127,8 @@ ImageKnifeComponent({
#### 6.支持option传入border设置边框圆角 #### 6.支持option传入border设置边框圆角
``` ```
ImageKnifeComponent({ ImageKnifeOption: ImageKnifeComponent({
{ imageKnifeOption: {
loadSrc: $r("app.media.rabbit"), loadSrc: $r("app.media.rabbit"),
border: {radius:50} border: {radius:50}
} }
@ -138,8 +138,8 @@ ImageKnifeComponent({ ImageKnifeOption:
#### 7.支持option图片变换 #### 7.支持option图片变换
``` ```
ImageKnifeComponent({ ImageKnifeOption: ImageKnifeComponent({
{ imageKnifeOption: {
loadSrc: $r("app.media.rabbit"), loadSrc: $r("app.media.rabbit"),
border: {radius:50}, border: {radius:50},
transformation: new BlurTransformation(3) transformation: new BlurTransformation(3)
@ -171,8 +171,8 @@ ImageKnifeComponent({
圆形裁剪变换示例 圆形裁剪变换示例
``` ```
ImageKnifeComponent({ ImageKnifeOption: ImageKnifeComponent({
{ imageKnifeOption: {
loadSrc: $r('app.media.pngSample'), loadSrc: $r('app.media.pngSample'),
objectFit: ImageFit.Cover, objectFit: ImageFit.Cover,
border: { radius: 150 } border: { radius: 150 }
@ -184,8 +184,8 @@ ImageKnifeComponent({ ImageKnifeOption:
圆形裁剪带边框变换示例 圆形裁剪带边框变换示例
``` ```
ImageKnifeComponent({ ImageKnifeOption: ImageKnifeComponent({
{ imageKnifeOption: {
loadSrc: $r('app.media.pngSample'), loadSrc: $r('app.media.pngSample'),
objectFit: ImageFit.Cover, objectFit: ImageFit.Cover,
border: { radius: 150, color: Color.Red, width: 5 } border: { radius: 150, color: Color.Red, width: 5 }
@ -222,8 +222,8 @@ ImageKnifeComponent({
#### 8.监听图片加载成功与失败 #### 8.监听图片加载成功与失败
``` ```
ImageKnifeComponent({ ImageKnifeOption: ImageKnifeComponent({
{ imageKnifeOption: {
loadSrc: $r("app.media.rabbit"), loadSrc: $r("app.media.rabbit"),
onLoadListener:{ onLoadListener:{
onLoadStart:()=>{ onLoadStart:()=>{
@ -251,7 +251,8 @@ ImageKnifeComponent({
imageKnifeOption:{ imageKnifeOption:{
loadSrc:$r("app.media.pngSample"), loadSrc:$r("app.media.pngSample"),
placeholderSrc:$r("app.media.loading") placeholderSrc:$r("app.media.loading")
},syncLoad:true },
syncLoad:true
}) })
``` ```
#### 10.ImageKnifeAnimatorComponent 示例 #### 10.ImageKnifeAnimatorComponent 示例
@ -261,13 +262,15 @@ ImageKnifeAnimatorComponent({
loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658", loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
placeholderSrc:$r('app.media.loading'), placeholderSrc:$r('app.media.loading'),
errorholderSrc:$r('app.media.failed') errorholderSrc:$r('app.media.failed')
},animatorOption:this.animatorOption },
animatorOption:this.animatorOption
}).width(300).height(300).backgroundColor(Color.Orange).margin({top:30}) }).width(300).height(300).backgroundColor(Color.Orange).margin({top:30})
``` ```
#### 11.加载图片回调信息数据 示例 #### 11.加载图片回调信息数据 示例
``` ```
ImageKnifeComponent({ ImageKnifeOption: = { ImageKnifeComponent({
imageKnifeOption: {
loadSrc: $r('app.media.pngSample'), loadSrc: $r('app.media.pngSample'),
objectFit: ImageFit.Contain, objectFit: ImageFit.Contain,
onLoadListener: { onLoadListener: {