Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
tutorials:flipping_an_object [2012/04/05 12:22] 83.65.86.216tutorials:flipping_an_object [2013/03/05 10:19] (current) – external edit 127.0.0.1
Line 1: Line 1:
 +====== Flipping an object ======
  
 +Sometimes, you need to flip an object horizontally or vertically. Sparrow's display objects do not contain a property that allow you to do so directly. However, it's easy to do so with the ''scaleX'' and ''scaleY'' properties. You just have to use negative values! 
 +
 +Here's how to do it:
 +
 +<code objc>
 +SPImage *image = [SPImage imageWithContentsOfFile:@"image.png"];
 +image.scaleX = -1; // flip horizontally
 +[self addChild:image];
 +</code>
 +
 +The downside is that the bounds of the image move to the left with that approach. Think of the pin-analogy I used in [[manual:display_objects|the manual]]: the pin is where the image is attached to its parent. In an unscaled image, the pin goes through the top left corner. When you change the scale factor, the pin does not move --- but the rest of the image does, reflecting the scale factor. (See image below, left side.)
 +
 +To rectify this, you can simply move the image to the right by its width:
 +
 +<code objc>
 +image.x += image.width;
 +</code>
 +
 +That works, but makes it a little difficult to move the object around. Alternatively, you can move the pivot point of the image to its center. (See image below, right side.) 
 +
 +<code objc>
 +SPImage *image = [SPImage imageWithContentsOfFile:@"image.png"];
 +image.pivotX = image.width  / 2.0f;
 +image.pivotY = image.height / 2.0f;
 +image.scaleX = -1;
 +[self addChild:image];
 +</code>
 +
 +{{ :tutorials:sparrow_mirror.png |Flipping an image}}
 
 
Powered by DokuWiki