2013-02-20 35 views
2

我有一個界面,可以讓您在一個圓圈內定位圖像,然後當您決定將它放在正確的位置時,按下裁切按鈕並裁切可見區域圖片。如何在一個圓圈內定位和裁剪UIImage

結構上我有一個視圖,它包含一個包含UIImageView的滾動視圖。 第一個視圖圖層具有一個形狀圖層作爲形狀爲圓形的蒙版。這是我的初始化代碼。

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 


_buttonView = [[UIView alloc]initWithFrame:CGRectMake(0, self.view.height - 136, 320, 136)]; 

[_buttonView setBackgroundColor:[UIColor whiteColor]]; 
_saveButton = [UIButton buttonWithType:UIButtonTypeCustom]; 
[_saveButton setTitle:@"Save image" forState:UIControlStateNormal]; 
[_saveButton setBackgroundImage:[[UIImage imageNamed:@"cntnt-button-defult-dark-grey.png"] resizableImageWithNormalCapInsets] forState:UIControlStateNormal]; 
[_saveButton addTarget:self action:@selector(saveImageWasPressed:) forControlEvents:UIControlEventTouchUpInside]; 
[_saveButton setBackgroundImage:[[UIImage imageNamed:@"cntnt-button-pressed-dark-grey.png"] resizableImageWithNormalCapInsets] forState:UIControlStateHighlighted]; 
[_saveButton setFrame:CGRectMake(10, 11, 300, 50)]; 
[_buttonView addSubview:_saveButton]; 


_cancelButton = [UIButton buttonWithType:UIButtonTypeCustom]; 
[_cancelButton setTitle:@"CANCEL" forState:UIControlStateNormal]; 
[_cancelButton setBackgroundImage:[[UIImage imageNamed:@"btm-button-defult-grey.png"] resizableImageWithNormalCapInsets] forState:UIControlStateNormal]; 
[_cancelButton setBackgroundImage:[[UIImage imageNamed:@"btm-button-pressed-grey.png"] resizableImageWithNormalCapInsets] forState:UIControlStateHighlighted]; 
[_cancelButton setFrame:CGRectMake(10, _saveButton.bottom+7, 300, 50)]; 
[_buttonView addSubview:_cancelButton]; 


[self.view addSubview:_buttonView]; 

_topView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, _buttonView.yOrigin)]; 
[self.view addSubview:_topView]; 


_scrollView = [[UIScrollView alloc]initWithFrame:_topView.bounds]; 
[self.topView addSubview:_scrollView]; 
[_scrollView setDecelerationRate:0.0]; 


_imageView = [[UIImageView alloc]initWithFrame:CGRectZero]; 
[_scrollView addSubview:_imageView]; 


UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, (self.topView.height - 300)/2, 300, 300)]; 
_imageOverlay = [CAShapeLayer layer]; 
[_imageOverlay setPath:path.CGPath]; 
[_imageOverlay setFrame:CGRectMake(0, 0, 320, 320)]; 
[_topView.layer setMask:_imageOverlay]; 

[_imageView setImage:[UIImage imageNamed:@"portrait.jpg"]]; 
[_imageView setSize:_imageView.image.size]; 
[_scrollView setContentOffset:_imageView.center]; 
[_scrollView setContentSize:_imageView.image.size]; 



} 

當「_saveButton」按我希望要裁剪的圖像,其中_imageOverlay的可見部分。

如果您對上述有任何疑問,請隨時詢問。 你能幫我嗎?

回答

0

一旦你裁剪你爲了圓(以下renderingView):

-(UIImage *)retrieveSingletonImage:(UIView *)renderingView 
{ 
    UIGraphicsBeginImageContextWithOptions(renderingView.bounds.size, renderingView.opaque, 0.0); 

    [renderingView.layer renderInContext: UIGraphicsGetCurrentContext()]; 
    UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext(); 

    UIGraphicsEndImageContext(); 
    return viewImage; 
} 

使用QuartzCore在renderingView層圓角半徑,使其圓(直徑/ 2 =角落)

+0

我想我明白了,但是我應該將哪個視圖作爲參數傳遞給哪個視圖?請記住我上面給出的結構。乾杯! – 2013-02-20 17:08:47

+0

renderingView在我的代碼可能是you_ImageOverlay(我認爲)。所以_imageOverlay.layer.cornerRadius = whatever,然後調用我的代碼。 – Eric 2013-02-20 17:14:14

0

我發現一些網上做的工作的片段。 首先我代表我的圓形覆蓋

- (UIImage *)getCroppedImage 
{ 
    float zoomScale = 1.0/[_scrollView zoomScale]; 
    CGRect rect; 
    rect.origin.x = [_scrollView contentOffset].x * zoomScale; 
    rect.origin.y = [_scrollView contentOffset].y * zoomScale; 
    rect.size.width =_imageOverlay.bounds.size.width *zoomScale; 
    rect.size.height =_imageOverlay.bounds.size.height *zoomScale; 

    CGImageRef cr = CGImageCreateWithImageInRect([[_imageView image] CGImage], rect); 
    UIImage *cropped = [UIImage imageWithCGImage:cr]; 
    CGImageRelease(cr); 
    return [cropped roundedCornerImage:150 borderSize:0]; 
} 

然後返回之前我圓了圖像的角落,再裁剪矩形裁剪圖像。

@implementation UIImage (RoundedCorner) 

// Creates a copy of this image with rounded corners 
// If borderSize is non-zero, a transparent border of the given size will also be added 
// Original author: Björn Sållarp. Used with permission. See: http://blog.sallarp.com/iphone-uiimage-round-corners/ 
- (UIImage *)roundedCornerImage:(NSInteger)cornerSize borderSize:(NSInteger)borderSize { 
    // If the image does not have an alpha layer, add one 
    UIImage *image = [self imageWithAlpha]; 

    CGFloat scale = [[UIScreen mainScreen] scale]; 
    UIGraphicsBeginImageContextWithOptions(image.size, !image.hasAlpha, 0); 

    // Build a context that's the same dimensions as the new size 
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGContextTranslateCTM(context, 0, image.size.height); 
    CGContextScaleCTM(context, 1.0, -1.0); 

    // Create a clipping path with rounded corners 
    CGContextBeginPath(context); 
    [self addRoundedRectToPath:CGRectMake(borderSize, borderSize, image.size.width - borderSize * 2, image.size.height - borderSize * 2) 
         context:context 
        ovalWidth:cornerSize * scale 
        ovalHeight:cornerSize * scale]; 
    CGContextClosePath(context); 
    CGContextClip(context); 

    // Draw the image to the context; the clipping path will make anything outside the rounded rect transparent 
    CGContextDrawImage(context, CGRectMake(0, 0, image.size.width, image.size.height), image.CGImage); 

    // Create a CGImage from the context 
    UIImage *roundedImage = UIGraphicsGetImageFromCurrentImageContext(); 

    UIGraphicsEndImageContext(); 

    return roundedImage; 
} 

@end