iphone - 使用分隔器将图像分成两部分

Question

我正在开发一个应用程序，我需要使用红线将图像分成两部分。

1. 标签的左侧

2. 价格的正确部分

   

问题 1。

如何在图像上画一条红线？

问题2。

如何使用红线将图像分成两部分？（红线位置不固定。用户可以随意移动位置）

问题 3。

如何获取行当前位置以及如何使用该位置两个分割图像

提前致谢

Answer 1

我会以与 koray 建议的方式相同的方式处理这个问题：

1）我假设您上面的图像/视图将由视图控制器管理，我将从这里调用ImageSeperatorViewController。

在ImageSeperatorViewController内部，在-(void) viewDidLoad{}方法中插入 koray 的代码。确保将 imageToSplit 变量更改为 UIImageView 而不是普通的 UIView。

2）接下来，我假设您知道如何检测用户手势。您将检测这些手势，并确定用户是否选择了视图（即koray 代码中的bar ）。一旦确定用户是否选择了bar，只需使用触摸位置更新其原点的 X 位置。

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

3）对于裁剪，我不会使用github.com/bilalmughal/NLImageCropper，它不会做你需要做的事情。

Answer 2

试穿这个尺寸：

标题：

@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 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;
}

这个概念很简单 - 你想要一个带有分隔线的图像。您可以只覆盖一个视图，或覆盖drawRect:，或任何数量的任何解决方案。我宁愿给你这个类别。它只是使用一些快速的 Core Graphics 调用在指定位置生成具有所需分隔符的图像，无论是图案图像还是颜色。如果您还想支持水平分隔线，那么修改它是相当简单的。奖励：您可以使用平铺图像作为分隔线！

现在回答你的主要问题。使用类别是不言自明的 - 只需在源背景上调用两种方法之一以使用分隔线生成一个，然后应用该图像而不是原始源图像。

现在，第二个问题很简单——当分隔线被移动时，根据新的分隔线位置重新生成图像。这实际上是一种相对低效的方法，但是对于您的目的而言，这应该足够轻巧，并且仅在移动分隔线时才是一个问题。过早的优化同样是一种罪过。

第三个问题也很简单——调用imagesBySlicingAt:——它将返回一个包含两个图像的数组，这是通过在提供的位置对图像进行切片生成的。随心所欲地使用它们。

此代码已经过测试可以正常工作。我强烈建议你摆弄它，不是为了任何实用目的，而是为了更好地理解所使用的机制，以便下次你可以回答问题

Answer 3

如果你想画一条线，你可以使用带有红色背景的 UIView 并将高度设置为图像的大小，宽度设置为 5 像素左右。

    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];

Answer 4

对于作物，你可以试试这个，

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);

希望这可以帮到你， ：）