如何让 `Image` 组件只显示图片的某一部分（裁剪）？

Question

只想显示一张大图的中间一小块区域，或者把它裁剪成一个特殊的形状（比如圆形之外的形状）。Image 组件怎么做裁剪？

Answer 1

.clip()可以设置不同的参数：

• 布尔值: .clip(true) 表示使用组件自身的边界（包括圆角 .borderRadius）进行裁剪。这是实现圆角图片或让内容不超出边界的基本方法。
• 形状对象: .clip(new Circle({ width: '80%', height: '80%' })) 或 .clip(new Rect({ width: '50%', height: '50%', radius: 10 })) 或 .clip(new Path().commands(...))。可以使用预定义的形状（圆、矩形）或自定义路径 Path 来对组件内容进行任意形状的裁剪（遮罩）。