NSImageView tiles inside NSScrollView draw unwanted borders when zoomed out

Question

I have an NSScrollView, whose documentView is a huge NSView, made of many many sub-NSImageViews, who act as tiles in a map. (The entire map is the NSView, and since it is way bigger than the screen size, its embedded in a scrollview).

I'm able to display the map with correct tile positions, and scroll around with the bars/gestures. However.. when I enable magnification to be able to zoom, the following happens: enter image description here Somehow I'm assuming auto-layout adds the tile borders below, and I don't know how to disable them. These are surely borders, since I have checked thousands of times that my tiles and subviews are the same size.. so where does this come from? I have quite some experience with iOS development, but am completely lost with NSScrollView (Where are my delegate methods?). How do I disable this behavior of the scroll view?

Here's my subview code:

- (void)setupSubViews
{
  NSLog(@"--------Creating subviews!-------");
    //first we create the subviews..
    //This is the key part, we traverse from top Left, and since OS X coordinates start at bottom left, we need to invert the rows!
    for (int i=0; i< NUMBER_OF_COLUMNS; i++) {
        for (int j=NUMBER_OF_ROWS-1; j>=0; j--) {
            CGRect frame = CGRectMake(i*256, j*256, 256, 256);
            NSImageView *newView = [[NSImageView alloc] initWithFrame:frame];
            newView.focusRingType = NSFocusRingTypeNone; //I gave this focusRing a try, it didn't work :(

            [self addSubview:newView];
        }
    }

}

And this is where I connect the subviews to the actual images..

-(void)updateMap:(id)tilesPassed{

    if (downloadFinished) {
        NSLog(@"--------DRAW RECT-------------");
        NSImageView *subView;
        NSInteger idx = 0;

        for (int i =0; i<[self.subviews count]; i++) {
            subView = [self.subviews objectAtIndex:i];
            [subView setAllowsCutCopyPaste:NO];
            [subView setImageFrameStyle:NSImageFrameNone]; //This doesnt work either :(

            MapTile *tile = [tilesArray objectAtIndex:idx];
            subView.image = tile.image;

            idx++;
        }
    }
}

That really looks like a drawing artifact as opposed to a "border" being intentionally drawn. Depending on your zoom level, you may need to make a slightly larger image to make sure that pixel rounding isn't causing you to be asked to draw slightly smaller images than necessary to draw the right area. — gaige
My problem is: This whole thing needs to be zoomable (working). If I only use zoom level 1, and turn Magnification off, I see no lines. They only appear once I zoom.. — Cutetare

Johannes Fahrenkrug Johannes Fahrenkrug · Accepted Answer · 2014-01-01T14:15:12

You probably don't want to use subviews for this. There is a CALayer subclass for exactly this purpose: CATiledLayer: https://developer.apple.com/library/mac/documentation/GraphicsImaging/Reference/CATiledLayer_class/Introduction/Introduction.html

With it you can even load different image tiles based on how far you are zoomed in, just like Google Maps. It will render without borders and the performance will be WAY better than using lots of subviews. Subviews are expensive, layers are (generally) cheap.

Update: This example will get you up and running: http://bill.dudney.net/roller/objc/entry/catiledlayer_example

NSImageView tiles inside NSScrollView draw unwanted borders when zoomed out

2 Answers