Keep text on an image readable while rotating the image - objective-c

I have an image view that looks like a wheel. This view detects touch events on each of the colored sections.
The problem I have is that when I rotate this wheel, the UILabels on top of the view need to also be rotated so that the text is still horizontal and human readable.
What is the best way to rotate the labels while the parent view is being rotated?
This is what I am trying now and it does not rotate correctly...
CGAffineTransform textTransform = CGAffineTransformRotate(newTransform, newAngle * -1);

Presumably you are applying a rotation transform to rotate the wheel. If the labels are subviews of the wheel view, their centers are pinned in the right places to the wheel (because a view is located in its superview by its center), and they will travel around with it. At the same time, apply the inverse rotation transform to the labels. The rotation takes place around the center of each label. So each label stays in the right place and stays upright.
An afterthought - also make sure you're not using autolayout on these labels. Autolayout breaks view transforms.

Related

Completely transparent UIButton with irregular hit area

I know how to use a background image with alpha channel to create a UIButton with an irregular tap area. But with this solution, only the ignore-tap area is transparent; the tap area consists of the opaque.
What I want is a totally transparent UIButton, with an irregular tap area. (It triggers an animation behind the button.)
It seems that some sort of extra UILayer with some hit-testing could work, but I don't quite see how. Suggestions welcome.
Here's my solution. The problem: A UIImageView (call it the base view) to which I want to attach an irregularly-shaped tap area. The area corresponds to something in the image, let's call it a river. It could be a non-connected region.
In the Finder, duplicate the view's image, and make all the non-river pixels transparent, using your favorite graphics app. Call this the mask image.
When the base view is tapped, check to see if the corresponding pixel in the mask image is or is not transparent. (Solution left to reader; examples abound.)
So the mask image is never actually rendered, it is just used as a reference.
Note that if the base view gets resized or moved around (as it does in my app, via animating its constraints) then you have to "move" the mask image too, or in some other way manage the coordinate translation between view and mask. The easiest way to do this is to make the mask image a hidden subview of the base view, with its left, top, leading and trailing anchors constrained to be equal to those of the base view. Then they move around together, and the coord translation between the two is the identity.
I wrapped all this up in a subclass of UIImageView so that it manages its own mask, and calls a delegate if the "river" (or whatever) is tapped.

OS X chat app with resizable bubbles

I'm building chat application for Mac OS, similar to iMessage. I wonder, how can I implement resizable text views in bubbles. I mean, when I resize chat window bubbles with text will resize to. Any ideas, links will be very useful. Thank you for help)
For text resizing, you use auto layout. If you have an NSScrollView containing MYBubbleViews containing NSTextViews, you can add NSLayoutConstraints using the leftAnchor and rightAnchor properties of the scroll view's content view and those of the bubble view, and add constraints between all edges of the text view and bubble view. Then pin the bubble views to the top/prev view.
Also make sure you set the NSTextView to wrap. The width of the intrinsic size of the text view will be set so that it fills the width and the intrinsic height will be set to fit the whole text.
I previously thought it was about drawing the bubbles, so I first gave this answer:
If you look at Messages.app, you'll see that they're not circular bubbles. They are basically composed of several shapes overlaid on each other. A rectangle with rounded corners, plus a bezier path of the tip.
So you should be able to take a NSTextView for the text, make it a subview of a custom view that draws a rounded rectangle and the tip in its drawRect method, and then use auto layout constraints to make your bubble view resize with the text view and the text view to the window width.
You could probably also have the bubble view host a CALayer with fill and rounded corners, plus one with an image for the tip (or aCAShapeLayer for the tip), but drawRect is the easier approach.

Resizing CAShapeLayer

I have a simple test app on which my rootViewController's UIView contains a bunch of UIView subviews. Each one of those UIView subview is backed by a CAShapeLayer.
I want the composition created by those subviews ( the four shapes that are within the dotted area .. ) to always stay vertically and horizontally centered with respect to my
UIWindow. (the minimium size of the left/right, top/bottom margins will be subject to be changed at runtime at each orientation change )
So for example when i rotate to portrait i will have to
resize and reposition those single shapes so that the whole figure will be mantained centered and each CAShapeLayer sublayer stays sharp ( i want their path to be resized not just a raster resize )
what would be the best technique to resize/move the shapes to always have a centered composition while maintaining path crisp appearance for the shapes?
Ultimately for me it will be good to have an answer to this: how can i shrink the subviews as a whole? i mean their sizes and relative positions?
Thanks
You can use CGPathCreateMutableCopyByTransformingPath() or -[UIBezierPath applyTransform:] to recalculate all points in the path.

Resize UIImage/UIImageView without keeping aspect ratio

I have a UIImageView that I've added a PinchGestureRecognizer to. Currently, the image is resized nicely when pinching, but I want to be able to resize the image without maintaining the aspect ratio. So if the user pinches horizontally, the image view's width would enlarge; if they pinch vertically, the height would enlarge and so forth.
Can anyone give me a hint on how I could do that please?
Write a custom gesture recognizer that requires two fingers to be on screen.
Once both fingers are on screen store their offset to the imageView's border in some UIEdgeInsets.
In touchesMoved, check if both fingers are onscreen: if so, calculate the new frame by applying the edgeInsets in the current touch position.
Header: click
Implementation: click
Works well and feels more natural than other implementations I've seen.
You would need to do the touch handling yourself as UIPinchGestureRecognizer only supports one scale which has no concept of being pinched horizontally or vertically.
You could create your own subclass of UIGestureRecognizer (see here for docs) which looked at the horizontal and vertical separation of the touch points to determine 2 different scales. It should be fairly straightforward to create I would have thought. Just look at the initial touch points and then when they move, calculate the difference in the current separation of the touches to the initial separation of the touches, in both the vertical and horizontal directions.

What's the RIGHT way to draw an image in the upper left corner on a mac?

I have an NSView in a ScrollView and I'm trying to draw an image in it. The problem is that I want the upper left corner of the image locked to the upper left corner of the frame, instead of the lower left corner, which is what the View wants me to do. I will need to be able to zoom in and out, and rotate.
currently, I have a kludge of a system where I calculate how much I have to translate my image based on the size of the image and the size of the window. In order to do this, I needed to create an extra view outside the scrollview, so that I could get the size of the window, not including decorations. Then I can calculate the size of the view based on the size of the image and the size of the window, and based on THAT, I can figure out where to translate the image to.
My only other thought was to use the isFlipped: method, but that ends up reversing my image L-R which is bad.
Is there another way I should be doing this?
If you want 0,0 to be in the upper-left corner, then overriding -isFlipped to return YES is the way to go. It should not affect the coordinate systems of any subviews (I think!), but images drawn directly into the flipped view will appear upside-down unless you apply a transform to them.
View Programming Guide for Cocoa: View Geometry