SwiftUI中clipShape用旋转效果报错，求图片菱形裁剪方案

错误原因 #

clipShape(_:)方法要求参数必须遵循Shape协议，你代码里的Rectangle().cornerRadius(8).rotationEffect(.degrees(45))是经过rotationEffect修饰后的View实例，而非Shape类型，因此触发类型不匹配错误。

解决方法 #

方法一：自定义带圆角的菱形Shape

直接实现一个符合Shape协议的圆角菱形结构体，精准控制裁剪形状：

struct RoundedDiamondShape: Shape {
    var cornerRadius: CGFloat
    
    func path(in rect: CGRect) -> Path {
        let center = CGPoint(x: rect.midX, y: rect.midY)
        let halfLength = min(rect.width, rect.height) / 2
        
        // 定义菱形四个顶点
        let top = CGPoint(x: center.x, y: center.y - halfLength)
        let right = CGPoint(x: center.x + halfLength, y: center.y)
        let bottom = CGPoint(x: center.x, y: center.y + halfLength)
        let left = CGPoint(x: center.x - halfLength, y: center.y)
        
        var path = Path()
        // 绘制带圆角的路径
        path.move(to: top)
        path.addArc(tangent1End: top, tangent2End: right, radius: cornerRadius)
        path.addArc(tangent1End: right, tangent2End: bottom, radius: cornerRadius)
        path.addArc(tangent1End: bottom, tangent2End: left, radius: cornerRadius)
        path.addArc(tangent1End: left, tangent2End: top, radius: cornerRadius)
        path.closeSubpath()
        
        return path
    }
}

使用示例：

Image("your-image")
    .resizable()
    .scaledToFill()
    .frame(width: 200, height: 200)
    .clipShape(RoundedDiamondShape(cornerRadius: 8))

方法二：调整视图修饰顺序（无需自定义Shape）

通过调整旋转和裁剪的顺序，配合frame适配实现效果：

Image("your-image")
    .resizable()
    .scaledToFill()
    // 先给足够大的frame（旋转45度后，正方形对角线长度为原边长的√2倍）
    .frame(width: 200 * sqrt(2), height: 200 * sqrt(2))
    .rotationEffect(.degrees(45))
    // 裁剪成圆角矩形
    .clipShape(RoundedRectangle(cornerRadius: 8))
    // 缩回到目标尺寸
    .frame(width: 200, height: 200)
    // 去除超出frame的部分
    .clipped()

方法对比 #

• 自定义Shape方法：布局更可控，无额外frame计算，适合需要复用或精准调整形状的场景。
• 调整顺序方法：无需编写自定义Shape，快速实现，但需要手动计算适配frame，适合简单场景。

内容的提问来源于stack exchange，提问作者Amin Rezaei