2016-08-26 13 views
0

私は画像ビューに円形のマスクを与えようとしていますが、円の領域で画像の部分を切り抜かなければなりません。しかし、私は添付された画像に注釈がついたマスクにいくつかの問題に直面しています。 Masking an image for cropping featureiosで画像を切り抜くためのサークルマスキング

以下は、私が使用していたコードです。画像表示層

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

円形マスクの周りの白い部分を部分的に表示するか、アルファを使用して透明なCGColorを適用するように提案できますか?

+0

マスキングする代わりに、中心を削除して長方形のCAShapeLayerを作成できますか?次に、レイヤーに背景色を適用しますか? – Ollie

+0

実際、私の要求は長方形ではなく円形の形を与えることです。 –

+1

申し訳ありませんが、私は私の説明でより具体的になります。ダイアグラムで「イメージ領域の読み込み」というラベルの付いた領域と一致する四角形のCAShapeLayer。これは画像全体をカバーします。次に、 'UIBezierPath'を使用して、レイヤーの中心にある円を削除します – Ollie

答えて

2

私がした方法がある:

ボトム画像は、そのビューを介して見ることができるように、私はUIImageViewの上UIViewを置き、私はトップ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を使用することができます。

あなたはこのような何かを得るでしょう:

enter image description here

あなたが希望の透明性を得るために上面図のアルファを調整することができます。 このようにして、タッチで穴を移動することもでき、タッチ位置に基づいてビューが再描画されます。

関連する問題