ImageKnifeAnimatorComponent补充圆角功能

Signed-off-by: zgf <zenggaofeng2@h-partners.com>

CHANGELOG.md

@@ -4,6 +4,7 @@
 - Fix inability to parse Resource format images of other modules
 - Improve the error logs
 - Fix callback onLoadFailed when taskpool exception occurs
+- ImageKnife AnimatorComponent component adds rounded corner function
 
 ## 3.2.0-rc.2
 - Added callback information for image loading

README_zh.md

@@ -467,5 +467,4 @@ DevEco Studio: NEXT Beta1-5.0.3.806, SDK: API12 Release(5.0.0.66)
 
 ## 遗留问题
 
-- ImageKnifeAnimator组件无法设置ImageFit属性
-- ImageKnifeAnimator组件设置border属性无法将图片变为圆角
+- ImageKnifeAnimator组件无法设置ImageFit属性

entry/src/main/ets/pages/ImageAnimatorPage.ets

@@ -69,7 +69,8 @@ struct ImageAnimatorPage {
         imageKnifeOption:{
           loadSrc:'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
           placeholderSrc:$r('app.media.loading'),
-          errorholderSrc:$r('app.media.failed')
+          errorholderSrc:$r('app.media.failed'),
+          border: { radius: 150 }
         },animatorOption:this.animatorOption
       }).width(300).height(300).backgroundColor(Color.Orange).margin({top:30})
       Text($r('app.string.Display_the_first_frame')).fontSize(20)

library/src/main/ets/components/ImageKnifeAnimatorComponent.ets

@@ -61,6 +61,7 @@ export struct ImageKnifeAnimatorComponent {
       .width(this.adaptiveWidth)
       .height(this.adaptiveHeight)
       .border(this.imageKnifeOption.border)
+      .clip(this.imageKnifeOption.border?.radius == undefined ? false : true)
       .state(this.animatorOption.state == undefined ? AnimationStatus.Running : this.animatorOption.state)
       .iterations(this.animatorOption.iterations == undefined ? -1 : this.animatorOption.iterations)
       .reverse(this.animatorOption.reverse == undefined ? false : this.animatorOption.reverse)