I used pinch gesture for zooming. It's working fine. Using slider I am rotating that image. Rotation is also working perfect.
The problem after zooming, if I rotate the image, the zoom effect is missing. Here is the code I used for rotation
subView.transform = CGAffineTransformMakeRotation(slider.value * 2*M_PI / slider.maximumValue);
Thanks in Advance.
What is zooming? It is a transform. That’s all it is.
So your code comes along and rips out that transform and replaces it with a different transform.
// subView has zoom transform
subView.transform = CGAffineTransformMakeRotation(slider.value * 2*M_PI / slider.maximumValue);
// zoom transform overwritten
So you have wiped out the zoom.
Related
Problem:
I got a Tableview with dynamically many cells. The cells contain PKDrawings with the PencilKit Framework. So its like a book...
I would like to do 2 things:
1. Zoom in so i am closer to the cells-content so the drawings seem bigger.
(But when I say cells-content I mean all cells so I am talking about the Tableview. I don't want to zoom into a specific cell)
2. Zoom out so I start seeing more and more pages (cells) above and below the one that was "in my focus" when not zooming out or in.
If that's not possible as the Cells are Hidden and its hard to tell them while zooming out when to load again its fine if the maximal zoom-out is the point when I haven't zoomed in.
As a Tableview is already a subclass of the UIScrollview I can access its min & max Zoomscale. However setting this doesn't change anything. The ScrollViewDidZoom won't get triggered either.
Scrolling works fine though...
I think that this should all be possible if I somehow manage it to put my Tableview into another View/Scrollview and just zoom in/out on that but I don't know how to do that...
Thanks in advance for any help!
For zooming UITableview cell u can use CGAffineTransform. You can manage the scale value as per requirement
// For Zoom in
CGAffineTransform trans = CGAffineTransformScale(cell.contentView.transform, 100, 100);
view.transform = trans;
// For Zoom Out
CGAffineTransform trans = CGAffineTransformScale(cell.contentView.transform, 0.01, 0.01);
view.transform = trans;
To zoom complete UItableView you can apply affine transform to tableview
// For Zoom in
CGAffineTransform trans = CGAffineTransformScale(tableView.transform, 100, 100);
view.transform = trans;
// For Zoom Out
CGAffineTransform trans = CGAffineTransformScale(tableView.transform, 0.01, 0.01);
view.transform = trans;
For pinch gesture u can use following gestures well documented by apple developer documentation https://developer.apple.com/documentation/uikit/touches_presses_and_gestures/handling_uikit_gestures/handling_pinch_gestures
I have a horizontal scrollview with an image which I need to rotate as the user scrolls left or right. It needs to rotate as the user moves the scroll across the screen. So if the user scrolls half way and stops the image should rotate halfway etc. I have looked at few examples but nothing seems to be giving me the correct result. Can some one please help.
Thanks in advance
Vertical scrolling and Swift 5:
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let topOffset = scrollView.contentOffset.y
let angle = -topOffset * 2 * CGFloat(Double.pi / 180)
self.myImageView.transform = CGAffineTransform(rotationAngle: angle)
}
Don't forget to do this in viewDidLoad:
self.scrollView.delegate = self
You'll need to implement the scrollViewDidScroll method and then apply a rotation matrix to the image. To rotate a UIIMage you can do what they outline here. How to Rotate a UIImage 90 degrees?
However, this would be better accomplished in a pan gesture recognizer. The pan gesture will give you information about how far the user panned, and then you can rotate the image based on that distance.
To rotate image is not good for performance. You'd better set image view's rotate transform as user scrolls. Like this:
imageView.transform = CGAffineTransformMakeRotation(CGFloat(M_PI_2))
I am trying to flip a scaled and rotated uiview on the horizontal axis.
Here is the code being used -
CGFloat xScale = selectedFrame.transform.a;
CGFloat yScale = selectedFrame.transform.d;
selectedFrame.layer.transform = CATransform3DScale(CATransform3DMakeRotation(M_PI, 0, 1, 0),xScale, yScale,-1);
The output of this is that the view flips properly and the original scale factor is also manitained but the rotation isnt.
Here are the images to explain the problem -
Original Image (The tiger view has to be flipped on the horizontal axis) -
Flipped image after above code (see that the scale is maintained but the rotation angle isnt and the image s flipped properly) -
Any help would be really appreciated!
To flip the image you are using a rotation of M_PI around the Y axis. To rotate the image, you need to apply another different rotation around the Z axis. These are two different transforms. You can combine them using CATransform3DConcat. Then you can scale the resulting transform.
CATransform3D transform = CATransform3DConcat(CATransform3DMakeRotation(zRotation, 0, 0, 1),CATransform3DMakeRotation(M_PI, 0, 1, 0));
[layer setTransform:CATransform3DScale(transform,xScale, yScale,1)];
The problem with your original code is that you are only applying the Y axis transform.
I'm sure there is a more elegant way to do this, but this works on my simulator.
I want to rotate a UIImageView, and I am using this code:
-(IBAction)rotateImageView:(id)sender{
photoView.transform = CGAffineTransformMakeRotation(M_PI); //rotation in radians
}
The code works. when I press the button, the image rotates 180 degrees, but if I press it again it doesn't rotate back to its original position, but it stays still. why??
Because you are applying the same transform to the view again, without taking into account any existing transform.
Try this:
photoView.transform = CGAffineTransformRotate(photoView.transform,M_PI);
you have to rotate the imageView from the current rotation to make it original
use this code
CGAffineTransformRotate(photoView.transform, M_PI);
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Rotate CGPath without changing its position
I searched and tested a variety of code for a couple of hours and I can't get this to work.
I am adding an arbitrary UIBezierPath at a random location to a CAShapeLayer which gets added to a view. I need to rotate the path so that I can handle device rotations. I can rotate the layer instead of the path. I just need the result to be rotated.
I already have methods to handle transforming the bezier path by scaling and translation. It works great, but now I need to simply rotate 90 degrees left or right.
Any recommendations on how to do this?
Basic code:
UIBezierPath *path = <create arbitrary path>
CAShapeLayer *layer = [CAShapeLayer layer];
[self addPathToLayer:layer
fromPath:path];
// I could get the center of the box but where is the box center for the view it is in?
// CGRect box = CGPathGetPathBoundingBox(path.CGPath);
// layer.anchorPoint = ? How to find the center of the box for the anchor point?
// Rotating here appears to rotate around 0,0 of the view
layer.transform = CATransform3DMakeRotation(DegreesToRadians(-90), 0.0, 0.0, 1.0);
I see the following post:
BezierPath Rotation in a UIView
I suppose I could rotate as-is and then translate the path back into place. I just need to figure out what the translation values would be.
I should also state that what I am seeing after I try to rotate is that the image moves off-screen somewhere. I tried rotating 25 degrees to see movement and it pivots around the view's origin of 0,0 so that if I rotate 90 degrees the image is off-screen. I am running these test WITHOUT rotating the device - just to see how rotation works.
UPDATE #1 - 12/4/2012: For some bizarre reason if I set the position to a value I found empirically it moves the rotated bezier path into the correct position after rotation:
layer.position = CGPointMake(280, 60);
This values are a guess from starting/stopping the app and making adjustments. I have no idea why I need to adjust the position on rotation. The anchor point should be in the center of the layer. However, I did find that both the frame and position of a CAShapeLayer are all ZERO even though the path is set, and also the fact that the path is in the correct position within the view. The 280, 60 position shifts the path into what would be the center of the path bounding box when a rotation of +90 is made. If I change the rotation value I need to adjust the position. I should not have to do this manually adjustment.
I think a last resort is to somehow convert the bezier path to an image and then add it. I found that if I set the layer content to an image, then rotate, it rotates about its center point with no positional adjustment needed. Not so with setting the path.
UPDATE #2 12/4/2012 - I tried setting the frame and with fiddling I get it to center as follows:
CGRect box = CGPathGetPathBoundingBox(path.CGPath);
CGRect rect = CGRectMake(0, 0, box.origin.x + (3.5 * box.size.width), box.origin.y + (3.5 * box.size.height));
layer.frame = rect;
layer.transform = CATransform3DMakeRotation(DegreesToRadians(90), 0.0, 0.0, 1.0);
Why multiply by 3.5? I have no clue. I found that adding the box origin with about 3.5 times the size of the box shifts the rotated CAShapeLayer path to about where it should be.
There must be a better way to do this. This is a better solution than my previous post since the frame size does not depend on the rotation angle. I just don't know why the frame needs to be set to the value I am setting it to. I THOUGHT it should be
CGRectMake(0, 0, box.origin.x + (box.size.width / 2), box.origin.y + (box.size.height / 2));
However, it shifts the image to the left too much.
Another clue I found is that if I set the frame of [self view].frame (the frame of the entire parent view, which is the screen of the iPhone), then rotate, the rotation point is the center of the screen, an the path/image orbits around this center point. This is why I tried shifting the frame to what the center of the path should be so that it orbits around the box center.
UPDATE #3 12/4/2012 - I tried to render the layer as an image. However, it appears that just setting the path of a layer does not make it an "image" in the layer since it is empty
CGRect box = CGPathGetPathBoundingBox(path.CGPath);
layer.frame = box;
UIImage *image = [ImageHelper imageFromLayer:layer]; // ImageHelper library I created
CAShapeLayer *newLayer = [CAShapeLayer layer];
newLayer.frame = CGRectMake(box.origin.x, box.origin.y, image.size.width, image.size.height);
newLayer.contents = (id) image.CGImage;
It appears that rotating the layer with its path set is no different than simply rotating the bezier path itself. I will go back to rotating the bezier path and see if I can fiddle with the position elements or something. There's got to be a solution to this.
Goal: Rotate a UIBezierPath around its center point within the view it was originally created in.
UPDATE #4 12/4/2012 - I ran a series of tests measuring the values needed for translation in order to place a UIBezierPath in its previous center location.
CGAffineTransform rotate = CGAffineTransformMakeRotation(DegreesToRadians(-15));
[path applyTransform:rotate];
// CGAffineTransform translate = CGAffineTransformMakeTranslation(-110, 70); // -45
CGAffineTransform translate = CGAffineTransformMakeTranslation(-52, -58); // -15
[path applyTransform:translate];
However, the ratios of x/y translations do not correspond so I cannot extrapolate what translation is required based on the angle. It appears that 'CGAffineTransformMakeRotation' uses some arbitrary anchor put to make the rotation, which at the moment appears to be maybe (viewWidth / 2, 0). I am making this much harder than it needs to be. There's something I am missing to make a simple rotation so that the center point is maintained. I just need to "spin" the path 90 degrees left or right.
UPDATE #5 12/4/2012 - After running additional tests it appears that the anchor point for rotating a UIBezierPath is the origin from where all of the points were drawn. In this case the origin is 0,0 and all of the points are relative to that point. Therefore, it a rotation is applied, the rotation is occurring around the origin, and is why the path shifts up-right on -90 and up-left on 90. I need to somehow set the anchor point for the rotation to the center so it "spins" around the center, rather than the original origin point. 12 hours spent on this one issue.
After some detailed analysis and graphing the bounding box on paper I found my assertion that the origin of 0,0 is correct.
A solution to this problem is to translate the path (the underlying matrix) to the origin, with the center of the bounding box at origin, rotate, then translate the path back to its original location.
Here's how to rotate a UIBezierPath 90 degrees:
CGAffineTransform translate = CGAffineTransformMakeTranslation(-1 * (box.origin.x + (box.size.width / 2)), -1 * (box.origin.y + (box.size.height / 2)));
[path applyTransform:translate];
CGAffineTransform rotate = CGAffineTransformMakeRotation(DegreesToRadians(90));
[path applyTransform:rotate];
translate = CGAffineTransformMakeTranslation((box.origin.x + (box.size.width / 2)), (box.origin.y + (box.size.height / 2)));
[path applyTransform:translate];
Plug in -90 degrees to rotate in the other direction.
This formula can be used when rotating the device from portrait to landscape and vice/versa.
I still don't think this is the ideal solution but the result is what I need for now.
If anyone has a better solution for this please post.
UPDATE 12/7/2012 - I found what I think is the best solution, and very simple as I though it would be. Rather than using rotate, translate, and scale methods on the bezier path, I instead extract the array of points as CGPoint objects, and scale/translate them as needed based on the view size as well as the orientation. I then create a new bezier path and set the layer to this path.
The result is perfect scaling, translation, rotation.