scale - SwiftUI: ZStack with scaleEffect - how to align scaled image to bottom?

Question

I have a ZStack in which an Image is presented. The image needs to be scaled in some cases.

I am failing on aligning the scaled image on the bottom of the ZStack, it is always presented in the middle.

I tried ZStack(alignment: .bottom) in combination with .alignmentGuide(.bottom) for the image, but this does not change the outcome.

Also putting a VStack around the image and placing a Spacer() above it does not change the result.

The HStack is not relevant and is only shown, because I need an ZStack in this construct. But The main issue is with the VStack, that it does not move after scaling in the Space of the ZStack.

It seems like .scaleEffect just uses position and frame of the original image and places the scaled image in the middle. Is this a limitation of scaleEffect? What other function can be used?

This is my View (reduced code): // I colored the background purple, to show the full size of the ZStack

var body: some View {
    ZStack(alignment: .bottom) {
        Color.purple
        Image(battlingIndividual.getMonster().getStatusImageName(battlingIndividual.status))
            .resizable()
            .scaledToFill()
            .scaleEffect(battlingIndividual.getMonster().size.scaleValue)
        HStack() {
            SkillViews(battlingIndividual: battlingIndividual)
            Spacer()
        }
      }
}

The outcome is this:

But it should look like this:

EDIT: I added a Background to the image, in order to show that the image is centered in the ZStack.

---

Solution: We don′t need an alignment in this case, we need an anchor:

.scaleEffect(battlingIndividual.getMonster().size.scaleValue, anchor: .bottom)

Solution Image:

question from:https://stackoverflow.com/questions/65860335/swiftui-zstack-with-scaleeffect-how-to-align-scaled-image-to-bottom

Answer 1

I assume this view container ZStack is a one cell view, so you need to align not ZStack which tights to content, but entire HStack containing those monster cells, like

HStack(alignment: .bottom) {    // << here !!
   ForEach ... {
      MonsterCellView()
   }
}