divide image into two parts using divider

Question

I'm working on one app where I need to divide a image into two part using a red line.

1. left part for labels

2. right part for prices

   

Question 1.

How can I draw a red line on image?

Question 2.

How can I divide image to two parts using red line ?( red line position is not fixed. user can move the position wherever it want)

Question 3.

How can I get line current position and how can I use that position two divide image

Thanks in advance

Answer 1

I would approach this in somewhat the same manner as koray was suggesting:

1) I am assuming that your above image/view is going to be managed by a view controller, which I will call ImageSeperatorViewController from here on.

Inside of ImageSeperatorViewController, insert koray's code in the -(void) viewDidLoad{} method. Make sure you change the imageToSplit variable to be an UIImageView instead of a plain UIView.

2) Next, I assume that you know how to detect user gestures. You will detect these gestures, and determine if the user has selected the view (i.e. bar in koray's code). Once you have determined if the user has selected bar, just update its origin's X position with the touch position.

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

3) For cropping, I would not use github.com/bilalmughal/NLImageCropper, it will not do what you need to do.

Answer 2

Try this on for size:

Header:

@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's 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's area
    CGRect dividerRect = CGRectMake(position - (width / 2.0f), 0, width, self.size.height);

    //fill the divider's 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 want an image with the divider drawn over it. You could just overlay a view, or override drawRect:, or any number of any solutions. I'd rather give you this category. It just uses some quick Core Graphics calls to generate an image with your desired divider, be it pattern image or color, at the specified position. If you want support for horizontal dividers as well, it is rather trivial to modify this as such. Bonus: You can use a tiled image as your divider!

Now to answer your primary question. Using the category is rather self explanatory - just call one of the two methods on your source background to generate one with the divider, and then apply that image rather than the original source image.

Now, the second question is simple - when the divider has been moved, regenerate the image based on the new divider position. This is actually a relatively inefficient way of doing it, but this ought to be lightweight enough for your purposes as well as only being an issue when moving the divider. Premature optimization is just as much a sin.

Third question is also simple - call imagesBySlicingAt: - it will return an array of two images, as generated by slicing through the image at the provided position. Use them as you wish.

This code has been tested to be functional. I strongly suggest that you fiddle around with it, not for any purpose of utility, but to better understand the mechanisms used so that next time, you can be on the answering side of things

Answer 3

For Crop 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 could just use a UIView with red background and make the height the size of your image and the width around 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];