在ios中用于图像裁剪的圆形遮罩 [英] Circle masking for image cropping in ios

问题描述

我试图给图像视图一个圆形蒙版，我必须在圆形区域裁剪图像部分，这很好。但我面临着面具的一些问题，附件中附有注释。

I am trying to give a circular mask to image view and I have to crop the image portion in circular area, which is working fine. But I am facing some problem with the mask, which is annotated in the attached image.

以下是件我用来掩饰的代码。

Following are pieces of code which I have used to mask.

向图像视图层添加遮罩

CAShapeLayer *maskLayer = [CAShapeLayer layer];
self.imageView.layer.mask = maskLayer;
self.maskLayer = maskLayer;

为圆圈创建形状图层我们将在图像上绘制（边界圈子）

CAShapeLayer *circleLayer = [CAShapeLayer layer];
circleLayer.lineWidth = 3.0;
circleLayer.fillColor = [[UIColor clearColor] CGColor];
circleLayer.strokeColor = [[UIColor blackColor] CGColor];
[self.imageView.layer addSublayer:circleLayer];
self.circleLayer = circleLayer;

创建圈子路径

[self updateCirclePathAtLocation:CGPointMake(self.view.bounds.size.width / 2.0, self.view.bounds.size.height / 2.0) radius:self.view.bounds.size.width * 0.30];

- (void)updateCirclePathAtLocation:(CGPoint)location radius:(CGFloat)radius
{
    self.circleCenter = location;
    self.circleRadius = radius;

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path addArcWithCenter:self.circleCenter
                    radius:self.circleRadius
                startAngle:0.0
                  endAngle:M_PI * 2.0
                 clockwise:YES];

    /*
    [[UIColor colorWithWhite:0 alpha:0.1] setFill];
    [path fill];
    */

    self.maskLayer.path = [path CGPath];
    self.circleLayer.path = [path CGPath];
}

任何人都可以建议将圆形面具周围的白色区域设为部分可见或使用alpha应用透明CGColor？

Can anyone give a suggestion to make the white area around the circular mask to be partially visible or apply transparent CGColor using alpha?

推荐答案

我的方式是：

我在 UIImageView 之上放置了一个 UIView ，我在顶部做了一个透明的洞 UIView ，以便通过该视图可以看到底部图像。

I placed a UIView on top of UIImageView, and I made a transparent hole in the top UIView, so that bottom image can be seen through that view.

这是 drawRect 的UIView：

- (void)drawRect:(CGRect)rect { 
    [super drawRect:rect];

    CGContextRef context = UIGraphicsGetCurrentContext();
    // Clear any existing drawing on this view
    // Remove this if the hole never changes on redraws of the UIView
    CGContextClearRect(context, self.bounds);

    // Create a path around the entire view
    UIBezierPath *clipPath = [UIBezierPath bezierPathWithRect:self.bounds];

    // Your transparent window. This is for reference, but set this either as a property of the class or some other way
    CGRect transparentFrame; //this is the frame of the hole
    // Add the transparent window
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:transparentFrame cornerRadius:5.0f];
    [clipPath appendPath:path];

    // NOTE: If you want to add more holes, simply create another UIBezierPath and call [clipPath appendPath:anotherPath];

    // This sets the algorithm used to determine what gets filled and what doesn't
    clipPath.usesEvenOddFillRule = YES;
    // Add the clipping to the graphics context
    [clipPath addClip];

    // set your color
    UIColor *tintColor = [UIColor greenColor]; 

    // (optional) set transparency alpha
    CGContextSetAlpha(context, 0.7f);
    // tell the color to be a fill color
    [tintColor setFill];
    // fill the path
    [clipPath fill];
}

这里我使用了bezierWithROundedRect，您可以使用bezierWIthArc来获取圆形贝塞尔曲线。

Here I have used the bezierWithROundedRect and you can use bezierWIthArc to get the circular bezier.

你会得到这样的结果：

您可以调整topView的alpha值以获得所需的透明度。
通过这种方式，您还可以通过触摸移动洞，并根据您的触摸位置重新绘制视图。

You can adjust the alpha of topView to get the desired transparency. By this way, you can also move the hole by touch and the view gets redrawn based on your touch location.

这篇关于在ios中用于图像裁剪的圆形遮罩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！