Início / coding / Perguntas / 79272644
Accepted
Deepak Sharma
Asked: 2024-12-12 01:27:32 +0800 CST

SwiftUI "mascara" as partes esquerda e direita de uma visualização

  • 772

Tenho um retângulo arredondado e desejo mascarar as partes esquerda e direita dele (cujas larguras podem ser definidas como Statevariáveis). O que eu quero é que o retângulo arredondado preserve seu formato de retângulo arredondado conforme aplico máscaras esquerda e direita. Digo máscara para fins de explicação, mas a implementação real pode não usar .masko modificador se criar problemas no teste de acerto para reconhecedores de gestos em toda a visualização.

Aqui está o código para mascarar as partes esquerda e direita de um retângulo arredondado.

struct MaskTesting: View {

  @State var rectWidth:CGFloat = 300
  @State var leftMaskWidth:CGFloat = 100
  @State var rightMaskWidth:CGFloat = 100

  var body: some View {
    
    Rectangle()
        .fill(Color.orange)
        .frame(maxHeight:70)
        .frame(width: rectWidth)
        .clipShape(RoundedRectangle(cornerRadius: 5))
        .overlay(alignment: .leading) {
            Rectangle()
                .fill(Color.purple)
                .frame(maxHeight:70)
                .frame(width: leftMaskWidth)
        }
        .overlay(alignment: .leading) {
            Rectangle()
                .fill(Color.purple)
                .frame(maxHeight:70)
                .frame(width: rightMaskWidth)
                .offset(x:rectWidth - 100)
        }
    
}

A saída é algo como isto. Mas eu quero que a visualização laranja principal seja um retângulo arredondado do que um retângulo simples na saída. Como eu implemento isso no SwiftUI?

insira a descrição da imagem aqui

1 respostas

  1. Best Answer

    Uma RoundedRectanglemáscara pareceria a solução mais óbvia:

    Rectangle()
    .fill(.orange)
    .frame(maxHeight: 70)
    .frame(width: rectWidth)
    .mask {
        RoundedRectangle(cornerRadius: 5)
            .padding(.leading, leftMaskWidth)
            .padding(.trailing, rightMaskWidth)
    }
    .background(.purple)

    No entanto, você diz que isso não é possível, porque não funciona para testes de acerto. Então, aqui estão duas outras técnicas possíveis.

    1. Usar.blendMode

    O efeito de uma máscara também pode ser alcançado usando .blendMode. Em particular, o modo de mesclagem .destinationOutpode ser usado para "cortar" uma forma de uma visualização subjacente. O "escopo" do modo de mesclagem precisa ser restringido aplicando .compositingGroup, caso contrário, ele continua queimando em camadas inferiores:

    Rectangle()
    .fill(.orange)
    .frame(maxHeight: 70)
    .frame(width: rectWidth)
    .overlay {
        RoundedRectangle(cornerRadius: 5)
            .padding(.leading, leftMaskWidth)
            .padding(.trailing, rightMaskWidth)
            .blendMode(.destinationOut)
            .background(.purple)
            .compositingGroup()
    }

    Captura de tela

    2. Use um Shapeformato de clipe personalizado

    Uma abordagem alternativa é definir um Shapeformato personalizado, que pode então ser usado como clipe:

    struct CustomClipShape: Shape {
    let leftMaskWidth: CGFloat
    let rightMaskWidth: CGFloat

    func path(in rect: CGRect) -> Path {
        Path(
            roundedRect: CGRect(
                x: rect.minX + leftMaskWidth,
                y: rect.minY,
                width: rect.width - leftMaskWidth - rightMaskWidth,
                height: rect.height
            ),
            cornerRadius: 5
        )
    }
}

    Rectangle()
    .fill(.orange)
    .frame(maxHeight: 70)
    .frame(width: rectWidth)
    .clipShape(
        CustomClipShape(
            leftMaskWidth: leftMaskWidth,
            rightMaskWidth: rightMaskWidth
        )
    )
    .background(.purple)

    O resultado parece o mesmo de antes.

    Em relação ao teste de acerto, a área receptiva ao teste de acerto pode ser restringida definindo a mesma forma que .contentShape:

    .contentShape(
    CustomClipShape(
        leftMaskWidth: leftMaskWidth,
        rightMaskWidth: rightMaskWidth
    )
)

    Se essas técnicas não resolverem o problema do teste de acerto, talvez você possa elaborar mais sobre qual é exatamente o problema, para que ele possa ser abordado como o problema principal.

    • 1

relate perguntas