やっとやった!!
私の一日の経験から、この状況に対処する方法は3つあることがわかりました。
必要な画像をpngファイルとして作成し、UIImageViewを使用して表示するだけです。(ただし、解像度が異なる同じ画像を使用する必要があることを忘れないでください。これにより、アプリのサイズが大きくなります)。
2番目の方法は、矢印画像を使用してラベルやテキストフィールドなどを作成し、バブル(または長方形)を表示することです。画像を変換するだけで、矢印のポインティング位置を変更できます。(Ilker Baltaciが前の回答で言ったように)。
3番目の方法は、CoreGraphicsによるものです。ここで好きなものを描くことができます。私の知る限り、ラベルとテキストフィールドを初期化/割り当て/保持することでアプリのサイズを増やしたり、メモリ消費量を増やしたりすると、CoreGraphicsでこれを試すことができます。
このヘルプ画面機能を実装したい3つのビューがあります。たった3つの画面で、3つの方法のいずれかを使用できます。これは、ほとんど必要のない状況で使用しても、パフォーマンスに大きな違いがないためです。しかし、私は3番目の方法で試しました。なぜなら、私はCoreGraphicsについて何も知らなかったからです。だから、それは学習のためだけです。
私が直面した問題:
矢印はボタンの中心(またはボタンの上部)を指している必要があります。したがって、この正確な場所を見つけるのは複雑です。この機能は、アプリの3ページでのみ使用しています。各ページには、説明する最大4つのアイコンが含まれています。だから私は値をハードコーディングしただけです(私のもう一つの幸運は、アプリがランドスケープモードをサポートしていないことです)。ただし、この機能を非常に多くのページで使用する場合は、いくつかの配列と、アイコンの原点、高さと幅、何とか、何とかを参照してアイコンの中心を計算することにより、アイコンの中心を見つけるメソッドを定義する必要があります。
もう1つの問題は、バブルがどこにも重なっていないことを確認する必要があることです。ここでも、各バブルの場所を見つけるグローバルメソッドが必要です。バブルのサイズは、バブル内に配置されるテキストサイズによって異なります。これはより複雑な問題であり、3つの画面については、何百もの計算を使用してグローバルメソッドを定義するつもりはありません。そこで、 self.viewを参照して、各バブルの原点、高さ、幅をハードコーディングしました。
最後になりましたが..アロー!! 矢印の高さは、バブルの場所によって異なる場合があります。泡の幅も高さによって異なる場合があります。また、矢印がボタンに向かうバブルの側面とポイントを知っておく必要があります。すでに頭の中で泡の場所を修正している場合、これらはあなたにとってまったく問題ではありません..:P
それでは、コーディングの部分に行きましょう。
- (void) createRect:(CGRect)rect xPoint:(float)x yPoint:(float)y ofHeight:(float)height ofWidth:(float)width toPointX:(float)toX toPointY:(float)toY withString:(NSString *)helpString inDirection:(NSString *)direction
{
float distance = 5.0;
float widthOfLine = 5.0;
float arrowLength = 15.0;
//Get current context
CGContextRef context = UIGraphicsGetCurrentContext();
//Set width of border & colors of bubble
CGContextSetLineWidth(context, widthOfLine);
CGContextSetStrokeColorWithColor(context, [[UIColor darkGrayColor] CGColor]);
CGContextSetFillColorWithColor(context, [[UIColor colorWithRed:0 green:0 blue:0 alpha:0.9] CGColor]);
CGContextBeginPath(context);
CGContextMoveToPoint(context, x, y);
CGContextAddLineToPoint(context, x+width, y);
CGContextAddQuadCurveToPoint(context, x+width, y, x+width+distance, y+distance);
CGContextAddLineToPoint(context, x+width+distance, y+distance+height);
CGContextAddQuadCurveToPoint(context, x+width+distance, y+distance+height, x+width, y+distance+height+distance);
CGContextAddLineToPoint(context, x, y+distance+height+distance);
CGContextAddQuadCurveToPoint(context, x, y+distance+height+distance, x-distance, y+distance+height);
CGContextAddLineToPoint(context, x-distance, y+distance);
CGContextAddQuadCurveToPoint(context, x-distance, y+distance, x, y);
CGContextDrawPath(context, kCGPathFillStroke);
//Draw curvely arrow from bubble to button (but without arrow mark)
CGContextBeginPath(context);
CGContextSetLineWidth(context, 5.0);
CGContextSetStrokeColorWithColor(context, [[UIColor whiteColor] CGColor]);
CGPoint startPoint = CGPointMake(x+(width/2.0), y+distance+distance+height);
CGPoint endPoint = CGPointMake(toX, toY);
CGContextMoveToPoint(context, startPoint.x, startPoint.y+5.0);
if ([direction isEqualToString:@"left"])
{
CGContextAddCurveToPoint(context, startPoint.x, startPoint.y+5.0, endPoint.x, endPoint.y, toX-10, toY);
}
else
{
CGContextAddCurveToPoint(context, startPoint.x, startPoint.y+5.0, endPoint.x, endPoint.y, toX+10, toY);
}
CGContextStrokePath(context);
//Draw the arrow mark
CGContextBeginPath(context);
CGContextSetLineWidth(context, 5.0);
CGContextSetStrokeColorWithColor(context, [[UIColor whiteColor] CGColor]);
if ([direction isEqualToString:@"left"])
{
CGContextMoveToPoint(context, toX-10.0, toY-arrowLength);
CGContextAddLineToPoint(context, toX-10.0, toY);
CGContextAddLineToPoint(context, toX-10.0+arrowLength, toY);
}
else
{
CGContextMoveToPoint(context, toX+10.0, toY-arrowLength);
CGContextAddLineToPoint(context, toX+10.0, toY);
CGContextAddLineToPoint(context, toX+10.0-arrowLength, toY);
}
CGContextStrokePath(context);
.......
.......
}
drawRect:
このメソッドは、次のようなメソッドから呼び出すことができます。
[self createRect:rect xPoint:30.0 yPoint:250.0 ofHeight:100.0 ofWidth:100.0 toPointX:48.0 toPointY:430.0 withString:@"xxxxxxx" inDirection:@"left"];
[self createRect:rect xPoint:160.0 yPoint:100.0 ofHeight:100.0 ofWidth:100.0 toPointX:260.0 toPointY:420.0 withString:@"yyyyyyy" inDirection:@"right"];
そして、最終的な画像は次のようになります。
この矢印タイプは手書き効果があるため、三角形の矢印はスキップしました。
貴重な回答を寄せてくれた@djromeroとIlkerBaltaciに感謝します。
私の次の混乱はテキストの描画についてです!!!!! :P