Core Graphics図面&2 d変形
8286 ワード
ツールバーの
iOS画像処理のCore GraphicsとOpenGL ES初見iOSは、Core Graphics/QuartZ 2 DとOpenGL ESの2つのグラフィックAPIファミリーをサポートしています.OpenGL ESはプラットフォームにまたがるグラフィックAPIであり、OpenGLの簡略化されたバージョンに属する.QuartZ 2 Dはアップル社が開発したAPIで、Core Graphics Frameworkの一部であり、CベースのAPIフレームワークであり、Quartzをグラフィックエンジンとして使用している.低レベル、軽量レベル、高忠実度の2 Dレンダリングを提供します.このフレームワークは、パスベースの描画、変換、カラー管理、スクリーンフリーレンダリング、テンプレート、グラデーション、マスク、画像データ管理、画像の作成、マスク、PDFドキュメントの作成、表示、解析に使用できます.
Core Graphicsのグラフィックコンテキスト(必須)
グラフィックの上下質問の取得
1.自分でピクチャタイプのコンテキストを作成します.
UIGraphicsBeginImageContextWithOptions関数を呼び出すと、画像を処理するためのグラフィックコンテキストが得られます.このコンテキストを使用すると、その上で絵を描き、画像を生成することができます.UIGraphicsGetImageFromCurrentImageContext関数を呼び出すと、現在のコンテキストからUIImgeオブジェクトを取得できます.すべての描画操作の後、UIGraphicsEndImageContext関数を呼び出してグラフィックコンテキストを閉じることを忘れないでください.
2.cocoaを使用して生成したグラフィックコンテキスト.
サブクラス化して独自のdrawRect:メソッドを実装すると、drawRect:メソッドが呼び出されると、Cocoaがグラフィックコンテキストを作成し、グラフィックコンテキストに対するすべての描画操作がUIViewに表示されます.
UIGraphicsBeginImageContextWithOptions関数またはdrawRect:メソッドに現在存在する場合、コンテキストは参照されません.Core Graphicsを使用するには、UIGraphicsGetCurrentContext関数を呼び出して現在のグラフィックコンテキストを取得できます.
contextRefグラフィックコンテキストで、グラフィックを描画
1.パスによる描画
CGcontextRefドキュメントの解析
CGPathドキュメント解析
2.文字列の描画
3.画像で絵を描く
4.グラデーションの描画
CGAffineTransform-2 dひずみ
CGAffineTransformはcore graphicsフレームワークの下の構造体である.CGAffineTransformは、コントロールの平行移動、ズーム、回転などを変更できる変形を処理するクラスで、座標系は2次元座標系、すなわち右はx軸正方向、下はy軸正方向を採用している
CGAffineTransform UIViewで提供されているアニメーションメソッドを使用して、blockでtransformを変更するとアニメーション効果が得られます.
UIViewには、変形を制御するために使用されるtransformプロパティがあります.その使用方法は次のとおりです. CGAffineTransformMakeTranslationは、初期位置を基準としてx軸方向にx単位、y軸方向にy単位 を平行移動することを実現する.
注意:txが正の値の場合、x軸の正方向に平行移動し、逆にx軸の負方向に平行移動します.tyが正の値の場合、y軸の正方向に平行移動し、逆にy軸の負方向に平行移動する CGAffineTransformMakeScaleは、初期位置を基準としてx軸方向にx倍、y軸方向にy倍 のスケーリングを実現する.
注意:sxが正の値の場合、x軸方向にx倍ズームされます.逆に、ズームに基づいて縦直線に沿って反転します.syが正の値の場合、y軸方向にy倍ズームされ、逆にズームされた上で水平線に沿って反転する CGAffineTransformMakeRotationは初期位置を基準として座標系を反時計回りにangle弧度(弧度=π/180×角度、M_PI弧度は180角度を表す)
注1:angleが正の値の場合、反時計回りに座標系を回転させ、逆に時計回りに座標系を回転させる注2:反時計回りに座標系を回転させる表現は、コントロールを時計回りに回転させる
そうたいひずみ
drawRectメソッド手動呼び出し
uiviewのプロパティ:setNeedsDisplay
iOS画像処理のCore GraphicsとOpenGL ES初見iOSは、Core Graphics/QuartZ 2 DとOpenGL ESの2つのグラフィックAPIファミリーをサポートしています.OpenGL ESはプラットフォームにまたがるグラフィックAPIであり、OpenGLの簡略化されたバージョンに属する.QuartZ 2 Dはアップル社が開発したAPIで、Core Graphics Frameworkの一部であり、CベースのAPIフレームワークであり、Quartzをグラフィックエンジンとして使用している.低レベル、軽量レベル、高忠実度の2 Dレンダリングを提供します.このフレームワークは、パスベースの描画、変換、カラー管理、スクリーンフリーレンダリング、テンプレート、グラデーション、マスク、画像データ管理、画像の作成、マスク、PDFドキュメントの作成、表示、解析に使用できます.
Core Graphicsのグラフィックコンテキスト(必須)
Core Graphics （CGContextRef）、このグラフィックコンテキストは、各描画関数で使用されます.グラフィックコンテキストcontext:パラメータを持っている場合は、グラフィックコンテキストがあるのと同じです.このコンテキストは、図面を描くために必要なものかもしれません.グラフィックコンテキストを取得する3つの方法(drawRect:、drawRect:inContext:、UIGraphicsBeginImageContextWithOptions).グラフィックの上下質問の取得
1.自分でピクチャタイプのコンテキストを作成します.
UIGraphicsBeginImageContextWithOptions関数を呼び出すと、画像を処理するためのグラフィックコンテキストが得られます.このコンテキストを使用すると、その上で絵を描き、画像を生成することができます.UIGraphicsGetImageFromCurrentImageContext関数を呼び出すと、現在のコンテキストからUIImgeオブジェクトを取得できます.すべての描画操作の後、UIGraphicsEndImageContext関数を呼び出してグラフィックコンテキストを閉じることを忘れないでください.
UIGraphicsBeginImageContextWithOptions(CGSizeMake(100,100), NO, 0);
CGContextRef con = UIGraphicsGetCurrentContext();
//
....
UIImage* im = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
2.cocoaを使用して生成したグラフィックコンテキスト.
サブクラス化して独自のdrawRect:メソッドを実装すると、drawRect:メソッドが呼び出されると、Cocoaがグラフィックコンテキストを作成し、グラフィックコンテキストに対するすべての描画操作がUIViewに表示されます.
- (void) drawRect: (CGRect) rect
- (void)drawLayer:(CALayer*)lay inContext:(CGContextRef)con
UIGraphicsBeginImageContextWithOptions関数またはdrawRect:メソッドに現在存在する場合、コンテキストは参照されません.Core Graphicsを使用するには、UIGraphicsGetCurrentContext関数を呼び出して現在のグラフィックコンテキストを取得できます.
contextRefグラフィックコンテキストで、グラフィックを描画
1.パスによる描画
//
CGContextRef context = UIGraphicsGetCurrentContext();
//
CGPathRef path = CGPathCreateWithRect(CGRectMake(100, 100, 100, 100), nil);
//
CGContextAddPath(context, path);
//
CGContextSetRGBStrokeColor(context, 1.0, 0, 0, 1);
//
CGContextDrawPath(context, kCGPathFillStroke);
//
CGPathRelease(path);
CGcontextRefドキュメントの解析
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextMoveToPoint
CGContextAddLineToPoint
CGContextAddEllipseInRect
CGContextSetLineCap
CGContextSetLineDash
CGContextAddRect
CGContextStrokeRect
CGContextStrokeRectWithWidth
CGContextStrokeLineSegments
CGContextAddArc 0 1
CGContextAddArcToPoint(context,0,0, 2, 9, 40);// point 1 ， 1 2
CGContextSetShadowWithColor
CGContextSetRGBFillColor
CGContextSetRGBStrokeColor
CGContextSetFillColorSpace
CGConextSetStrokeColorSpace
CGContextFillRect rect
CGContextSetAlaha
CGContextTranslateCTM
CGContextSetLineWidth
CGContextAddRects
CGContextAddQuadCurveToPoint
CGContextStrokePath
CGContextDrawPath
CGContextClosePath
CGContextTranslateCTM(context, 0, rect.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextSetInterpolationQuality
CGImageCreateWithImageInRect
CGContextEOFillPath
CGContextFillPath
CGContextFillRect
CGContextFillRects
CGContextFillEllipseInRect
CGContextDrawPath ，kCGPathFill ，kCGPathEOFill ，kCGPathFillStroke ， kCGPathEOFillStroke ，
CGPathドキュメント解析
//Creating and Managing Paths
CGPathCreateMutable 。
CGPathCreateWithEllipseInRect 。
CGPathCreateWithRect 。
CGPathCreateWithRoundedRect 。
CGPathCreateCopy 。
CGPathCreateCopyByTransformingPath 。
CGPathCreateCopyByDashingPath 。
CGPathCreateCopyByStrokingPath 。
CGPathCreateMutableCopy 。
CGPathCreateMutableCopyByTransformingPath 。
CGPathRelease
CGPathRetain 。
//Modifying Quartz Paths
CGPathAddArc ， 。
CGPathAddRelativeArc ， 。
CGPathAddArcToPoint ， 。
CGPathAddCurveToPoint Bézier é 。
CGPathAddLines 。
CGPathAddLineToPoint 。
CGPathAddPath 。
CGPathAddQuadCurveToPoint Bézier é 。
CGPathAddRect ， 。
CGPathAddRects 。
CGPathAddRoundedRect 。
CGPathApply ， 。
CGPathMoveToPoint ， 。
CGPathCloseSubpath 。
CGPathAddEllipseInRect ， 。
//Getting Information about Quartz Paths
CGPathEqualToPath 。
CGPathGetBoundingBox 。
CGPathGetPathBoundingBox
CGPathGetCurrentPoint 。
CGPathGetTypeID 。
CGPathIsRect 。
CGPathContainsPoint 。
CGLineCap 。
CGLineJoin 。
2.文字列の描画
[self.title drawInRect:CGRectMake(0, 0, 100, 40) withAttributes:@{NSForegroundColorAttributeName:[UIColor redColor],NSFontAttributeName:[UIFont systemFontOfSize:15]}];
3.画像で絵を描く
UIGraphicsBeginImageContextWithOptions(CGSizeMake(100,100), NO, 0);
UIImage *img = [UIImage imageNamed:@"1.png"];
[img drawInRect:CGRectMake(0, 0, 50, 50)];
UIImage *newImg = [UIImage imageNamed:@"2.png"];
[newImg drawInRect:CGRectMake(60, 0, 60, 60)];
UIImage* im = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageView *imageView = [[UIImageView alloc] initWithImage:im];
imageView.frame = CGRectMake(100, 100, 200, 40);
[self.view addSubview:imageView];
4.グラデーションの描画
CGContextClip(context);
CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
CGFloat colors[] = { 204.0 / 255.0, 224.0 / 255.0, 244.0 / 255.0, 1.00,
29.0 / 255.0, 156.0 / 255.0, 215.0 / 255.0, 1.00, 0.0 /
255.0, 50.0 / 255.0, 126.0 / 255.0, 1.00,
};
CGGradientRef gradient =CGGradientCreateWithColorComponents (rgb, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4));
CGColorSpaceRelease(rgb);
CGContextDrawLinearGradient(context,gradient,CGPointMake(0.0,0.0),CGPointMake(0.0,self.frame.size.height), kCGGradientDrawsBeforeStartLocation);
CGAffineTransform-2 dひずみ
CGAffineTransformはcore graphicsフレームワークの下の構造体である.CGAffineTransformは、コントロールの平行移動、ズーム、回転などを変更できる変形を処理するクラスで、座標系は2次元座標系、すなわち右はx軸正方向、下はy軸正方向を採用している
CGAffineTransform UIViewで提供されているアニメーションメソッドを使用して、blockでtransformを変更するとアニメーション効果が得られます.
UIViewには、変形を制御するために使用されるtransformプロパティがあります.その使用方法は次のとおりです.
//
CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty)
//
self.demoImageView.transform = CGAffineTransformMakeTranslation(100, 100);
注意:txが正の値の場合、x軸の正方向に平行移動し、逆にx軸の負方向に平行移動します.tyが正の値の場合、y軸の正方向に平行移動し、逆にy軸の負方向に平行移動する
//
CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)
//
self.demoImageView.transform = CGAffineTransformMakeScale(2, 0.5);
注意:sxが正の値の場合、x軸方向にx倍ズームされます.逆に、ズームに基づいて縦直線に沿って反転します.syが正の値の場合、y軸方向にy倍ズームされ、逆にズームされた上で水平線に沿って反転する
//
CGAffineTransformMakeRotation(CGFloat angle)
//
self.demoImageView.transform = CGAffineTransformMakeRotation(M_PI*0.5);
注1:angleが正の値の場合、反時計回りに座標系を回転させ、逆に時計回りに座標系を回転させる注2:反時計回りに座標系を回転させる表現は、コントロールを時計回りに回転させる
そうたいひずみ
CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty)
CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy)
CGAffineTransformRotate(CGAffineTransform t, CGFloat angle)
drawRectメソッド手動呼び出し
uiviewのプロパティ:setNeedsDisplay