Início / coding / Perguntas / 78467353
Accepted
giik
Asked: 2024-05-12 17:41:46 +0800 CST

Por que um ResolvedSymbol sempre tem o tamanho de visualização do Canvas?

  • 772

Então, se você Canvasquiser saber o tamanho (caixa delimitadora) de um símbolo resolvido, por exemplo, para posicionamento relativo a outros símbolos ou caminhos desenhados diretamente nele, isso não é possível inspecionando a propriedade GraphicsContext.ResolvedSymbol.size ?

Isto é surpreendente. Não sou um bloqueador do que quero fazer, mas gostaria de entender o porquê desse comportamento específico, se alguém souber e puder explicar?

Exemplo trivial para reproduzir abaixo, ao alternar as saídas dos botões

canvas size: (400.0, 350.0); symbol size: (400.0, 350.0)
toggled
canvas size: (500.0, 450.0); symbol size: (500.0, 450.0)
toggled
canvas size: (400.0, 350.0); symbol size: (400.0, 350.0)

struct ContentView: View {
  @State private var large = false
  var body: some View {
    VStack {
      Button {
        large.toggle()
        print("toggled")
      } label: {
        Text("Toggle Size")
      }
      Spacer()
      Canvas { context, size in
        let s0 = context.resolveSymbol(id: 0)!
        print("canvas size: \(size); symbol size: \(s0.size)")
        context.draw(s0, in: CGRect(origin: .zero, size: size))
      } symbols: {
        Path(ellipseIn: CGRect(origin: .zero, size: CGSize(width: 300, height: 300)))
          .stroke(.green, lineWidth: 10)
          .border(.blue)
          .tag(0)
      }
      .frame(width: large ? 500 : 400, height: large ? 450 : 350)
    }.padding()
  }
}
swiftui

2 respostas

  1. Best Answer

    Acho que o que você vê quando resolve o símbolo e examina seu tamanho é o retângulo delimitador do Path, sendo este:

    Um retângulo contendo todos os segmentos do caminho

    (ref. Documentação do caminho ).

    Portanto, quando o símbolo é criado desta forma, parece que o retângulo delimitador utiliza todo o espaço disponível. Você pode restringi-lo ao mesmo tamanho da elipse aplicando um .framemodificador ao Path:

    Path(ellipseIn: CGRect(origin: .zero, size: CGSize(width: 300, height: 300)))
    .stroke(.green, lineWidth: 10)
    .frame(width: 300, height: 300) // 👈 HERE
    .border(.blue)
    .tag(0)
    • 1

  2. Para constar, aqui está o código modificado da pergunta original que ilustra a resposta fornecida por Benzy Neez .

    O primeiro .drawé o "círculo" original não modificado e o segundo é dimensionado para se ajustar à Canvasvisualização.

    struct ContentView: View {
  @State private var large = false
  let p1 = Path(ellipseIn: CGRect(origin: .zero, size: CGSize(width: 200, height: 200)))

  var body: some View {
    VStack {
      Button {
        large.toggle()
        print("toggled")
      } label: {
        Text("Toggle Size")
      }
      Spacer()
      Canvas { context, size in
        let s0 = context.resolveSymbol(id: 0)!
        print("canvas size: \(size); symbol size: \(s0.size)")
        context.draw(s0, in: p1.boundingRect)
        context.draw(s0, in: CGRect(origin: .zero, size: size))
      } symbols: {
        p1
          .stroke(.green, lineWidth: 10)
          .frame(width: p1.boundingRect.width, height: p1.boundingRect.height)
          .border(.blue)
          .tag(0)
      }
      .frame(width: large ? 500 : 350, height: large ? 400 : 250)
    }.padding()
  }
}
    • 0

relate perguntas