在我的示例图像中,您可以看到我的文本元素正在旋转,但其他元素没有旋转,或者如果我应用rotationEffect,它们会开始异常行为(就像它们未对齐)。那么让它们全部旋转的最佳方法是什么。
所以这里 VStack 包含我的 textElements 。但其他两个按钮(缩放和旋转不作为元素)
例如,它们在 ZStack 中 *
ZStack{
ForEach(model.textBoxes){box in
if box.img == ""{
ZStack (alignment : .bottomTrailing){
ZStack (alignment : .topTrailing){
VStack(spacing : 0){
Rectangle()
.fill(Color.blue)
.frame(width: 6, height: 6)
HStack(spacing : 0) {
Rectangle()
.fill(Color.blue)
.frame(width: 6, height: 6)
ZStack {
Text(box.text)
.font(.custom(box.textFont,size : CGFloat(box.textSize)))
.foregroundColor(box.textColor)
.padding(box.bgPadding)
.background(
ZStack {
RoundedRectangle(cornerRadius: box.bgRadius)
.fill(box.bgColor.opacity(box.bgSize))
}
)
.rotation3DEffect(.degrees(box.hFlipDegree), axis: (box.hFlipX,box.hFlipY,box.hFlipZ))
.opacity(box.textOpacity)
.shadow(color: box.shadowColor, radius: box.shadowSize)
}
Rectangle()
.fill(Color.blue)
.frame(width: 6, height: 6)
}
Rectangle()
.fill(Color.blue)
.frame(width: 6, height: 6)
}
.background(
ZStack{
if box.id == model.textBoxes[currentIndex].id {
OuterBorder()
}
}
)
.rotationEffect(box.rotationAngle)
if box.id == model.textBoxes[currentIndex].id {
Image(systemName : "arrowtriangle.left.and.line.vertical.and.arrowtriangle.right.fill")
.background(
Color.white.cornerRadius(50)
)
.rotationEffect(.degrees(-45))
.frame(width: 5, height: 5)
.gesture(DragGesture()
.onChanged({ (value) in
currentTextSize = model.textBoxes[currentIndex].textSize
if (model.textBoxes[currentIndex].textSize < 101){
let data = Double(value.location.x)
debugText = String(data/10)
if((model.textBoxes[currentIndex].textSize + (data/10)) < 100 && (model.textBoxes[currentIndex].textSize + (data/10)) > 20)
{
model.textBoxes[currentIndex].textSize = model.textBoxes[currentIndex].textSize + (data/10)
}
}
})
.onEnded({ (value) in
})
)
}
}
Image(systemName : "arrow.triangle.2.circlepath")
.background(
Color.white.cornerRadius(50)
)
.frame(width: 5, height: 5)
.gesture(DragGesture()
.onChanged{ v in
if(v.translation.width > v.translation.height){
length = v.translation.width
}else {
length = v.translation.height
}
let dis = atan2(v.location.x - self.length / 2, self.length / 2 - v.location.y) * 180 / .pi
//debugText = dis.description
debugText = dis.description
ang = Double(debugText) ?? 0
model.textBoxes[currentIndex].rotationAngle = Angle(degrees: ang)
}
)
}
.offset(box.offset)
.gesture(DragGesture()
.onChanged({ (value) in
let current = value.translation
let lastOffset = box.lastOffset
let newTranslation = CGSize(width: lastOffset.width + current.width, height: lastOffset.height + current.height)
currentIndex = getIndex(textBox: box)
model.textBoxes[getIndex(textBox: box)].offset = newTranslation
})
.onEnded({ (value) in
currentIndex = getIndex(textBox: box)
model.textBoxes[getIndex(textBox: box)].lastOffset = value.translation
})
)
.onTapGesture {
currentIndex = getIndex(textBox: box)
}
.gesture(MagnificationGesture()
.onChanged({ (val) in
let delta = val / self.lastScaleValue
self.lastScaleValue = val
model.textBoxes[currentIndex].textSize = model.textBoxes[currentIndex].textSize * delta
}).onEnded({ (val) in
self.lastScaleValue = 1.0
})
)
}
else{
ZStack{
Image(String(box.img))
.resizable()
.rotation3DEffect(.degrees(box.hFlipDegree), axis: (box.hFlipX,box.hFlipY,box.hFlipZ))
.rotationEffect(box.rotationAngle)
.frame(width: box.imgWidth, height: box.imgHeight
, alignment: .center)
.padding(box.bgPadding)
.background(
ZStack {
RoundedRectangle(cornerRadius: box.bgRadius)
.fill(box.bgColor.opacity(box.bgSize))
if box.id == model.textBoxes[currentIndex].id {
OuterBorder()
}
}
)
}
.offset(box.offset)
.gesture(DragGesture()
.onChanged({ (value) in
let current = value.translation
let lastOffset = box.lastOffset
let newTranslation = CGSize(width: lastOffset.width + current.width, height: lastOffset.height + current.height)
currentIndex = getIndex(textBox: box)
model.textBoxes[getIndex(textBox: box)].offset = newTranslation
})
.onEnded({ (value) in
currentIndex = getIndex(textBox: box)
model.textBoxes[getIndex(textBox: box)].lastOffset = value.translation
})
)
.onTapGesture {
currentIndex = getIndex(textBox: box)
}
}
}
}
.frame(width: UIScreen.main
.bounds.width, height: UIScreen.main
.bounds.width)