SwiftUI - 带坐标的 .position 修饰符
SwiftUI - .position modifier with coordinates
我想用修饰符“.position”和每个项目的坐标将项目放置在图像上。但是当我看渲染图的时候,我不明白物品位置的逻辑,用什么公式把物品放在图像上,用的是什么参照系。
我的代码:
ZStack {
Image(self.schema.image)
.resizable()
.aspectRatio(contentMode: .fill)
.border(Color.white)
.shadow(color: self.colorShadow ? Color.green : Color.gray.opacity(0.5) ,radius: 10)
.overlay(
ForEach(self.schema.item) { item in
Text(String(item.id))
.font(.headline)
.foregroundColor(Color.black)
.padding(5)
.overlay(
Circle().stroke(Color.black, lineWidth: 1)
)
.offset(x: 20, y: 100)
.position(x: CGFloat(item.coordinatesX), y: CGFloat(item.coordinatesY))
}
)
}
我的坐标:
Items(id: 1, name: "1", coordinatesX: 0, coordinatesY: 50),
Items(id: 2, name: "2", coordinatesX: 10, coordinatesY: 50),
Items(id: 3, name: "3", coordinatesX: 20, coordinatesY: 50),
Items(id: 4, name: "4", coordinatesX: 30, coordinatesY: 50),
Items(id: 5, name: "5", coordinatesX: 40, coordinatesY: 50),
Items(id: 6, name: "6", coordinatesX: 50, coordinatesY: 50),
Items(id: 7, name: "7", coordinatesX: 60, coordinatesY: 50),
Items(id: 8, name: "8", coordinatesX: 70, coordinatesY: 50)
最终结果:
我不明白为什么它是对角线。感谢您的帮助!
你需要覆盖层中的容器,例如
.overlay(ZStack {
ForEach(self.schema.item) { item in
Text(String(item.id))
.font(.headline)
.foregroundColor(Color.black)
.padding(5)
.overlay(
Circle().stroke(Color.black, lineWidth: 1)
)
.offset(x: 20, y: 100)
.position(x: CGFloat(item.coordinatesX), y: CGFloat(item.coordinatesY))
}
})
我想用修饰符“.position”和每个项目的坐标将项目放置在图像上。但是当我看渲染图的时候,我不明白物品位置的逻辑,用什么公式把物品放在图像上,用的是什么参照系。 我的代码:
ZStack {
Image(self.schema.image)
.resizable()
.aspectRatio(contentMode: .fill)
.border(Color.white)
.shadow(color: self.colorShadow ? Color.green : Color.gray.opacity(0.5) ,radius: 10)
.overlay(
ForEach(self.schema.item) { item in
Text(String(item.id))
.font(.headline)
.foregroundColor(Color.black)
.padding(5)
.overlay(
Circle().stroke(Color.black, lineWidth: 1)
)
.offset(x: 20, y: 100)
.position(x: CGFloat(item.coordinatesX), y: CGFloat(item.coordinatesY))
}
)
}
我的坐标:
Items(id: 1, name: "1", coordinatesX: 0, coordinatesY: 50),
Items(id: 2, name: "2", coordinatesX: 10, coordinatesY: 50),
Items(id: 3, name: "3", coordinatesX: 20, coordinatesY: 50),
Items(id: 4, name: "4", coordinatesX: 30, coordinatesY: 50),
Items(id: 5, name: "5", coordinatesX: 40, coordinatesY: 50),
Items(id: 6, name: "6", coordinatesX: 50, coordinatesY: 50),
Items(id: 7, name: "7", coordinatesX: 60, coordinatesY: 50),
Items(id: 8, name: "8", coordinatesX: 70, coordinatesY: 50)
最终结果:
我不明白为什么它是对角线。感谢您的帮助!
你需要覆盖层中的容器,例如
.overlay(ZStack {
ForEach(self.schema.item) { item in
Text(String(item.id))
.font(.headline)
.foregroundColor(Color.black)
.padding(5)
.overlay(
Circle().stroke(Color.black, lineWidth: 1)
)
.offset(x: 20, y: 100)
.position(x: CGFloat(item.coordinatesX), y: CGFloat(item.coordinatesY))
}
})