Touch Gestures and graphics transformations (Uigesturerecognizer, Cgaffinetransform)

Overview

This chapter focuses on the touch gestures and graphics transformations in iOS development, where gestures include click, double-tap, long-press, drag, swipe, zoom, rotate, and the change in graphics mainly uses the translation, scaling, and rotation of the radial matrix.

When using gestures, it is important to note that gestures are assigned to a particular view (UIView), so a gesture can only correspond to a single view (the View property inside the gesture gets its corresponding views), and a view can add multiple gestures. Also, because there are conflicting gestures, such as clicking and double click, sliding and dragging. This situation requires a distinction of the dependency characteristics of gestures that require a specific gesture to fail before triggering the gesture.

The affine matrix changes should be noticed by the changes in the view to achieve the display effect, but also notice the difference between the uikit coordinates and the drawing coordinates.

results show

Process Overview

1. Gestures are specific to a particular view, so during the learning process I do experiments in a view class, which is a uiview subclass.

The 2.IOS gestures are divided into the following categories, which correspond to one class:

• UITapGestureRecognizer (click and double tap to differentiate according to setnumberoftapsrequired settings)
• uipinchgesturerecognizer (zoom gesture)
• uirotationgesturerecognizer (rotation gesture)
• uiswipegesturerecognizer (swipe gesture)
• uipangesturerecognizer (drag gesture)
• uilongpressgesturerecognizer (Changan gesture)

a sliding gesture object supports only one direction, the default is the right slide, if you want to support four directions, you need to add four sliding gestures of the object, while the property direction specified.

3. Add gestures to the view to use the following template code

/** slide */_swipegesturerecognizer = [[Uiswipegesturerecognizer alloc] initwithtarget:self action: @selector ( Onswipegesture:)];/** set hand slide direction, support only one Direction, default is right slide */_swipegesturerecognizer.direction = Uiswipegesturerecognizerdirectionup; [_imageview Addgesturerecognizer:_swipegesturerecognizer];

Note To make the view support gesture objects, you need to start the support gesture property and set the property userinteractionenabled to Yes.

4. Changes in graphics Note that there are similar pairs of cgaffinetransformmakerotation and Cgaffinetransformrotate, where the former has make to create a new default matrix, and then set the properties, The latter is to add attribute features on the specified matrix, so most of them use affine transformation functions similar to the latter. Examples of use are as follows

/** settings (Other matrix properties previously set to default) matrix *///cgaffinetransform t = cgaffinetransformmakerotation (angle);    /** Modify the Matrix rotation property */cgaffinetransform t = cgaffinetransformrotate (_imageview.transform, angle); self.imageView.transform = t ;

5. The zoom gesture (Uipinchgesturerecognizer) object has the attribute scale, which represents the scaling factor, so you can read the property setting scale directly in the method that responds to the pinch-out, but after using it, be careful to reset the value to 1, such as:

Recognizer.view.transform = Cgaffinetransformscale (Recognizer.view.transform, Recognizer.scale, Recognizer.scale); Recognizer.scale = 1;

6. The rotation gesture (Uirotationgesturerecognizer) object has the attribute rotation, which represents the rotation property value, so you can use that property value to set the rotation of the view directly in the method that responds to the rotation gesture, and note the reset of 0, as

Ecognizer.view.transform = Cgaffinetransformrotate (Recognizer.view.transform, recognizer.rotation); recognizer.rotation = 0;

7. The drag gesture (Uipangesturerecognizer) object gets the dragged parameter through method Translationinview, using the following example

Cgpoint translation = [Recognizer Translationinview:self];recognizer.view.center = Cgpointmake ( Recognizer.view.center.x + translation.x,                                         recognizer.view.center.y + translation.y); [Recognizer Settranslation:cgpointzero inview:self];

Main codeView class file

