Divide the image in two using a separator

Question

I am working on a single application where I need to split an image into two using the red line.

• left side for shortcuts

• right side for prices

  

Question 1.

How can I draw a red line in the image?

Question 2.

How can I split an image into two using the red line? (the red line position is not fixed, the user can move the position where she wants)

Question 3.

How can I get the current position of a line and how can I use this position for two separating images

Thanks in advance

Answer 1

I would approach this in much the same way as koray suggested:

1) I assume that your previous image / view will be controlled by the view controller, which I will call ImageSeperatorViewController here.

Inside ImageSeperatorViewController, paste the koray code into the - (void) viewDidLoad {} method. Make sure you change the imageToSplit variable as a UIImageView instead of a simple UIView.

2) Next, I assume that you know how to recognize user gestures. You will find these gestures and determine if the user has selected a view (i.e. a bar in the king’s code). Once you have determined whether the user has selected the bar , simply update the position of the origin of the X coordinate using the touch position.

CGRect barFrame = bar.frame; barFrame.origin.x = *X location of the users touch* bar.frame = barFrame; 

3) I would not use github.com/bilalmughal/NLImageCropper for trimming, it will not do what you need.

Answer 2

Try this for size:

Title:

 @interface UIImage (ImageDivider) - (UIImage*)imageWithDividerAt:(CGFloat)position width:(CGFloat)width color:(UIColor*)color; - (UIImage*)imageWithDividerAt:(CGFloat)position patternImage:(UIImage*)patternImage; - (NSArray*)imagesBySlicingAt:(CGFloat)position; @end 

Implementation:

 @implementation UIImage (ImageDivider) - (UIImage*)imageWithDividerAt:(CGFloat)position patternImage:(UIImage*)patternImage { //pattern image UIColor *patternColor = [UIColor colorWithPatternImage:patternImage]; CGFloat width = patternImage.size.width; //set up context UIGraphicsBeginImageContext(self.size); CGContextRef context = UIGraphicsGetCurrentContext(); //draw the existing image into the context [self drawAtPoint:CGPointZero]; //set the fill color from the pattern image color CGContextSetFillColorWithColor(context, patternColor.CGColor); //this is your divider area CGRect dividerRect = CGRectMake(position - (width / 2.0f), 0, width, self.size.height); //the joy of image color patterns being based on 0,0 origin! must set phase CGContextSetPatternPhase(context, CGSizeMake(dividerRect.origin.x, 0)); //fill the divider rect with the repeating pattern from the image CGContextFillRect(context, dividerRect); //get your new image and viola! UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return newImage; } - (UIImage*)imageWithDividerAt:(CGFloat)position width:(CGFloat)width color:(UIColor *)color { //set up context UIGraphicsBeginImageContext(self.size); CGContextRef context = UIGraphicsGetCurrentContext(); //draw the existing image into the context [self drawAtPoint:CGPointZero]; //set the fill color for your divider CGContextSetFillColorWithColor(context, color.CGColor); //this is your divider area CGRect dividerRect = CGRectMake(position - (width / 2.0f), 0, width, self.size.height); //fill the divider rect with the provided color CGContextFillRect(context, dividerRect); //get your new image and viola! UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return newImage; } - (NSArray*)imagesBySlicingAt:(CGFloat)position { NSMutableArray *slices = [NSMutableArray array]; //first image { //context! UIGraphicsBeginImageContext(CGSizeMake(position, self.size.height)); //draw the existing image into the context [self drawAtPoint:CGPointZero]; //get your new image and viola! [slices addObject:UIGraphicsGetImageFromCurrentImageContext()]; UIGraphicsEndImageContext(); } //second { //context! UIGraphicsBeginImageContext(CGSizeMake(self.size.width - position, self.size.height)); //draw the existing image into the context [self drawAtPoint:CGPointMake(-position, 0)]; //get your new image and viola! [slices addObject:UIGraphicsGetImageFromCurrentImageContext()]; UIGraphicsEndImageContext(); } return slices; } 

The concept is simple - you need an image with a divider drawn above it. You can simply overlay the view or override drawRect: or any number of any solutions. I would rather give you this category. It just uses some Core Graphics shortcuts to generate an image with your desired separator, be it an image of the image or color, at the specified position. If you need support for horizontal dividers, it's pretty simple to change this as such. Bonus: You can use the tiled image as your separator!

Now answer the basic question . Using a category is pretty self-evident - just call one of the two methods on the source background to create it with a separator, and then apply this image, not the original source image.

Now the second question is simple - when the separator is moved, restore the image based on the new position of the separator. This is actually a relatively inefficient way to do this, but it should be easy enough for your purposes, and only be a problem when moving the delimiter. Premature optimization is just as much a sin.

The third question is also simple - calling imagesBySlicingAt: - it will return an array of two images created by slicing the image in the provided position. Use them as you wish.

This code has been verified as functional. I strongly recommend that you play with it, and not for any purpose of usefulness, but better understand the mechanisms used so that next time you can be on the side of the answer

Answer 3

For cropping you can try this,

 UIImage *image = [UIImage imageNamed:@"yourImage.png"]; CGImageRef tmpImgRef = image.CGImage; CGImageRef topImgRef = CGImageCreateWithImageInRect(tmpImgRef, CGRectMake(0, 0, image.size.width, image.size.height / 2.0)); UIImage *topImage = [UIImage imageWithCGImage:topImgRef]; CGImageRelease(topImgRef); CGImageRef bottomImgRef = CGImageCreateWithImageInRect(tmpImgRef, CGRectMake(0, image.size.height / 2.0, image.size.width, image.size.height / 2.0)); UIImage *bottomImage = [UIImage imageWithCGImage:bottomImgRef]; CGImageRelease(bottomImgRef); 

hope this can help you :)

Answer 4

If you want to draw a line, you can simply use UIView with a red background and make the height the size of your image and a width of about 5 pixels.

  UIView *imageToSplit; //the image im trying to split using a red bar CGRect i = imageToSplit.frame; int x = i.origin.x + i.size.width/2; int y = i.origin.y; int width = 5; int height = i.size.height; UIView *bar = [[[UIView alloc] initWithFrame:CGRectMake(x, y, width, height)] autorelease]; bar.backgroundColor = [UIColor redColor]; [self.view addSubview:bar];