JPImageresizerView Specification Document

GitHub：https://github.com/Rogue24/JPImageresizerView

JPImageresizerView

---

Brief introduction

A small tool that mimics the clipping function in Wechat.
Current version: 1.2.0

Current functions:
    1. Zooming of area that can be tailored adaptively;
    2. The parameters are set with high degrees of freedom, include spacing of clipping area, cutting aspect ratio, whether to scale adaptively;
    3. Supports up to eight drag and drop direction;
    4. Support rotation;
    5. Support horizontal and vertical mirror flip;
    6. Two border styles;
    7. Custom mask color, or two Gaussian blurred masks;
    8. Custom border image.

Note:
    1. Because automatic layout is not conducive to gesture control, frame layout is currently used, and automatic layout is not supported for the time being;
    2. At present, only vertical screen operation is supported.
    
Trying to update the content:
    1. Swift version;
    2. Adapt horizontal and vertical screen switching;
    3. More new border and mask styles;
    4. More parameter setting;
    5. To achieve the effect of free dragging rotation direction.

Effect.gif

How to use

Initialization

// Method 1: Configuring parameters using factory method
// Settable parameters: clipping picture, frame, mask style, border style, animation curve, clipping line color, background color, transparency of the mask, vertical and horizontal spacing, width-height ratio of the clipping frame, custom border image, the offset between the border image and the border, maximumZoomScale, whether the clipping area can be reset, whether ready to zoom back.

JPImageresizerView *imageresizerView = [[JPImageresizerView alloc]
                    initWithResizeImage:[UIImage imageNamed:@"Girl.jpg"]
                    frame:frame
                    maskType:JPConciseFrameType
                    frameType:JPConciseFrameType
                    animationCurve:JPAnimationCurveLinear
                    strokeColor:[UIColor whiteColor]
                    bgColor:[UIColor blackColor]
                    maskAlpha:0.75
                    verBaseMargin:10
                    horBaseMargin:10
                    resizeWHScale:0
                    contentInsets:UIEdgeInsetsZero
                    borderImage:nil
                    borderImageRectInset:CGPointZero 
                    maximumZoomScale:10.0
                    imageresizerIsCanRecovery:^(BOOL isCanRecovery) {
                        // You can listen here to see if you can reset it.
                        // If you don't need to reset (isCanRecovery is NO), you can do the corresponding processing here, such as setting the reset button to be non-point or hidden
                        // Specific operation can refer to Demo
                        // Pay attention to circular references
                    }
                    imageresizerIsPrepareToScale:^(BOOL isPrepareToScale) {
                        // Here you can monitor whether the clipping area is ready to be scaled to the appropriate size.
                        // If isPrepareToScale is YES, the clipping, rotation, and mirroring functions are not available at this time, the corresponding processing can be done here, such as setting the corresponding button to be non-point or hidden.
                        // Specific operation can refer to Demo
                        // Pay attention to circular references
                    }];

// Method 2: Use JPImageresizerConfigure to configure parameters and create them again

JPImageresizerConfigure *configure = [JPImageresizerConfigure defaultConfigureWithResizeImage:image make:^(JPImageresizerConfigure *configure) {
    // Now that you have the default parameter values, you can set the parameters you want here (using chain programming)
    configure
    .jp_resizeImage([UIImage imageNamed:@"Kobe.jpg"])
    .jp_maskAlpha(0.5)
    .jp_strokeColor([UIColor yellowColor])
    .jp_frameType(JPClassicFrameType)
    .jp_contentInsets(contentInsets)
    .jp_bgColor([UIColor orangeColor])
    .jp_isClockwiseRotation(YES)
    .jp_animationCurve(JPAnimationCurveEaseOut);
}];

JPImageresizerView *imageresizerView = [JPImageresizerView imageresizerViewWithConfigure:self.configure imageresizerIsCanRecovery:^(BOOL isCanRecovery) {
    // You can listen here to see if you can reset it.
    // If you don't need to reset (isCanRecovery is NO), you can do the corresponding processing here, such as setting the reset button to be non-point or hidden
    // Specific operation can refer to Demo
    // Pay attention to circular references
} imageresizerIsPrepareToScale:^(BOOL isPrepareToScale) {
    // Here you can monitor whether the clipping area is ready to be scaled to the appropriate size.
    // If isPrepareToScale is YES, the clipping, rotation, and mirroring functions are not available at this time, the corresponding processing can be done here, such as setting the corresponding button to be non-point or hidden.
    // Specific operation can refer to Demo
    // Pay attention to circular references
}];

// Add to view
[self.view addSubview:imageresizerView];
self.imageresizerView = imageresizerView;

// Note: For systems under iOS 11, it is best for the controller to set automaticallyAdjustsScrollViewInsets to NO, otherwise it will be offset with the change of navigation bar or status bar.
if (@available(iOS 11.0, *)) {

} else {
    self.automaticallyAdjustsScrollViewInsets = NO;
}

// After creation, you can also modify some of the above parameters (except maskType and contentInsets)
self.imageresizerView.resizeImage = [UIImage imageNamed:@"Kobe.jpg"];
self.imageresizerView.resizeWHScale = 16.0 / 9.0;

// initialResizeWHScale defaults to resizeWHScale at initialization, after which it can modify the value of initialResizeWHScale itself
self.imageresizerView.initialResizeWHScale = 0.0; // The parameter can be modified at will.

// Call the [recoveryByInitialResizeWHScale] method to reset, and resizeWHScale resets to the value of initialResizeWHScale
// Call the [recoveryByCurrentResizeWHScale] method to reset, and resizeWHScale will not be reset
// Call the [recoveryByResizeWHScale:] method to reset to any resizeWHScale

Change border style

Concise

Classic

