在 SwiftUI 中使用文本遮罩矩形

Question

我想使用 SwiftUI 实现以下目标：

这是我尝试过的：

Text("test").mask(Rectangle().frame(width: 200, height: 100).foregroundColor(.white))

反之亦然：

Rectangle().frame(width: 200, height: 100).foregroundColor(.white).mask(Text("test"))

这两个样本都给了我想要的相反结果。这意味着只有文本显示为白色，矩形被“屏蔽”。

我也想过替代，我简单地结合起来Text，并Rectangle在ZStack。具有前景色的矩形和具有背景色的文本。这将导致相同的效果。但是我不想这样做，因为这对我来说似乎是一个黑客。例如，如果我想向背景添加渐变或图像，则此方法效果不佳。

在 SwiftUI 中如何做到这一点有什么好方法吗？我不介意它是否通过UIViewRepresentable.

Answer 1

实际上，即使这对您来说似乎是一种 hack，但这就是 SwiftUI 的工作原理。

您可以通过创建自定义视图来避免这种“黑客行为”

一个例子可以是：

public struct BackgroundedText: View {

    var first_color = Color.green
    var second_color = Color.white
    var text_color = Color.green

    var size = CGSize(width: 200, height: 100)
    var xOffset: CGFloat = 50
    var yOffset: CGFloat = 50

    var text = "Hello world!"

    init(_ txt: String, _ txt_color: Color, _ fColor: Color, _ sColor: Color, _ size: CGSize, _ xOff: CGFloat, _ yOff: CGFloat) {
        self.text = txt
        self.text_color = txt_color
        self.first_color = fColor
        self.second_color = sColor
        self.size = size
        self.xOffset = xOff
        self.yOffset = yOff
    }


    public var body: some View {
        ZStack{
            Rectangle()
                .frame(width: self.size.width,
                       height: self.size.height)
                .foregroundColor(self.first_color)

            Rectangle()
            .frame(width: self.size.width - xOffset,
                   height: self.size.height - yOffset)
            .foregroundColor(self.second_color)

            Text(self.text)
                .foregroundColor(self.text_color)

        }
    }
}

所以你可以这样使用视图：

struct ContentView: View {
    var body: some View {
        BackgroundedText("Hello", .green, .green, .white, CGSize(width: 200, height: 100), 50, 50)
    }
}

如果需要，您可以根据内部文本调整矩形大小