I have a UIView called character. Inside that view the user can add several UIImageView as subViews.
I created gesture methods for Pinch, Move and Rotate. The gesture method were added to the character view.
For moving I'm using the gesture translationInView property and it works fine!
My problem is with scalling.
Scaling individual UIImageViews is ok, no issues, but how to scale all of them??
I tried to scale the character view, it works fine scaling proportionally all the subviews but I don't want to change the character view, because I use it as a canvas to place the UIImageView to compose my character. If I change the character with a CGAffineTransformScale, all the new ImageViews that I add, got the same scale.
I tried this but it doesn't work:
if ([gesture state] == UIGestureRecognizerStateBegan || [gesture state] == UIGestureRecognizerStateChanged) {
CGFloat customScale = gesture.scale;
for (UIImageView *singleView in [self.devoCharacter subviews]) {
singleView.frame = CGRectMake(singleView.frame.origin.x / customScale, singleView.frame.origin.y /customScale, singleView.frame.size.width /customScale , singleView.frame.size.height /customScale);
[gesture setScale:1];
}
}
I wanted to reduce the size of each view and their relative distances in this way, but the whole thing expands from the coordinates origin.
Then I tried this:
if ([gesture state] == UIGestureRecognizerStateBegan || [gesture state] == UIGestureRecognizerStateChanged) {
CGFloat customScale = gesture.scale;
for (UIImageView *singleView in [self.devoCharacter subviews]) {
singleView.transform = CGAffineTransformScale(singleView.transform, customScale, customScale);
[gesture setScale:1];
}
}
But this scales each view independently and does not maintain their relative distances.
Is there anyway to just scale each view, proportionally? and maintaining their relative distances as well?
Ok I got how to do it. Scale every single view and then scale proportionally their centers. This solved my problem:
for (Part *singleView in [self.canvas subviews]) {
singleView.transform = CGAffineTransformScale(singleView.transform, customScale, customScale);
singleView.center = CGPointMake(singleView.center.x * customScale, singleView.center.y * customScale);
[gesture setScale:1];
}
Related
Im using the UIGestureRecognizer to transform a view and its workin perfectly, but now I want to use it to transform my view width and height independently. The only way that comes to my mind to solve this is getting the two finger positions and make an if clause to recognize if the user is trying to increase width or height, but for this I need to get each finger position involved in the Pinch Gesture. But I cant find any method to do this I was wondering if this is posible or if there is another alternative for achieving this.
- (IBAction)handlePinch:(UIPinchGestureRecognizer *)recognizer {
recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, recognizer.scale, 1);//To transform height insted of width just swap positions of the second and third parameter.
NSLog(#"%f",recognizer.scale);
recognizer.scale = 1;
}
Got the answer if somebody needs to do this, there is a method called location of touch. With this method you can get each touch x and y position. But call it when the Gesture recognizer state began because it crashes if you do it in the state changed. Save this values in some variables and you are good to go. Hope it helps someone who is interested.
- (IBAction)handlePinch:(UIPinchGestureRecognizer *)recognizer {
if(recognizer.state == UIGestureRecognizerStateBegan){
NSLog(#"pos : 0%f, %f",[recognizer locationOfTouch:0 inView:self.view].x,[recognizer locationOfTouch:0 inView:self.view].y);
NSLog(#"pos 1: %f, %f",[recognizer locationOfTouch:1 inView:self.view].x,[recognizer locationOfTouch:1 inView:self.view].y);
}
if(recognizer.state == UIGestureRecognizerStateChanged){
recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, recognizer.scale, 1);
//NSLog(#"%f",recognizer.scale);
recognizer.scale = 1;
}
if(recognizer.state == UIGestureRecognizerStateEnded){
}
I understand the various ways of detecting drag gestures just fine (currently I'm using a UIPanGestureRecognizer), but my understanding of transformations is limited, so I'm not sure if/how this is possible. Essentially, what I want to have is a scaling transformation applied to a UIView at the same pace (for lack of a better word) as the user performs a drag gesture elsewhere on the screen. In other words, as the user drags up, I want the size of my transforming UIView to increase proportionally to the position of that gesture, and if the user then starts dragging down, it should start to shrink proportionally.
Hopefully that makes sense. As a dummy example, just imagine a slider that you can adjust to change the size of a UIView in real time. Is there a good way to make those sorts of incremental and constant size updates with CGAffineTransform?
In your pan gesture handler, you simply grab translationInView or locationInView, calculate a scale from that, and then update the transform accordingly. For example:
- (void)handlePan:(UIPanGestureRecognizer *)gesture
{
static CGAffineTransform originalTransform;
if (gesture.state == UIGestureRecognizerStateBegan)
{
originalTransform = self.viewToScale.transform;
}
else if (gesture.state == UIGestureRecognizerStateChanged)
{
CGPoint translation = [gesture translationInView:gesture.view];
CGFloat scale = 1.0 - translation.y / 160.0;
self.viewToScale.transform = CGAffineTransformScale(originalTransform, scale, scale);
}
}
You can play around with the scale calculation depending upon precisely what you want to do, but hopefully you get the idea.
Personally, I'd rather use the pinch gesture recognizer for resizing (it's a UI that users have been trained on, it gives you the scale factor right out of the box, etc.), but whatever works for you. If you did a pinch gesture recognizer, it might look like:
- (void)handlePinch:(UIPinchGestureRecognizer *)gesture
{
static CGAffineTransform originalTransform;
if (gesture.state == UIGestureRecognizerStateBegan)
{
originalTransform = self.viewToScale.transform;
}
else if (gesture.state == UIGestureRecognizerStateChanged)
{
self.viewToScale.transform = CGAffineTransformScale(originalTransform, gesture.scale, gesture.scale);
}
}
I found the best approach is to use locationInView so that you can equate a location offset in pixels with a scale. For example, if the circle is placed in the centre of the view:
func dragDot(recognizer: UIPanGestureRecognizer) {
let locationX = recognizer.location(in: self.view).x
// Expand and contract the circle
let locationXOffset = locationX - self.view.center.x
// We need scale to be 1 when locationXOffset = circle radius
let scale: CGFloat = locationXOffset / (self.widthOfCircle / 2)
self.ring.transform = CGAffineTransform(scaleX: scale, y: scale)
}
If the circle isn't in the centre of the view then replace self.view.center.x with the initial location of the circle.
This method will work across all devices and screen resolutions and will avoid the requirement to calibrate a constant
I am using PinchGestureRecognizer and RotationGestureRecognizer both working fine. The code is as follows:
- (IBAction)pinchDetected:(UIPinchGestureRecognizer *)recognizer {
recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, recognizer.scale, recognizer.scale);
recognizer.scale = 1;
}
-(IBAction)rotationDetected:(UIRotationGestureRecognizer *)recognizer
{
recognizer.view.transform = CGAffineTransformRotate(recognizer.view.transform, recognizer.rotation);
recognizer.rotation = 0;
}
with this code I am able to pinch as well as rotate my view. but on "RESET" button click I want to set my view's frame as it was before pinching or rotating.
for that I am using
[viewTwo setFrame:CGRectMake(80.0f, 65.0f, 160.0f, 101.0f)];
but my frame does not set.
so How can I set my view's frame again as it was before pinching and zooming?
You are not changing the frame with your gesture recognisers.
You need to assign the transform back to the identity.
recognizer.view.transform = CGAffineTransformIdentity;
Frame and transform are applied to a view in two completely separate ways (where frame is the smallest rectangle that fits a view, and transform is a representation of the underlying 2-D matrix of the view). If you wish to return to the size the view was previously, assign recognizer.view.transform to CGAffineTransformIdentity.
I'm a beginner to the iOS development, and I'm trying to display an image (a map in fact) which need to be zoomable and pannable. My problem is that I don't know how to add an overlay which will follow the pan to always represent the same location, but won't be scaled by the zoom. There will be several overlays, and each one must be clickable.
To zoom and pan the image (map), I added my UIImageView in a UIScrollView and it works great, but I have no idea how to add this feature.
I found this thread but it is not really the same problem since his overlay is static :
UIScrollview with two images - Keeping 1 image zoomable and 1 image static (fixed size)
I've developped the same application in android, and to make this work I was converting a pixel of the map in screen coordinates thanks to the transformation matrix, and I overrode the onDraw method to display it, but I don't know how to do the same on iOS, and I don't know if this is the better solution.
Thanks for any help.
Ok so I found a way to do it, if it can helps anybody :
I added my overlay in the scrollView, with the background image (the map).
+CustomScrollView
----> UIImageView (map)
----> OverlayImageView (overlay)
In order to zoom, the custom scrollview need a delegate with the following methods :
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
//The background image with the map
return mapView;
}
//When a zoom occurs, move the overlay
- (void)scrollViewDidZoom:(UIScrollView *)scrollView {
UIImageView* overlayView = [scroll.subviews objectAtIndex:1];
float x;
float y;
float width;
float height;
//keep the width and height of the overlay
width = overlayView.frame.size.width;
height = overlayView.frame.size.height;
//Move it to stay over the same pixel of the map, and centers it
x = (self.overlay.point.x * scroll.zoomScale - width/2);
y = (self.overlay.point.y * scroll.zoomScale - height/2);
overlayView.frame = CGRectMake(x,y,width,height);
}
With this, we are saying that the zoom only occurs on the background image, but as the overlay is in the UIScrollView, it pans with it. So the only thing we need to care is to move the Overlay when the zoom change, and we know it with the scrollViewDidZoom method.
To handle the touch events, we override the touchEnded:withEvent: of CustomScrollView and we forward it to the overlay if there is only one tap. I don't show the OverlayImageView since it only override this same method (toucheEnded:withEvent:) to handle a touch on it.
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch* touch = [touches anyObject];
// Coordinates in map view
CGPoint point = [touch locationInView:[self.subviews objectAtIndex:0]];
//forward
if(touch.tapCount == 1){
OverlayImageView* overlayView = [self.subviews objectAtIndex:1];
CGPoint newPoint = [touch locationInView:overlayView];
BOOL isInside = [overlayView pointInside:newPoint withEvent:event];
if(isInside){
[overlayView touchesEnded:touches withEvent:event];
}
}
// zoom
else if(touch.tapCount == 2){
if(self.zoomScale == self.maximumZoomScale){
[self setZoomScale:[self minimumZoomScale] animated:YES];
} else {
CGRect zoomRect = [self zoomRectForScrollView:self withScale:self.maximumZoomScale withCenter:point];
[self zoomToRect:zoomRect animated:YES];
//[self setZoomScale:[self maximumZoomScale] animated:YES];
}
[self setNeedsDisplay];
}
}
Hope this will help.
You can put an imageView on top as an overLay and set its userInteractionEnabled property to NO. Then you have to pan it programmatically.
I have an image view that I want to pinch to rescale without keeping the aspect ratio. In order to do this, I thought it might be feasible to either:
Use two pinch gesture recognisers, one that stretches horizontally, one that does so vertically.
Use one pinch recogniser but apply the two transforms one after the other.
Here's my pinch handling function:
- (void) pinch:(UIPinchGestureRecognizer *)recognizer {
static CGRect initialBounds;
if (recognizer.state == UIGestureRecognizerStateBegan)
{
initialBounds = imageView.bounds;
}
CGFloat factor = [(UIPinchGestureRecognizer *)recognizer scale];
//scale horizontally
CGAffineTransform zt = CGAffineTransformScale(CGAffineTransformIdentity,
factor-(1.0-factor), 1.0);
imageView.bounds = CGRectApplyAffineTransform(initialBounds, zt);
//now scale vertically
zt = CGAffineTransformScale(CGAffineTransformIdentity, 1.0, factor);
imageView.bounds = CGRectApplyAffineTransform(initialBounds, zt);
return;
}
For some reason, the transform is only being done vertically (last one). I tried changing the first parameter of the second CGRectApplyAffineTransform to imageView.bounds, but it still didn't work.
Can anyone please tell me where I am going wrong?
Also, when using two pinch gesture recognisers, the same thing happens - only one of them actually gets recognised.
Thanks!
Your second one is starting with a CGAffineTransformIdentity. Instead, pass in the zt.