// Only two border styles are available, concise style(JPConciseFrameType) and classic style(JPClassicFrameTypeCurrently).
// You can modify the border style by initializing or directly setting frameType properties
self.imageresizerView.frameType = JPClassicFrameType;

Custom Border Image

Stretch Mode

Tile Mode

// Use custom border pictures (example: tile mode)
UIImage *tileBorderImage = [[UIImage imageNamed:@"jp_dotted_line"] resizableImageWithCapInsets:UIEdgeInsetsMake(14, 14, 14, 14) resizingMode:UIImageResizingModeTile];

// Set the offset between the border image and the border (CGRectInset, used to adjust the gap between the border image and the border)
self.imageresizerView.borderImageRectInset = CGPointMake(-1.75, -1.75);

// Set the border image (use frameType's borders if it's nil)
self.imageresizerView.borderImage = tileBorderImage;

Switching resizeWHScale

// 1.Custom parameter switching
/**
 * resizeWHScale:      Target tailoring aspect ratio (0 is arbitrary ratio)
 * isToBeArbitrarily:  Whether resizeWHScale is an arbitrary proportion after switching (if YES, last resizeWHScale = 0)
 * animated:           Whether with animation
 */
[self.imageresizerView setResizeWHScale:(16.0 / 9.0) isToBeArbitrarily:YES animated:YES];

// 2.Direct Settings
self.imageresizerView.resizeWHScale = 1.0;
// The latest resizeWHScale is saved after the default switch, and it has its own animation effect, which is equivalent to:
[self.imageresizerView setResizeWHScale:1.0 isToBeArbitrarily:NO animated:YES];

Mirror reversal

Effect.gif

// Vertical Mirror, YES -> Rotates 180 degrees along Y axis, NO -> Reduction
BOOL isVerticalityMirror = !self.imageresizerView.verticalityMirror;
[self.imageresizerView setVerticalityMirror:isVerticalityMirror animated:YES];

// Horizontal Mirror, YES -> Rotates 180 Degrees along X-axis, NO -> Reduction
BOOL isHorizontalMirror = !self.imageresizerView.horizontalMirror;
[self.imageresizerView setHorizontalMirror:isHorizontalMirror animated:YES];

Rotate

// Default counterclockwise rotation, rotation angle is 90 degrees
[self.imageresizerView rotation];

// Set the isClockwiseRotation property to YES if clockwise rotation is required
self.imageresizerView.isClockwiseRotation = YES;

Reset

// Reset to the initial state, vertical direction, can be reset to different resizeWHScale

// 1.Reset by currently resizeWHScale
/**
 * With this method, the width-height ratio of the clipping box is reset according to the current resizeWHScale value.
 */
[self.imageresizerView recoveryByCurrentResizeWHScale];

// isToBeArbitrarily: Is resizeWHScale in any proportion after reset (if YES, last resizeWHScale = 0)
BOOL isToBeArbitrarily = self.isToBeArbitrarily;   

// 2.Reset by initialResizeWHScale
/**
 * initialResizeWHScale defaults to resizeWHScale at initialization, after which it can modify the value of initialResizeWHScale itself.
 * With this method, the width-height ratio of the clipping box is reset according to the initialResizeWHScale value.
 * If isToBeArbitrarily is NO, resizeWHScale = initialResizeWHScale after reset.
 */
[self.imageresizerView recoveryByInitialResizeWHScale:isToBeArbitrarily];
    
// 3.Reset by targetResizeWHScale
/**
 * With this method, the width-to-height ratio of the clipping frame is reset according to the targetResizeWHScale.
 * If isToBeArbitrarily is NO, resizeWHScale = targetResizeWHScale after reset.
 */
CGFloat imageresizeWHScale = self.imageresizerView.imageresizeWHScale; // Gets the aspect ratio of the current clipping box
[self.imageresizerView recoveryByTargetResizeWHScale:imageresizeWHScale isToBeArbitrarily:isToBeArbitrarily];

Preview

// Preview mode: Hide borders, close drag-and-drop operations, for previewing clipped areas

// 1.Default with animation effect
self.imageresizerView.isPreview = YES;

// 2.Customize whether to with animation effect or not
[self.imageresizerView setIsPreview:YES animated:NO]

Tailoring

// The clipping process is executed in the sub-thread, and the callback is cut back to the main thread for execution.
// If it is a HD image, HUD prompt can be added before calling.
// scale(compression scale, 0.0 ~ 1.0): If it is greater than or equal to 1.0, clip it according to the size of the original drawing, and return it to nil if it is less than or equal to 0.0.
// example: scale = 0.5, 1000 x 1000 --> 500 x 500

// 1.Custom Compression scale for Tailoring
[self.imageresizerView imageresizerWithComplete:^(UIImage *resizeImage) {
    // When the clipping is completed, resizeImage is the clipped image.
    // Pay attention to circular references
} scale:0.7]; // example: Compressed to 70% of the original size.

// 2.Tailoring with original size
[self.imageresizerView originImageresizerWithComplete:^(UIImage *resizeImage) {
    // When the clipping is completed, resizeImage is the clipped image.
    // Pay attention to circular references
}];

Other

// Lock the clipping area. After locking, the clipping area cannot be dragged. NO unlocks the clipping area.
self.imageresizerView.isLockResizeFrame = YES;

// Whether to Adapt the Cutting Area Size when Rotating to Horizontal Direction
// When the width of the picture is smaller than the height of the picture, this property defaults to YES and can be manually set to NO.
self.imageresizerView.isAutoScale = NO;

Install

JPImageresizerView can be installed by CocoaPods, just add the following line to your podfile:

pod 'JPImageresizerView'

Feedback address

E-mail: [email protected]
Blog: https://www.jianshu.com/u/2edfbadd451c