2

What I like to achieve with SwiftUI is that a certain part of in image (a x,y point provided by the content management system) is always visible, also in cases the image needs to be resized and cropped to fit the layout.

Visual example of what I want to achieve

The following example code produces the output which can be seen in the first screen shot of the example:

struct NewsPost{
    var image: UIImage
    var imageSalientPoint: CGPoint
    var headline: String
}

struct ContentView: View {
    var newsPost = NewsPost(image: #imageLiteral(resourceName: "example1"), imageSalientPoint: CGPoint(x: 150, y: 300), headline: "The power of swift UI!")

    var body: some View {

        VStack(){
            Image(uiImage: newsPost.image)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(height: 175, alignment: .top)
                .clipped()
        }

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ZStack{
            Color.purple.edgesIgnoringSafeArea(.all)
            ContentView()
        }
    }
}

If the frame of the image would be constant, I could solve the issue by adding a offset(x:,y:) modifier. However, the frames differ in size (e.g. in my example the width depends on the device) so the offset needs to be calculated dynamically. For this I need to know the size of the image frame and the new size of the UIImage.

I experimented with GeometryReader and ÀnchorPreferences without success. Any idea how to solve this in SwiftUI?

Markus
  • 21
  • 2
  • Would you provide some visual demo of what you have now and what you try to achieve? – Asperi Apr 01 '20 at 07:25
  • Hi @Asperi! I added an image which hopefully explains what I want to achieve. If not I'm happy to add more examples. – Markus Apr 02 '20 at 21:02

0 Answers0