Маска прямоугольника с текстом в SwiftUI - PullRequest
Новая
       43

Маска прямоугольника с текстом в SwiftUI

1 голос
/ 01 октября 2019

Я хочу добиться следующего с помощью SwiftUI:

masked rectangle

Это то, что я пробовал: 

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.

1 Ответ

0 голосов
/ 01 октября 2019

На самом деле, даже если это может показаться вам хаком, именно так работает 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)
    }
}

Если хотите, вы можете изменить размер прямоугольника на основе текста внутри

...