Question

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

左侧标签
正确的价格部分

问题1。

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

问题2。

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

问题3。

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

提前致谢

Answer 1

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

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

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

2）接下来，我假设您知道如何检测用户手势。您将检测这些手势，并确定用户是否已选择视图（即koray代码中的 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

对于裁剪你可以试试这个，

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

希望这可以帮到你，:)）

Answer 4

如果你想绘制一条线，你可以使用红色背景的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];

使用分频器将图像分成两部分

4 个答案: