I have a UIImageView that is in a UIScrollView. I load images into the UIImageView's CALayer with the following code:
UIImage *image = [UIImage imageNamed: fileToDisplay];
NSLog(#"If I don't flip image imageScrollView.zoomScale: %f", imageScrollView.zoomScale);
[[imageView layer] setContents: (id)image.CGImage];
if (flipped)
{
[[imageView layer] setTransform: CATransform3DMakeRotation(180.0 / 180.0 * M_PI, 0.0, 1.0, 0.0)];
NSLog(#"If image flipped imageScrollView.zoomScale: %f", imageScrollView.zoomScale);
}
I am 'flipping' the image about the y axis. The unexpected event is that the transformation of the imageView.layer is changing the imageScrollView.zoomScale as shown in the following output:
If I don't flip image imageScrollView.zoomScale: 0.465455
If image flipped imageScrollView.zoomScale: 1.000000
My question is how do I make this not happen? If there is no way to do defeat this behavior, what do I have to do to achieve the image framing that is performed on images I do not flip. In other words just setting the zoomScale to what it was prior to the transform does not work. Something else has changed in the UIScrollView (not the contentSize or the contentOffset).
Thanks for the help.
Because you're using a CATransform3DMake... method, you're creating a new transform and replacing the current transform. You need to use CATransform3DRotate instead, to add the rotation to the current transform (which is used for the scale).
imageView.layer.transform = CATransform3DRotate(imageView.layer.transform , 180.0 / 180.0 * M_PI, 0.0, 1.0, 0.0);
Related
I am having a problem rotating an image with subviews in an iOS 9+ app. I have a container view containing 2 subviews. The subviews are the same size as the container view. First subview contains an image from a PDF page. Second subview contains UIImageViews as subviews that sit on top of the PDF image. I use the coordinate system of the PDF to place and size the image views correctly. (Maybe I should mention that the container view is itself a subview of a UIScrollview).
The image views are properly placed and oriented whether the PDF is portrait or landscape. However, when the PDF is landscape, I would like to rotate and scale the final image so that it displays normally. One way I can do this is to rotate, transform and scale the PDF and each image view individually, putting drawing code in each view's drawRect method. This works but it's really slow.
I learned from a SO post that if I apply the rotation and transform to the CALayer of the container view, iOS applies the changes to the entire view hierarchy. This runs much more quickly when rotating a landscape image. But I have not been able to scale the final image using the layer of the container view. On an iPad I end up with a correctly rotated final image, centered horizontally at the top of the screen, but clipped on the left and right sides. The long axis of the image is still equal to the height of the screen, wider than the width of the screen.
The code in the container view is really short:
- (void) setOrientation:(NSInteger)orientation
{
_orientation = orientation;
if (orientation == foPDFLandscape)
{
// [[self layer] setNeedsDisplayOnBoundsChange:YES];// no effect
// [[self layer] setBounds:CGRectMake(0.0, 0.0, 100.0, 100.0)];//does not change image size or scale
// [[self layer] setContentsScale:0.5];//does not change image size or scale
[[self layer] setAnchorPoint:CGPointMake(0.0, 0.9)];
CATransform3D transform = CATransform3DMakeRotation(90.0 * (M_PI / 180.0), 0.0, 0.0, 1.0);
[[self layer] setTransform:transform];
//putting the scaling code here instead of before the transform makes no difference
}
}
Setting the bounds, frame, or the contentsScale, either before or after the transform and in various combinations, has no effect on the final image. Nor does changing the Content Gravity Values and autoResizeMask.
Is there a way I can do this?
Thanks
I needed to concatenate the transforms like this:
- (void) setOrientation:(NSInteger)orientation
{
_orientation = orientation;
if (orientation == foPDFLandscape)
{
[[self layer] setAnchorPoint:CGPointMake(0.0, 1.0)];
CATransform3D rotate = CATransform3DMakeRotation(90.0 * (M_PI / 180.0), 0.0, 0.0, 1.0);
CATransform3D scale = CATransform3DMakeScale(0.77, 0.77, 1.0);
CATransform3D concat = CATransform3DConcat(rotate, scale);
[[self layer] setTransform:concat];
}
}
But this is a partial solution. The final image is clipped to the size of the screen -- OK on an iPad but not on an iPhone. Also, the image no longer responds to pinch gestures for zooming.
The goal is to get real frames in pdf page to identify the searched string, I am using PDFKitten lib to highlight the text that was searched and trying to figure out how to get frames for highlighted text. The core method is next:
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
CGContextSetFillColorWithColor(ctx, [[UIColor whiteColor] CGColor]);
CGContextFillRect(ctx, layer.bounds);
// Flip the coordinate system
CGContextTranslateCTM(ctx, 0.0, layer.bounds.size.height);
CGContextScaleCTM(ctx, 1.0, -1.0);
// Transform coordinate system to match PDF
NSInteger rotationAngle = CGPDFPageGetRotationAngle(pdfPage);
CGAffineTransform transform = CGPDFPageGetDrawingTransform(pdfPage, kCGPDFCropBox, layer.bounds, -rotationAngle, YES);
CGContextConcatCTM(ctx, transform);
CGContextDrawPDFPage(ctx, pdfPage);
if (self.keyword)
{
CGContextSetFillColorWithColor(ctx, [[UIColor yellowColor] CGColor]);
CGContextSetBlendMode(ctx, kCGBlendModeMultiply);
for (Selection *s in self.selections)
{
NSLog(#"layer.bounds = %f, %f, %f, %f", layer.bounds.origin.x, layer.bounds.origin.y, layer.bounds.size.width, layer.bounds.size.height);
CGContextSaveGState(ctx);
CGContextConcatCTM(ctx, s.transform);
NSLog(#"s.frame = %f, %f, %f, %f", s.frame.origin.x, s.frame.origin.y, s.frame.size.width, s.frame.size.height);
CGContextFillRect(ctx, s.frame);
CGContextRestoreGState(ctx);
}
}
}
Size of layer is (612.000000, 792.000000), but the size of s.frame is (3.110400, 1.107000). How can I get real frame from rect that is filled yellow?
As Matt says, a view/layer's frame property is not valid unless the transform is the identity transform.
If you want to transform some rectangle using a transform then the CGRect structure isn't useful, since a CGRect specifies an origin and a size, and assumes that the other 3 points of the rect are shifted right/down from the origin.
In order to create a transformed rectangle you need to build 4 points for the upper left, upper right, lower left, and lower right points of the untransformed frame rectangle, and then apply the transform to those points, before applying the transform to the view.
See the function CGPoint CGPointApplyAffineTransform(CGPoint point, CGAffineTransform t) to apply a CGAffineTransform to a point.
Once you've done that you could use the transformed points to build a bezier path containing a polygon that is your transformed rectangle. (It may or may not be a rectangle after transformation, and the only sure-fire way to represent it is as 4 points that describe a quadralateral.)
Please use bounds property. Also you have to use bounds when create custom layout. It's transform free.
frame it's rectangle which defines the size and position of the view in its superlayer’s coordinate system. bounds it's rectangle defines the size and position of the layer in its itself coordinate system.
https://developer.apple.com/reference/quartzcore/calayer/1410915-bounds
I am trying to flip a UIProgressView 180 in Xcode and I am trying to scale the progress view at the same time. The scaling works great until I add the flip and then the scaling does not work anymore. Any suggestions? Thanks!
[self.secondsPorgressBarTicker setTransform:CGAffineTransformMakeScale(1.0, 10.0)];
[self.secondsPorgressBarTicker setTransform:CGAffineTransformMakeRotation(-M_PI)];
You are setting the transform and then resetting it. If you want to combine transforms, you need to use different CG functions. Remember, order matters with transforms, so use whichever one solves your issue:
CGAffineTransform transform = CGAffineTransformMakeRotation(-M_PI);
transform = CGAffineTransformScale(transform, 1.0, 10.0);
[self.secondsPorgressBarTicker setTransform:transform];
or
CGAffineTransform transform = CGAffineTransformMakeScale(1.0, 10.0);
transform = CGAffineTransformRotate(transform, -M_PI);
[self.secondsPorgressBarTicker setTransform:transform];
You're making a new transform. Modify the existing one:
[self.secondsPorgressBarTicker setTransform:CGAffineTransformMakeScale(1.0, 10.0)];
[self.secondsPorgressBarTicker setTransform:CGAffineTransformRotate(self.secondsPorgressBarTicker, -M_PI)
I have a UIView that I scale down when it is touched and scale back up when the touch is ended or cancelled.
I had been scaling the view like this
Scale down:
CGAffineTransform transform = CGAffineTransformMakeScale(0.95, 0.95);
self.transform = transform;
Scale up:
CGAffineTransform transform = CGAffineTransformMakeScale(1.0, 1.0);
self.transform = transform;
This doesn't preserve any other transform. I know I can use this to preserve the old transforms:
Scale down:
CGAffineTransform transform = CGAffineTransformScale(self.transform, 0.95, 0.95);
self.transform = transform;
Scale up:
CGAffineTransform transform = CGAffineTransformScale(self.transform, 1.0, 1.0);
self.transform = transform;
But of course here the scale up has no effect- plus there is potential to have cumulative scale down animations applied. Basically I want a way to apply the scale transform absolutely without affecting any other transform. Is there a way to do this? I don't think using 1.0/0.95 for the scale up factor, because it is possible the view could receive two touches before one is cancelled or ended.
I think I am asking the same thing as this question: Applying just the scale component of a CGAffineTransform to a UIView but I don't think the answers here will work for me.
I am targeting iOS 7 and above.
I am not sure if this is exactly what you are looking for but for me I need the scale to be absolutely consistent all the time so I modify the matrix directly.
CATransform3D transform = layer.transform;
if (makeSmaller)
{
// Scale to 0.9
transform.m11 = 0.9f;
transform.m22 = 0.9f;
}
// Cell needs to grow to normal size
else if (restoreToOriginal)
{
// Scale to 1.0 again
transform.m11 = 1.0f;
transform.m22 = 1.0f;
}
// Set the desired Y translation
transform.m42 = desiredffset;
layer.transform = transform;
guys!
I need to draw some image to CGContext.This is the relevant code:
CGContextSaveGState(UIGraphicsGetCurrentContext());
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGRect rect = r;
CGContextRotateCTM(ctx, DEGREES_TO_RADIANS(350));
[image drawInRect:r];
CGContextRestoreGState(UIGraphicsGetCurrentContext());
Actually,the rectangle is rotate and display on a area what is not my purpose.I just want to
rotate the image and display on the same position.
Any ideas ?????
Rotation is about the context's origin, which is the same point that rectangles are relative to. If you imagine a sheet of graph paper in the background, you can see what's going on more clearly:
The line is the “bottom” (y=0) of your window/view/layer/context. Of course, you can draw below the bottom if you want, and if your context is transformed the right way, you might even be able to see it.
Anyway, I'm assuming that what you want to do is rotate the rectangle in place, relative to an unrotated world, not rotate the world and everything in it.
The only way to rotate anything is to rotate the world, so that's how you need to do it:
Save the graphics state.
Translate the origin to the point where you want to draw the rectangle. (You probably want to translate to its center point, not the rectangle's origin.)
Rotate the context.
Draw the rectangle centered on the origin. In other words, your rectangle's origin point should be negative half its width and negative half its height (i.e., (CGPoint){ width / -2.0, height / -2.0 })—don't use the origin it had before, because you already used that in the translate step.
Restore the gstate so that future drawing isn't rotated.
What worked for me was to first use a rotation matrix to calculate the amount of translation required to keep your image centered. Below I assume you've already calculated centerX and centerY to be the center of your drawing frame and 'theta' is your desired rotation angle in radians.
let newX = centerX*cos(theta) - centerY*sin(theta)
let newY = centerX*sin(theta) + centerY*cos(theta)
CGContextTranslateCTM(context,newX,newY)
CGContextRotateCTM(context,theta)
<redraw your image here>
Worked just fine for me. Hope it helps.
use following code to rotate your image
// convert degrees to Radians
CGFloat DegreesToRadians(CGFloat degrees)
{
return degrees * M_PI / 180;
};
write it in drawRect method
// create new context
CGContextRef context = UIGraphicsGetCurrentContext();
// define rotation angle
CGContextRotateCTM(context, DegreesToRadians(45));
// get your UIImage
UIImage *img = [UIImage imageNamed:#"yourImageName"];
// Draw your image at rect
CGContextDrawImage(context, CGRectMake(100, 0, 100, 100), [img CGImage]);
// draw context
UIGraphicsGetImageFromCurrentImageContext();