Tile & Scale an Image

Question

karim OP

Created Nov ’24

Replies 1

Boosts 0

Participants 1

Working on a macOS app. I need to display user-added images as a background to the view, with all of:

Tiling (auto repeat in both axes)
Scaling (user-configured scale of the image)
Offset (user-configured offset)

I've been able to achieve scaling and offset with:

Image(nsImage: nsImage)
    .scaleEffect(mapImage.scale)
    .offset(mapImage.offset)
    .frame(width: scaledImageSize.width, height: scaledImageSize.height)

But when I try to incorporate tiling into that with .resizable(resizingMode: .tile) everything breaks.

Is there a way to position the "anchor" of an image, scale it, and tile it in both axes to fill a container view?

Boost

Answer 1

karim OP

Nov ’24

Figured it out, I think. This seems to work:

ZStack {
    Rectangle()
        .foregroundStyle(.image(image, scale: mapImage.scale * mapZoom))
        .offset(mapImage.offset)
        .frame(width: scaledImageSize.width, height: scaledImageSize.height)
}
.frame(width: mapSize.width,  height: mapSize.height)
.clipped()

0