swiftui - 用半圆形蒙版剪辑图像？

问题描述

我正在尝试为图像添加圆形背景，然后使用背景的半圆形剪辑图像。这就是我想要结束的：

在 SwiftUI 中，我整理了一些东西，但坚持我clipShape应该使用什么：

Circle()
    .fill(Color.blue)
    .aspectRatio(contentMode: .fit)
    .frame(width: 48)
    .padding(.top, 8)
    .overlay(
        Image("product-sample1")
            .resizable()
            .scaledToFit()
            //.clipShape(???)
    )

这是它的样子：

我不确定如何实现这一点，但得到了使用这种方法的线索：

如何在 SwiftUI 中实现这一点，或者有更好的方法来做到这一点？

标签： swiftui

您可以创建自己的形状。下面是一个简单的演示变体（用于方形内容）。

private struct DemoClipShape: Shape {
    func path(in rect: CGRect) -> Path {
        Path {
            $0.move(to: CGPoint.zero)
            $0.addLine(to: CGPoint(x: rect.maxX, y: 0))
            $0.addLine(to: CGPoint(x: rect.maxX, y: rect.midY))
            $0.addArc(center: CGPoint(x: rect.midX, y: rect.midY), radius: rect.midY, startAngle: Angle(degrees: 0), endAngle: Angle(degrees: 90), clockwise: false)
            $0.addArc(center: CGPoint(x: rect.midX, y: rect.midY), radius: rect.midY, startAngle: Angle(degrees: 90), endAngle: Angle(degrees: 180), clockwise: false)
            $0.addLine(to: CGPoint.zero)
        }
    }
}

这是如何应用它的示例 - 由于填充，我们需要偏移剪辑（蒙版）以补偿位置（也可以将其作为常量传递给形状构造函数，这将更加正确和准确，但我将其保留为你）：

// used larger values for better visibility
Circle()
    .fill(Color.blue)
    .frame(width: 148, height: 148)
    .padding(.top, 18)
    .padding(.bottom, 10)
    .overlay(
        Image("product-sample1")
            .resizable()
            .scaledToFit()
    )
    .mask(DemoClipShape().offset(x: 0, y: -11))    // << here !!

给

swiftui - 用半圆形蒙版剪辑图像？

问题描述

解决方案

推荐阅读