pickview.m//gesture////Created by Arbboter on 14/12/19.//Copyright (c) 2014 Arbboter. All rights reserved.//#import "PickView.h" @interface Pickview () @property (nonatomic, retain) uiimageview* imageview;@ Property (Nonatomic, retain) uitapgesturerecognizer* Tapsinglegesturerecognizer; @property (nonatomic, retain) uitapgesturerecognizer* Tapdoublegesturerecognizer; @property (nonatomic, retain) uipinchgesturerecognizer* Pinchgesturerecognizer, @property (nonatomic, retain) uirotationgesturerecognizer* rotationgesturerecognizer;@ Property (Nonatomic, retain) uiswipegesturerecognizer* Swipegesturerecognizer; @property (nonatomic, retain) uipangesturerecognizer* Pangesturerecognizer; @property (nonatomic, retain) uilongpressgesturerecognizer*    Longpressgesturerecognizer; @end @implementation pickview-(void) viewimagenamed: (nsstring*) imagename{    Self.layer.borderWidth = 1;    _imageview = [[Uiimageview alloc] Initwithframe:cgrectmake (0, SELF.FRAME.SIZE.HEIGHT/4, 200, 200)]; _imagevIew.image = [UIImage imagenamed:imagename];        _imageview.contentmode = Uiviewcontentmodescaleaspectfit; /** * Uiviewcontentmodescaletofill,//default zoom mode, up and down padding [part] uiviewcontentmodescaleaspectfit,//proportional scaling, the general effect is          Zoom in small direction [full view] uiviewcontentmodescaleaspectfill,//proportional scaling, the general effect is to scale in small direction (will appear clipping effect) [part] Uiviewcontentmoderedraw, The bounds of the view changes when Uiviewcontentmodecenter is redrawn,//placed in the middle of the bounds of the view, maintained equal proportions [part] uiviewcontentmodetop, UIV Iewcontentmodebottom, Uiviewcontentmodeleft, Uiviewcontentmoderight, Uiviewcontentmodetopleft, UIViewConte Ntmodetopright, Uiviewcontentmodebottomleft, uiviewcontentmodebottomright * * [self Addsubview:_imagevie        W]; /** Click */_tapsinglegesturerecognizer = [[UITapGestureRecognizer alloc] initwithtarget:self action: @selector (ontapsing    Legesture:)];    [_tapsinglegesturerecognizer setnumberoftapsrequired:1];       [_imageview Addgesturerecognizer:_tapsinglegesturerecognizer]; /** Double-click */_tapdoublegesturerecognizer = [[UITapGestureRecognizer alloc] initwithtarget:self action: @selector (Ontapdoub    Legesture:)];    [_tapdoublegesturerecognizer Setnumberoftapsrequired:2];        [_imageview Addgesturerecognizer:_tapdoublegesturerecognizer]; /** because there is a conflict between double-clicking and click, you need to set no double-click to recognize as click */[_tapsinglegesturerecognizer requiregesturerecognizertofail:_        Tapdoublegesturerecognizer]; /** Zoom */_pinchgesturerecognizer = [[Uipinchgesturerecognizer alloc] initwithtarget:self action: @selector (Onpinchgest    Ure:)];        [_imageview Addgesturerecognizer:_pinchgesturerecognizer]; /** Rotation */_rotationgesturerecognizer = [[Uirotationgesturerecognizer alloc] initwithtarget:self action: @selector (OnRot    Ationgesture:)];        [_imageview Addgesturerecognizer:_rotationgesturerecognizer]; /** Slide */_swipegesturerecognizer = [[Uiswipegesturerecognizer alloc] initwithtarget:self action: @selector (Onswipegest    Ure:)]; /** set the hand slide direction, only support One Direction, the default is the right slide */_swipegesturerecognizer.Direction = Uiswipegesturerecognizerdirectionup;        [_imageview Addgesturerecognizer:_swipegesturerecognizer]; /** Drag */_pangesturerecognizer = [[Uipangesturerecognizer alloc] initwithtarget:self action: @selector (onpangesture:)]    ;        [_imageview Addgesturerecognizer:_pangesturerecognizer];        /** drag and slide conflict, limited response slip */[_pangesturerecognizer Requiregesturerecognizertofail:_swipegesturerecognizer]; /** Long Press */_longpressgesturerecognizer = [[Uilongpressgesturerecognizer alloc] initwithtarget:self action: @selector (OnL    Ongpressgesture:)];        [_imageview Addgesturerecognizer:_longpressgesturerecognizer]; /** picture View start Touch interaction */_imageview.userinteractionenabled = YES;} -(void) Viewrotate: (cgfloat) angle{/** settings (other matrix properties previously set are changed to default) matrix *///cgaffinetransform t = Cgaffinetransformmakerota        tion (angle);    /** Modify the Matrix rotation properties */cgaffinetransform t = cgaffinetransformrotate (_imageview.transform, Angle); Self.imageView.transform = t;} -(void) Viewtranslationx: (cgfloatX Y: (cgfloat) y{/** Modify the Matrix translation properties */cgaffinetransform t = cgaffinetransformtranslate (_imageview.transform, X, Y); Self.imageView.transform = t;} -(void) Viewscalex: (cgfloat) x Y: (cgfloat) y{/** Modify Matrix Scaling Properties */cgaffinetransform t = Cgaffinetransformscale (_imageview.    Transform, x, y); Self.imageView.transform = t;}    #pragma response gesture-(void) Ontapsinglegesture: (uitapgesturerecognizer*) recognizer{NSLog (@ "%s", __function__);            /** do nothing */}-(void) Ontapdoublegesture: (uitapgesturerecognizer*) recognizer{NSLog (@ "%s", __function__);    CGFloat x = self.superview.frame.size.width/_imageview.frame.size.width;        CGFloat y = self.superview.frame.size.height/_imageview.frame.size.height;        [Self viewtranslationx:self.superview.frame.size.width-self.frame.size.width y:0];    NSLog (@ "%.2f%.2f", _imageview.center.x, _IMAGEVIEW.CENTER.Y);    Scale if (x==1) {[self viewscalex:0.5 y:0.5];        }//Magnify else {x = x > y? y:x; [Self Viewscalex:x Y:x]; }/** left bounded by */_imageview.center = Cgpointmake (_IMAGEVIEW.FRAME.SIZE.WIDTH/2, _IMAGEVIEW.FRAME.SIZE.HEIGHT/2 + S    ELF.SUPERVIEW.FRAME.SIZE.HEIGHT/4);        x = _imageview.frame.origin.x; [Self viewtranslationx:-x y:0];}        -(void) Onpinchgesture: (uipinchgesturerecognizer*) recognizer{NSLog (@ "%s", __function__); /** Zoom Picture */Recognizer.view.transform = Cgaffinetransformscale (Recognizer.view.transform, Recognizer.scale,    Recognizer.scale); Recognizer.scale = 1;}        -(void) Onrotationgesture: (uirotationgesturerecognizer*) recognizer{NSLog (@ "%s", __function__);    /** Rotation */recognizer.view.transform = Cgaffinetransformrotate (Recognizer.view.transform, recognizer.rotation); recognizer.rotation = 0;}        -(void) Onswipegesture: (uiswipegesturerecognizer*) recognizer{NSLog (@ "%s", __function__);                /** on slide Modify parent view Background color */if (recognizer.direction = = uiswipegesturerecognizerdirectionup) {cgfloat color[3] = {0}; ColoR[0] = (Arc4random ()%50 + 1)/100.0;        COLOR[1] = (Arc4random ()%50 + 1)/100.0;                COLOR[2] = 1-color[0]-color[1];    Self.superview.backgroundColor = [Uicolor colorwithred:color[0] green:color[1] blue:color[2] alpha:1.0];        }}-(void) Onpangesture: (uipangesturerecognizer*) recognizer{NSLog (@ "%s", __function__);    /** Drag the picture */cgpoint translation = [recognizer translationinview:self]; Recognizer.view.center = Cgpointmake (recognizer.view.center.x + translation.x, rec    Ognizer.view.center.y + TRANSLATION.Y); [Recognizer Settranslation:cgpointzero inview:self];}        -(void) Onlongpressgesture: (uilongpressgesturerecognizer*) recognizer{NSLog (@ "%s", __function__);  /** prevents multiple calls to/if (recognizer.state = = Uigesturerecognizerstatebegan) {/** pop-up editing options at the same time */uiactionsheet* action = [[Uiactionsheet alloc] initwithtitle:@ "Edit Options" Delegate:nil cancelbuttontitle:@ "Cancel" Destructivebuttontitle: @ "Show Details" otherbuttontitles:@ "Delete", @ "Modify", @ "Send", nil];        [Action showinview:self];    [Action release];    }}-(void) dealloc{[_imageview release];    [Self removegesturerecognizer:_tapsinglegesturerecognizer];    [Self removegesturerecognizer:_tapdoublegesturerecognizer];    [Self removegesturerecognizer:_pinchgesturerecognizer];    [Self removegesturerecognizer:_rotationgesturerecognizer];    [Self removegesturerecognizer:_swipegesturerecognizer];    [Self removegesturerecognizer:_pangesturerecognizer];        [Self removegesturerecognizer:_longpressgesturerecognizer];    [_tapsinglegesturerecognizer release];    [_tapdoublegesturerecognizer release];    [_pinchgesturerecognizer release];    [_rotationgesturerecognizer release];    [_swipegesturerecognizer release];    [_pangesturerecognizer release];    [_longpressgesturerecognizer release]; [Super Dealloc];} @end

Project Engineering

Touch Gestures and graphics transformations (Uigesturerecognizer, Cgaffinetransform)