1

示例图像

在我的示例图像中,您可以看到我的文本元素正在旋转,但其他元素没有旋转,或者如果我应用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)
4

0 回答 0