iOS Vector Graphics in an iOS App

[ahan.tm]

Hello All,

I currently have an app on the App Store - iBehave(see signature). I am currently working on the next major release, and I have some image questions?

I currently use a lot of images. Specifically, vector images turned to bitmap images. Would it be a better implementation to use bitmap images or let UIKit render the vector images? I am willing to code the vectors(using PaintCode or Drawscript).

If I do use vector graphics, how do I manipulate them? I would need to move them, resize them. Is that easy to do, or is it quite difficult. How about adding text and using Interface Builder?

Thanks,
Ahan Malhotra

 

[xArtx]

Assuming this is 2D, Once you write code for a projection
(which is the thing that translates an arbitrary coordinate system to screen
coordinates and zooms in & out), then it's pretty easy.
Your drawing uses the arbitrary coordinate system, which could, for example,
be geographic coordinates for a GPS,
and the projection code converts the vector data to screen coordinates.

Start with a float called "zoomlevel" which is the distance in your arbitrary
coordnate system, that one point on the screen is currently worth.


If you are using an iPhone 4 (320x480), your screen center coordinate is 160x240,
so let's also make that the current center position of your coordinate system.
Let's say the value for the float "zoomlevel" is currently 2.0,
and the vector where you want to draw a dot is at position x80,y240.

Because 80 is lower than 160, the projection code multiplies 80 x zoomlevel(2.0) = 160.
Subtract 160 from the original center x coord (160), and the result is zero for the x coordinate.
The new screen coordinate is x0,y240
which is a dot in the edge of thew screen halfway down,
instead of a dot quarter of the way in from the left of the screen because your zoom level was 2.0.

From there, everything fancy with movement is point rotation or matrix transformation
on the original points (for the arbitrary coord system) before they are sent to the projection code.
Cheers, Art.

 

[PhoneyDeveloper]

What file format are you talking about?

There are a limited number of screensizes so there's not much benefit to vector graphics over bitmap graphics in most cases.

 

[dantastic]

What file format are you talking about?

There are a limited number of screensizes so there's not much benefit to vector graphics over bitmap graphics in most cases.

Will have to disagree with you on that one. It makes a very large difference in my experience.

I use paintcode after recommendation on this very forum. Paintcode can make the resulting code scalable.

It's a bit of work for each image though so just do it for larger images and not icons for buttons etc.

 

[firewood]

If you let core graphics render your vectors, it will properly anti-alias the lines suitable for the display resolution (Retina or not, etc.) But, for a lot of vectors (many thousands), it may be slower than using a bitmap.

 

[ArtOfWarfare]

If you want the performance of bitmaps coupled with the small download size and scalability of vectors, you could write a category on UIImage or something that can take in the name of a vector file, then:
1 - Search for a bitmap version of the file and return that if it exists.
2 - Generate a new bitmap version of the file, save that, and return it.

Such functionality might already exist... I don't think it's build into the SDK yet but if you search around online you might find someone else has done it. If you don't find it, you might want to write it yourself then share it with the world on github or something.

 

[PhoneyDeveloper]

PaintCode doesn't generate vector images. It generates code that draws on the screen. The design of this code seems to be scalable but that doesn't make it vectorized. See http://en.wikipedia.org/wiki/Vector_image

OP, for smaller images I doubt that you can measure any significant difference between the two methods in terms of image size or drawing speed. So for such images do whatever seems simplest to you. For larger more complex images using code to draw the images will probably take more time than drawing bitmap images but the bitmap images will take up more space on disk than the code does. You'll need to decide between space, drawing speed, and complexity.

I've used code to draw images in some cases but the reason was always because the code needed to determine at runtime what to draw. In one case the code was drawing badges. In another file thumbnails that had some text on them.