トップ «前の日記(2012-02-22) 最新 次の日記(2012-02-24)» 編集

Cocoa練習帳

iOS/iPhone/iPad/watchOS/tvOS/MacOSX/Android プログラミング, Objective-C, Cocoa, Swiftなど

2012|01|02|03|04|05|06|07|08|09|10|11|12|
2013|01|02|03|04|05|06|07|08|09|10|11|12|
2014|01|02|03|04|05|06|07|08|09|10|11|12|
2015|01|02|03|04|05|06|07|08|09|10|11|12|
2016|01|02|03|04|05|06|07|08|09|10|11|12|
2017|01|02|03|04|05|06|07|08|09|10|11|12|
2018|01|02|03|04|05|06|07|08|09|10|11|12|
2019|01|02|03|04|05|06|07|08|09|10|11|12|
2020|01|02|03|04|05|06|07|08|09|10|11|12|
2021|01|02|03|04|05|06|07|08|09|

2012-02-23 [iOS]Image Masking(その3)

前回のクリッピングではCoreGraphicsの関数を使ったが、今回はUIKitのUIBezierPathを使ったクリップングに挑戦だ。

前回のCoreGraphicsの関数を使ったコードだ。

- (void)drawRect:(CGRect)rect
{
    CGContextRef    context = UIGraphicsGetCurrentContext();
    CGSize  imageSize = self.image.size;
    CGRect  imageRect = {10.0, 10.0, imageSize.width, imageSize.height};
    float   radius = 10.0;
    CGFloat minX = CGRectGetMinX(imageRect);
    CGFloat midX = CGRectGetMidX(imageRect);
    CGFloat maxX = CGRectGetMaxX(imageRect);
    CGFloat minY = CGRectGetMinY(imageRect);
    CGFloat midY = CGRectGetMidY(imageRect);
    CGFloat maxY = CGRectGetMaxY(imageRect);
    
    /* 現状の描画環境を保存 */
    CGContextSaveGState(context);
    
    /* 四角形の辺に接する、半径radiusの円弧を四隅に追加 */
    CGContextMoveToPoint(context, minX, midY);
    CGContextAddArcToPoint(context, minX, minY, midX, minY, radius);
    CGContextAddArcToPoint(context, maxX, minY, maxX, midY, radius);
    CGContextAddArcToPoint(context, maxX, maxY, midX, maxY, radius);
    CGContextAddArcToPoint(context, minX, maxY, minX, midY, radius);
    CGContextClosePath(context);
    
    /* 先ほどのパスをクリップ領域として設定 */
    CGContextClip(context);
    
    /* 描画 */
    [self.image drawAtPoint:CGPointMake(10.0, 10.0)];
    
    /* 描画環境を先ほどの保存時点に戻す */
    CGContextRestoreGState(context);
}

UIBezierPathを使うとこうなる。ちょっと、四隅が丸い四角の例なので、簡単なコードになってしまったが。

- (void)drawRect:(CGRect)rect
{
    CGContextRef    context = UIGraphicsGetCurrentContext();
    CGSize  imageSize = self.image.size;
    CGRect  imageRect = {10.0, 10.0, imageSize.width, imageSize.height};
    float   radius = 10.0;
    
    /* 現状の描画環境を保存 */
    CGContextSaveGState(context);
    
    /* 四角形の四隅を半径radiusの円弧に */
    UIBezierPath*   aPath = [UIBezierPath bezierPathWithRoundedRect:imageRect cornerRadius:radius];
    
    /* パスをクリップ領域として設定 */
    [aPath addClip];
    
    /* 描画 */
    [self.image drawAtPoint:CGPointMake(10.0, 10.0)];
   
    /* 描画環境を先ほどの保存時点に戻す */
    CGContextRestoreGState(context);
}

_ 関連情報

Programming with Quartz: 2D and PDF Graphics in Mac OS X
CoreGraphicsを解説した書籍。
Drawing and Printing Guide for iOS
iOS Developer Libraryの情報。

トップ «前の日記(2012-02-22) 最新 次の日記(2012-02-24)» 編集