2

画像を円の中に配置し、画像が適切な場所にあると判断したら、切り抜きボタンを押して画像の表示領域を切り抜くことができるインターフェイスがあります。

構造的に、UIImageViewを含むscrollviewを含むビューがあります。最初のビューレイヤーには、円の形をしたマスクとしてのシェイプレイヤーがあります。これは私の初期化コードです。

- (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の表示部分がある場所で画像をトリミングしたいと思います。

上記についてご不明な点がございましたら、お気軽にお問い合わせください。手伝ってくれませんか？

4

2 に答える 2

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
于 2013-02-20T18:01:29.307 に答える
0

ビューを円にトリミングしたら (以下の renderingView):

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

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

    UIGraphicsEndImageContext();
    return viewImage;
}

renderView で QuartzCore レイヤーの角の半径を使用して、円 (直径/2 = 角) にします。

于 2013-02-20T16:53:53.123 に答える