Question

我试图给图像视图一个圆形蒙版，我必须在圆形区域裁剪图像部分，这是正常的。但我面临着面具的一些问题，在附图中注明了这个问题。

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

向图像视图图层添加蒙版

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吗？

Answer 1

我的方式是：

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

以下是UIView的drawRect：

- (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来获取圆形贝塞尔曲线。

你会得到这样的东西：

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

圈子掩盖在ios中的图像裁剪

1 个答案: