Question

I’m working on yet another drawing app with canvas that is many times bigger than screen.
I need some advice/direction on how to that.

Basically what i want is to scroll around this big canvas, drawing only in visible region.
I was thinking of two approaches:

1. Have 64×64 (or whatever) “tiles” to draw on, and then on scroll just load new tiles.
2. Record all user strokes (points) and on scroll calculate which are in specified region, and draw them, using only screen-size canvas.

If this matters, i’m using cocos2d for prototype.

Answer 1

Forget the 2000×200 limitation, I have an open source project that draws 18000 x 18000 NASA images.

I suggest you break this task into two parts. First, scrolling. As was suggested by CodaFi, when you scroll you will provide CATiledLayers. Each of those will be a CGImageRef that you create – a sub image of your really huge canvas. You can then easily support zooming in and out.

The second part is interacting with the user to draw or otherwise effect the canvas. When the user stops scrolling, you then create an opaque UIView subclass, which you add as a subview to your main view, overlaying the view hosting the CATiledLayers. At the moment you need to show this view, you populate it with the proper information so it can draw that portion of your larger canvas properly (say a circle at this point of such and such a color, etc).

You would do your drawing using the drawRect: method of this overlay view. So as the user takes action that changes the view, you do a “setDisplayInRect:” as needed to force iOS to call your drawRect:.

When the user decides to scroll, you need to update your large canvas model with whatever changes the user has made, then remove the opaque overlay, and let the CATiledLayers draw the proper portions of the large image. This transition is probably the most tricky part of the process to avoid visual glitches.

Supposing you have a large array of object definitions used for your canvas. When you need to create a CGImageRef for a tile, you scan through it looking for overlap between the object’s frame and the tile’s frame, and only then draw those items that are required for that tile.