I'm fairly new to Quartz 2D.
Imagine the following scenario:
You have a circle-shaped mini map view.
I'm drawing triangle (the arc isn't important right now) on top of the map. This shape represents the visible area.
I need to have the triangle shape rotate along the mini map as the user changes orientation.
Currently this how the path is being drawn:
CGAffineTransform transform = CGAffineTransformMakeRotation(angleInRadians);
CGPath visibleAreaPath = CGPathCreateMutable();
CGPathMoveToPoint(visibleAreaPath, &transform, miniMapCenter.x, miniMapCenter.y);
CGPathAddLineToPoint(visibleAreaPath, &transform, 18.0, 8.0);
CGPathAddLineToPoint(visibleAreaPath, &transform, 66.0, 8.0);
CGPathCloseSubpath(visibleAreaPath);
I then draw the path using a CAShapeLayer like so:
CALayer *rootLayer = [visibleAreaView layer];
visibleAreaShape = [CAShapeLayer layer];
[visibleAreaShape setFillColor:[UIColor colorWithHue:0.584 saturation:0.8 brightness:0.9 alpha:0.6].CGColor];
[visibleAreaShape setFillRule:kCAFillRuleNonZero];
[visibleAreaShape setAnchorPoint:CGPointMake(0.5, 0.5)];
[rootLayer addSublayer:visibleAreaShape];
[visibleAreaShape setPath:visibleAreaPath];
The path is being rotated, but not based on a given origin.
Keep in mind that setting the layer's anchor point doesn't help me since what I want is to rotate the path (ultimately I wouldn't even need to display it, since I will be using it to determine which points are visible on the mini map).
Any ideas on how to accomplish this?
Thank you.
I would suggest you store the points in polar form and convert to a path when needed. It's very easy to rotate in polar coordinates (simply change the theta value).
Related
I have a UIImage that has a transparent background. When rotating this image, I'd like to find the bounding box around the graphic (ie the nons transparent part, if you rotate it in a UIImageView, it will find the bounding box around the entire UIImage including the transparent part).
Is there an Apple library that might do this for me? If not, does anyone know how this can be done?
If I understood your questions correctly, you can retrieve the frame (not bounds) of uiimageview then get the individual cgpoints and explicitly transform these points to get a transformed rectangle. Because in Apple's documentation it says: You can operate on a CGRect structure by calling the function CGRectApplyAffineTransform. This function returns the smallest rectangle that contains the transformed corner points of the rectangle passed to it. Transforming points 1 by 1 should avoid this auto-correcting behavior.
CGRect originalFrame = UIImageView.frame;
CGPoint p1 = originalFrame.origin;
CGPoint p2 = p1; p2.x += originalFrame.width;
CGPoint p3 = p1; p3.y += originalFrame.height;
//Use the same transformation that you applied to uiimageview here
CGPoint transformedP1 = CGPointApplyAffineTransform(p1, transform);
CGPoint transformedP2 = CGPointApplyAffineTransform(p2, transform);
CGPoint transformedP3 = CGPointApplyAffineTransform(p3, transform);
Now you should be able to define a new rectangle from these 3 points (4th one is optional because width and height can be calculated from 3 points. One point to note is that you cannot store this new rectangle in a cgrect because cgrect is defined by an origin and a size so its edges are always parallel to x and y axis. Apple's cgrect definition does not allow rotated rectangles to be stored.
I know that Core Image on iOS 5.0 supports facial detection (another example of this), which gives the overall location of a face, as well as the location of eyes and a mouth within that face.
However, I'd like to refine this location to detect the position of a mouth and teeth within it. My goal is to place a mouth guard over a user's mouth and teeth.
Is there a way to accomplish this on iOS?
I pointed in my blog that tutorial has something wrong.
Part 5) Adjust For The Coordinate System: Says you need to change window's and images's coordinates but that is what you shouldn't do. You shouldn't change your views/windows (in UIKit coordinates) to match CoreImage coordinates as in the tutorial, you should do the other way around.
This is the part of code relevant to do that:
(You can get whole sample code from my blog post or directly from here. It contains this and other examples using CIFilters too :D )
// Create the image and detector
CIImage *image = [CIImage imageWithCGImage:imageView.image.CGImage];
CIDetector *detector = [CIDetector detectorOfType:CIDetectorTypeFace
context:...
options:...];
// CoreImage coordinate system origin is at the bottom left corner and UIKit's
// is at the top left corner. So we need to translate features positions before
// drawing them to screen. In order to do so we make an affine transform
CGAffineTransform transform = CGAffineTransformMakeScale(1, -1);
transform = CGAffineTransformTranslate(transform,
0, -imageView.bounds.size.height);
// Get features from the image
NSArray *features = [detector featuresInImage:image];
for(CIFaceFeature* faceFeature in features) {
// Get the face rect: Convert CoreImage to UIKit coordinates
const CGRect faceRect = CGRectApplyAffineTransform(
faceFeature.bounds, transform);
// create a UIView using the bounds of the face
UIView *faceView = [[UIView alloc] initWithFrame:faceRect];
...
if(faceFeature.hasMouthPosition) {
// Get the mouth position translated to imageView UIKit coordinates
const CGPoint mouthPos = CGPointApplyAffineTransform(
faceFeature.mouthPosition, transform);
...
}
}
Once you get the mouth position (mouthPos) you simply place your thing on or near it.
This certain distance could be calculated experimentally and must be relative to the triangle formed by the eyes and the mouth. I would use a lot of faces to calculate this distance if possible (Twitter avatars?)
Hope it helps :)
My question is simple.
Let us say I use this method
CGAffineTransformMakeTranslation(5.0f, 0.0f);
which translates the image view 5 pixels to the right. But is there a similar method that does the exact same thing except takes the destination point as an argument rather then the values you want to move the image view by?
For example, if I wanted to move an image view to 100.0f, 0.0f what would I use?
You can use the following two options:
imgOne.center = CGPointMake(50, 50);
or
imgOne.frame = CGRectMake(50, 50, imgOne.frame.size.width, imgOne.frame.size.height);
If it's the center point you want to move to this coordinate, use:
imageView.center = CGPointMake(100.0f, 0.0f);
If it's one of the corner points, subtract/add half the view's frame's width/height to the coordinates. If you need this frequently, it's a good idea to write a small UIView category that allows you to position a view's corner on a particular coordinate.
I understand that CGAffineTransformMakeRotation can rotate an image, and CGAffineTransformMakeTranslation translates an image. I also understand CGAffineTransformConcat can merge two transformations. However, I cannot seem to figure out a way to move an image on an arc using both of these. I understand this is more a mathematical question but does anyone have a reference they can point me to?
Edit:
[bezierPathWithArcCenter:radius:startAngle:endAngle:clockwise:]
did the trick.
Reference: http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIBezierPath_class/Reference/Reference.html#//apple_ref/occ/clm/UIBezierPath/bezierPathWithArcCenter:radius:startAngle:endAngle:clockwise:
Use a CAKeyframeAnimation with the path set instead of discreet values.
CAKeyframeAnimation *a = [CAKeyframeAnimation animationWithKeyPath:#"position"];
CGRect circleRect = CGRectMake(0,0,50,50);
a.duration = 2.0;
a.rotationMode = kCAAnimationRotateAuto;
a.path = [UIBezierPath bezierPathWithOvalInRect:circleRect].CGPath;
[imageView.layer addAnimation:a forKey:#"moveCircle"];
Rotate it about the center of the circle corresponding to the arc.
This will involve three steps:
1) Translate so that the center of your arc moves to the origin.
2) Rotate through the appropriate angle.
3) Reverse the translation from step 1.
My usercase is an iphone application where I do an animation on the scale, rotation and translation of an image.
So, I concat everything and feed it to the transform property, but there is one problem:
Since my images vary in size, it is a problem to position them correctly. I'm used to an inverted y axis coordinate system, so I want my image to positioned exactly at 60 pixels in the y axis.
So, how do I change from the original cartesian y axis to an inverted y axis point of view?
As smacl points out, the easiest way to do this is to shift your origin to the bottom-left of the screen by using (screenheight - viewheight - y) instead of y in the origins of your views.
However, you can flip the coordinate system of your main view's layers using a CATransform3D. I do this so that I can share the same Core Animation CALayer layout code between my iPhone application and a Mac client (the iPhone inverts the normal Quartz coordinate system for CALayers to match that of the UIViews). All you need to do to enable this is to place the line
self.layer.sublayerTransform = CATransform3DMakeScale(1.0f, -1.0f, 1.0f);
in your initialization code for your layer-hosting UIView. Remember that this will flip your CALayers, so any UIKit text rendering in those layers may also need to be flipped using code similar to the following:
CGContextSaveGState(context);
CGContextTranslateCTM(context, 0.0f, self.frame.size.height);
CGContextScaleCTM(context, 1.0f, -1.0f);
UIFont *theFont = [UIFont fontWithName:#"Helvetica" size:fontSize];
[text drawAtPoint:CGPointZero withFont:theFont];
CGContextRestoreGState(context);
You can do a similar sort of inversion using a CGAffineTransform, but you will also need to apply a translation to make that work:
CGAffineTransform flipTransform = CGAffineTransformMakeTranslation(0.0f, self.frame.size.height);
flipTransform = CGAffineTransformScale(flipTransform, 1.0f, -1.0f);
You may be able to use the affine transform to convert your origin coordinates using CGPointApplyAffineTransform().
For every y ordinate, y = top-y, where top is the y ordinate of the top of the bounding box you are drawing in.