HarmonyOS：形状裁剪（clipShape）

一、简介可利用clipShape接口将组件裁剪为所需的形状。调用该接口后可以保留该形状覆盖的组件部分同时移除组件的其余部分。裁剪形状本身是不可见的。说明不同的形状支持的属性范围不同路径是一种形状除此之外还有椭圆、矩形等形状。路径的形状不支持设置宽度和高度具体形状支持的属性参考具体形状的文档。形状中的fill属性对clipShape接口不生效。二、裁剪圆形通过设置CircleShape将图片裁剪为圆形。效果图示例代码import{CircleShape}fromkit.ArkUIEntry ComponentstructTestClipShape{State message:stringHello World;build(){Column({space:20}){//原图Image($r(app.media.mount)).width(100%)// 用一个280px直径的圆对图片进行裁剪Image($r(app.media.mount)).clipShape(newCircleShape({width:280px,height:280px})).width(500px).height(280px)// 用一个350px直径的圆对图片进行裁剪Image($r(app.media.mount)).clipShape(newCircleShape({width:350px,height:350px})).width(500px).height(370px)}.height(100%).width(100%).padding({top:50})}}三、裁剪椭圆形通过设置EllipseShape将图片裁剪为椭圆形。效果图示例代码import{CircleShape,EllipseShape}fromkit.ArkUIEntry ComponentstructTestClipShape{State message:stringHello World;build(){Scroll(){Column({space:20}){//原图Image($r(app.media.mount)).width(100%)Text(通过设置EllipseShape将图片裁剪为椭圆形).fontSize(16).fontColor(Color.Black)Row({space:20}){// 用一个280px直径的圆对图片进行裁剪Image($r(app.media.mount)).clipShape(newCircleShape({width:280px,height:280px})).width(500px).height(280px)// 用一个350px直径的圆对图片进行裁剪Image($r(app.media.mount)).clipShape(newCircleShape({width:350px,height:350px})).width(500px).height(370px)}Text(通过设置EllipseShape将图片裁剪为椭圆形).fontSize(16).fontColor(Color.Black)Row({space:20}){Image($r(app.media.background)).clipShape(newEllipseShape({width:280px,height:200px})).width(500px).height(400px)Image($r(app.media.background)).clipShape(newEllipseShape({width:380px,height:280px})).width(500px).height(400px)}}.width(100%)}.height(100%).width(100%)}}四、裁剪矩形通过设置RectShape将图片裁剪为矩形。效果图示例代码import{CircleShape,EllipseShape,RectShape}fromkit.ArkUIEntry ComponentstructTestClipShape{State message:stringHello World;build(){Scroll(){Column({space:20}){//原图Image($r(app.media.mount)).width(100%)Text(通过设置EllipseShape将图片裁剪为椭圆形).fontSize(16).fontColor(Color.Black)Row({space:20}){// 用一个280px直径的圆对图片进行裁剪Image($r(app.media.mount)).clipShape(newCircleShape({width:280px,height:280px})).width(500px).height(280px)// 用一个350px直径的圆对图片进行裁剪Image($r(app.media.mount)).clipShape(newCircleShape({width:350px,height:350px})).width(500px).height(370px)}Text(通过设置EllipseShape将图片裁剪为椭圆形).fontSize(16).fontColor(Color.Black)Row({space:20}){Image($r(app.media.background)).clipShape(newEllipseShape({width:280px,height:200px})).width(500px).height(400px)Image($r(app.media.background)).clipShape(newEllipseShape({width:380px,height:280px})).width(500px).height(400px)}Text(通过设置RectShape将图片裁剪为矩形).fontSize(16).fontColor(Color.Black)Row({space:20}){Image($r(app.media.background)).clipShape(newRectShape({width:200px,height:200px})).width(500px).height(400px)Image($r(app.media.background)).clipShape(newRectShape({width:380px,height:280px})).width(500px).height(400px)}}.width(100%)}.height(100%).width(100%)}}五、裁剪不规则形状通过设置PathShape将图片裁剪为不规则形状。效果图示例代码import{CircleShape,EllipseShape,PathShape,RectShape}fromkit.ArkUIEntry ComponentstructTestClipShape{State message:stringHello World;build(){Scroll(){Column({space:20}){//原图Image($r(app.media.mount)).width(100%)Text(通过设置EllipseShape将图片裁剪为椭圆形).fontSize(16).fontColor(Color.Black)Row({space:20}){// 用一个280px直径的圆对图片进行裁剪Image($r(app.media.mount)).clipShape(newCircleShape({width:280px,height:280px})).width(500px).height(280px)// 用一个350px直径的圆对图片进行裁剪Image($r(app.media.mount)).clipShape(newCircleShape({width:350px,height:350px})).width(500px).height(370px)}Text(通过设置EllipseShape将图片裁剪为椭圆形).fontSize(16).fontColor(Color.Black)Row({space:20}){Image($r(app.media.background)).clipShape(newEllipseShape({width:280px,height:200px})).width(500px).height(400px)Image($r(app.media.background)).clipShape(newEllipseShape({width:380px,height:280px})).width(500px).height(400px)}Text(通过设置RectShape将图片裁剪为矩形).fontSize(16).fontColor(Color.Black)Row({space:20}){Image($r(app.media.background)).clipShape(newRectShape({width:200px,height:200px})).width(500px).height(400px)Image($r(app.media.background)).clipShape(newRectShape({width:380px,height:280px})).width(500px).height(400px)}Text(通过设置PathShape将图片裁剪为不规则形状).fontSize(16).fontColor(Color.Black)Row(){Image($r(app.media.background)).clipShape(newPathShape({commands:M0 0 H400 V200 H0 Z})).width(500px).height(300px)}.clip(true).borderRadius(20)}.width(100%)}.height(100%).width(100%)}}