使用坐标和ZSTACK结合视图

Question

我在订购，结合和定位的固体形状和文本方面有一个问题

，但任务很简单，但是虽然我在swfitui中完全新手，但我不能为我的自我

task ：用zstack放置坚固的形状亲戚使用坐标（包括每种形状的文本）和应用等距/怪异修饰符

我很高兴为解释和提示

---

使用

无修饰符

与等距修饰符一起使用

struct ContentView: View {
  @ObservedObject var datas = ReadData()
  
  //MagnificationState
    
  //DragState

  //@GestureState
  //@State viewMagnificationState
  
  //@GestureState
  //@State viewDragState
  
  //magnificationScale
  
  //translationOffset
  
  //@State popoverState
  //@State selectedShape
  
  var body: some View {
    //magnificationGesture
    
    //dragGesture
    
    //magnificationGesture.simultaneously
    
    GeometryReader { geometry in
      ZStack(alignment: .topLeading) {
        MainShape(showingPopover: $popoverState,
                  setCurrentShape: $selectedShape,
                  alldatas: datas.pokedex)
      }          
      .scaleEffect(magnificationScale)
      .offset(translationOffset)
      //.position(x: geometry.size.width / 2, y: geometry.size.height / 2)
      //.gesture(both)
      //popover
    }
    .edgesIgnoringSafeArea(.all)
    .frame(maxWidth: .infinity, maxHeight: .infinity)
  }
}

struct MainShape: View {    
  let alldatas: [PokedexElement]

  var body: some View {
    ForEach(alldatas, id: \.id) { shape in
      
      ZStack(alignment: .topLeading) {
        Text(shape.metaProperties.name)
          .font(.system(size: 20))
          .zIndex(2)
          .offset(x: shape.metaProperties.offset.x, y: shape.metaProperties.offset.y)

        Rectangle()
          .cornerRadius(shape.id == 1 ? 55 : 10)
          .foregroundColor(chooseColor(shape.metaProperties.color))
          .offset(x: shape.metaProperties.offset.x, y: shape.metaProperties.offset.y)
          .frame(
            width: shape.metaProperties.size.width,
            height: shape.metaProperties.size.height
          )
          .isometric()
          .zIndex(1)
          .onTapGesture {
            self.showingPopover = true
            self.setCurrentShape = shape.id
          }
      }
    }
  }
}

---

数据：

[
    {
        "id": 1,
        "parentId": 0,
        "baseProperties": {
          "name": "",
          "descr": "",
          "contacts": ""
        },
        "metaProperties": {
            "name": "root",
            "status": true,
            "type": "plain",
            "size": {
                "width": 350,
                "height": 350
            },
            "offset": {
                "x": 0,
                "y": 0
            },
            "color": "blue"
        }
    },
    {
        "id": 2,
        "parentId": 1,
        "baseProperties": {
          "name": "object 1",
          "descr": "",
          "contacts": ""
        },
        "metaProperties": {
          "name": "child 1",
            "status": true,
            "type": "imobject",
            "size": {
                "width": 50,
                "height": 50
            },
            "offset": {
                "x": 50,
                "y": 50
            },
            "color": "red"
        }
    },
    {
        "id": 3,
        "parentId": 1,
        "baseProperties": {
          "name": "object 1",
          "descr": "",
          "contacts": ""
        },
        "metaProperties": {
          "name": "child 2",
            "status": true,
            "type": "imobject",
            "size": {
                "width": 100,
                "height": 50
            },
            "offset": {
                "x": 100,
                "y": 50
            },
            "color": "green"
        }
    }
]

---

修改器…

extension View {
  func chooseColor(_ name: String) -> Color {
    switch name {
    case "red":
      return Color.red
    case "blue":
      return Color.blue
    case "brown":
      return Color.brown
    case "green":
      return Color.green
    case "yellow":
      return Color.yellow
    case "white":
      return Color.white
    default :
      return Color.black
    }
  }
  
  func perspective() -> some View {
    self
      .rotation3DEffect(.degrees(45), axis: (x: 1, y: 0, z: 0))
  }
  
  func isometric() -> some View {
    self
      .rotationEffect(Angle.init(degrees: 45))
      .scaleEffect(y: 0.5)
  }
}

Answer 1

任务很容易，而不是使用“黑匣子中的魔法方法”使用常规的实体形状，所有这些都可以手动

转换为ISO，并将其与文本或其他任何内容一起放置，并且偏移会很好