1

Swift 5.2, iOS 13

I want to predict/calculate the centre point of a frame after it has been scaled so I can move a shape to it while scaling it. If I try to scale and center an view in an animation/dynamically it doesn't work, with the end result a combination of center points I suspect. So in the images below, the blue box starts in the top right hand corner, I scale and move it to the center. But as you can see from the green box, the scaling has messed up the point it needs to get to...

enter image description here enter image description here

struct SwiftUIView2: View {
@State var relocate = Alignment.topTrailing
@State var zoom:CGFloat = 1.0
@State var tag:Bool = true
@State var tag2:Bool = false
@State var centerPoint: CGPoint = .zero
var body: some View {
    ZStack {
        ZStack(alignment: relocate) {
            Rectangle()
                .stroke(Color.blue, lineWidth: 2)
                .frame(width: 32, height: 32, alignment: .center)
                .onTapGesture {
                    withAnimation {
                    if self.tag {
                        self.zoom = 2.0
                        self.relocate = Alignment.center
                    } else {
                        self.relocate = Alignment.topTrailing
                        self.zoom = 1.0
                    }
                    }
                    DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                        self.tag.toggle()
                    }
                    
            }
            .scaleEffect(zoom, anchor: .topLeading)
        }.frame(width: 256, height: 256, alignment: relocate)
            .border(Color.red)
        if !tag {
                ZStack {
                    Rectangle()
                        .stroke(Color.green, lineWidth: 2)
                        .frame(width: 32, height: 32, alignment: .center)
                        .onTapGesture {
                            self.tag.toggle()
                    }
                }.frame(width: 256, height: 256, alignment: .center)
                    .scaleEffect(zoom, anchor: .center)
        }

    }
}
}

GeoReader I thought would be the answer, but I get garbage from it too. Spent more than a week trying custom alignments, position, everything I can think of. Eyeballed a solution with screen site percentages for now, but obviously it doesn't work too well with different sized screens.

user3069232
  • 8,587
  • 7
  • 46
  • 87
  • 1
    I see *how* do you do it, but I can't understand *what* are you trying to achieve. Is it zoom-in from top-right corner to center of screen? I'd might propose different approach if I know the goal. – Asperi Jun 25 '20 at 06:41
  • @Asperi yes, it is too zoom in from top-right corner to the centre of the screen. So top right small, center large. Center large back to top right small. – user3069232 Jun 25 '20 at 07:29

1 Answers1

1

Here is fix (tested with Xcode 11.4 / iOS 13.4)

            }
            .scaleEffect(zoom)      // << here !! (remove topLeading anchor)
        }.frame(width: 256, height: 256, alignment: relocate)
Asperi
  • 228,894
  • 20
  • 464
  • 690