chia hình ảnh thành hai phần bằng cách sử dụng dải phân cách

Question

Tôi đang làm việc trên một ứng dụng mà tôi cần chia một hình ảnh thành hai phần bằng đường màu đỏ.

1. phần bên trái cho các nhãn

2. phần phù hợp với giá

   

Câu hỏi 1.

Làm thế nào tôi có thể vẽ một đường màu đỏ trên hình ảnh?

Câu hỏi 2.

Làm thế nào tôi có thể chia ảnh để hai phần bằng đường đỏ? (Vị trí đường đỏ chưa được khắc phục. Người dùng có thể di chuyển vị trí bất cứ nơi nào nó muốn)

Câu hỏi 3.

Làm thế nào tôi có thể nhận được dòng vị trí hiện tại và làm thế nào tôi có thể sử dụng hình ảnh phân chia vị trí thứ hai

Cảm ơn trước

Answer 1

Đối với cây trồng bạn có thể thử này,

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

hy vọng điều này có thể giúp bạn, :)

Answer 2

nếu bạn muốn vẽ một đường bạn chỉ có thể sử dụng một UIView với nền đỏ và làm cho chiều cao kích thước hình ảnh của bạn và chiều rộng khoảng 5 pixel.

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 3

tôi sẽ tiếp cận này trong hơi theo cách tương tự như Koray được gợi ý:

1) Tôi giả định rằng hình trên của bạn/xem sẽ được quản lý bởi một bộ điều khiển xem, mà tôi sẽ gọi ImageSeperatorViewController từ đây trở đi.

Bên trong ImageSeperatorViewController, chèn mã của koray theo phương thức - (void) viewDidLoad {}. Đảm bảo bạn thay đổi biến imageToSplit thành UIImageView thay vì UIView thuần túy.

2) Tiếp theo, tôi giả sử rằng bạn biết cách phát hiện cử chỉ của người dùng. Bạn sẽ phát hiện các cử chỉ này và xác định xem người dùng đã chọn chế độ xem (tức là thanh trong mã của koray). Sau khi bạn đã xác định xem người dùng đã chọn thanh , chỉ cần cập nhật vị trí X của vị trí gốc với vị trí cảm ứng.

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

3) Để cắt xén, tôi sẽ không sử dụng github.com/bilalmughal/NLImageCropper, nó sẽ không làm những gì bạn cần làm.

Answer 4

Hãy thử điều này trên cho kích thước:

Tiêu đề:

@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 

Thực hiện:

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

Khái niệm này rất đơn giản - bạn muốn một hình ảnh với chia rút ra qua nó. Bạn chỉ có thể che phủ một chế độ xem hoặc ghi đè drawRect: hoặc bất kỳ số lượng giải pháp nào. Tôi muốn cung cấp cho bạn loại này. Nó chỉ sử dụng một số cuộc gọi Core Graphics nhanh để tạo ra một hình ảnh với bộ chia mong muốn của bạn, có thể là hình mẫu hoặc màu sắc, ở vị trí đã chỉ định. Nếu bạn muốn hỗ trợ cho ngăn ngang là tốt, nó là khá tầm thường để sửa đổi này như vậy. Tiền thưởng: Bạn có thể sử dụng hình ảnh xếp kề làm dải phân cách!

Bây giờ, hãy trả lời câu hỏi chính của bạn. Sử dụng danh mục khá tự giải thích - chỉ cần gọi một trong hai phương pháp trên nền nguồn của bạn để tạo một phương thức có dải phân cách và sau đó áp dụng hình ảnh đó thay vì hình ảnh nguồn gốc.

Bây giờ, câu hỏi thứ hai rất đơn giản - khi bộ chia đã được di chuyển, hãy tạo lại hình ảnh dựa trên vị trí bộ chia mới. Đây thực sự là một cách thực hiện tương đối kém hiệu quả, nhưng điều này phải đủ nhẹ cho mục đích của bạn cũng như chỉ là một vấn đề khi di chuyển dải phân cách. Tối ưu hóa sớm cũng giống như một tội lỗi.

Câu hỏi thứ ba cũng đơn giản - gọi imagesBySlicingAt: - nó sẽ trả về một mảng gồm hai hình ảnh, được tạo bằng cách cắt qua hình ảnh ở vị trí được cung cấp. Sử dụng chúng như bạn muốn.

Mã này đã được thử nghiệm để hoạt động. Tôi đặc biệt khuyên bạn nên chơi đùa với nó, không vì mục đích tiện ích nào, nhưng để hiểu rõ hơn về cơ chế được sử dụng để lần sau, bạn có thể ở bên trả lời của mọi thứ