滑らかな曲線の描画-必要な方法
移動中にiOS描画アプリで一連のポイントをどのように滑らかにしますか？ UIBezierpathsを試しましたが、1、2、3、4、2、3、4、5のポイントをシフトするだけで、それらが交差するギザギザの端だけが得られます。私はスプライン曲線と他のすべてのタイプについて聞いたことがあります。私はiPhoneプログラミングは初めてで、私のクォーツ描画アプリでそれをプログラムする方法を理解していません。堅実な例は大いにありがたいです。私は何週間も円を描いて走りましたが、このタスクのiOSコードを見つけることはできません。ほとんどの投稿は、Javaシミュレーションまたはウィキペディアのカーブフィッティングに関するページにリンクしていますが、私にとっては何の役にも立ちません。また、openGL ESに切り替えたくありません。この循環する質問に答えるために。
これは、交差点にエッジを残したUIBezierPathの私のコードでした///
以下の回答に更新されました
#define VALUE(_INDEX_) [NSValue valueWithCGPoint:points[_INDEX_]]
#define POINT(_INDEX_) [(NSValue *)[points objectAtIndex:_INDEX_] CGPointValue]
- (UIBezierPath*)smoothedPathWithGranularity:(NSInteger)granularity
{
NSMutableArray *points = [(NSMutableArray*)[self pointsOrdered] mutableCopy];
if (points.count < 4) return [self bezierPath];
// Add control points to make the math make sense
[points insertObject:[points objectAtIndex:0] atIndex:0];
[points addObject:[points lastObject]];
UIBezierPath *smoothedPath = [self bezierPath];
[smoothedPath removeAllPoints];
[smoothedPath moveToPoint:POINT(0)];
for (NSUInteger index = 1; index < points.count - 2; index++)
{
CGPoint p0 = POINT(index - 1);
CGPoint p1 = POINT(index);
CGPoint p2 = POINT(index + 1);
CGPoint p3 = POINT(index + 2);
// now add n points starting at p1 + dx/dy up until p2 using Catmull-Rom splines
for (int i = 1; i < granularity; i++)
{
float t = (float) i * (1.0f / (float) granularity);
float tt = t * t;
float ttt = tt * t;
CGPoint pi; // intermediate point
pi.x = 0.5 * (2*p1.x+(p2.x-p0.x)*t + (2*p0.x-5*p1.x+4*p2.x-p3.x)*tt + (3*p1.x-p0.x-3*p2.x+p3.x)*ttt);
pi.y = 0.5 * (2*p1.y+(p2.y-p0.y)*t + (2*p0.y-5*p1.y+4*p2.y-p3.y)*tt + (3*p1.y-p0.y-3*p2.y+p3.y)*ttt);
[smoothedPath addLineToPoint:pi];
}
// Now add p2
[smoothedPath addLineToPoint:p2];
}
// finish by adding the last point
[smoothedPath addLineToPoint:POINT(points.count - 1)];
return smoothedPath;
}
- (PVPoint *)pointAppendingCGPoint:(CGPoint)CGPoint
{
PVPoint *newPoint = [[PVPoint alloc] initInsertingIntoManagedObjectContext:[self managedObjectContext]];
[newPoint setCGPoint:CGPoint];
[newPoint setOrder:[NSNumber numberWithUnsignedInteger:[[self points] count]]];
[[self mutableSetValueForKey:@"points"] addObject:newPoint];
[(NSMutableArray *)[self pointsOrdered] addObject:newPoint];
[[self bezierPath] addLineToPoint:CGPoint];
return [newPoint autorelease];
if ([self bezierPath] && [pointsOrdered count] > 3)
{
PVPoint *control1 = [pointsOrdered objectAtIndex:[pointsOrdered count] - 2];
PVPoint *control2 = [pointsOrdered objectAtIndex:[pointsOrdered count] - 1];
[bezierPath moveToPoint:[[pointsOrdered objectAtIndex:[pointsOrdered count] - 3] CGPoint]];
[[self bezierPath] addCurveToPoint:CGPoint controlPoint1:[control1 CGPoint] controlPoint2:[control2 CGPoint]];
}
}
- (BOOL)isComplete { return [[self points] count] > 1; }
- (UIBezierPath *)bezierPath
{
if (!bezierPath)
{
bezierPath = [UIBezierPath bezierPath];
for (NSUInteger p = 0; p < [[self points] count]; p++)
{
if (!p) [bezierPath moveToPoint:[(PVPoint *)[[self pointsOrdered] objectAtIndex:p] CGPoint]];
else [bezierPath addLineToPoint:[(PVPoint *)[[self pointsOrdered] objectAtIndex:p] CGPoint]];
}
[bezierPath retain];
}
return bezierPath;
}
- (CGPathRef)CGPath
{
return [[self bezierPath] CGPath];
}
私が取り組んでいるプロジェクトに似たようなものを実装したところです。私の解決策は、ベジェスプラインを使用する代わりにCatmull-Romスプラインを使用することでした。これらは、ベジェスプラインの「周囲」ポイントではなく、ポイントを設定することにより、非常に滑らかな曲線を提供します。
// Based on code from Erica Sadun
#import "UIBezierPath+Smoothing.h"
void getPointsFromBezier(void *info, const CGPathElement *element);
NSArray *pointsFromBezierPath(UIBezierPath *bpath);
#define VALUE(_INDEX_) [NSValue valueWithCGPoint:points[_INDEX_]]
#define POINT(_INDEX_) [(NSValue *)[points objectAtIndex:_INDEX_] CGPointValue]
@implementation UIBezierPath (Smoothing)
// Get points from Bezier Curve
void getPointsFromBezier(void *info, const CGPathElement *element)
{
NSMutableArray *bezierPoints = (__bridge NSMutableArray *)info;
// Retrieve the path element type and its points
CGPathElementType type = element->type;
CGPoint *points = element->points;
// Add the points if they're available (per type)
if (type != kCGPathElementCloseSubpath)
{
[bezierPoints addObject:VALUE(0)];
if ((type != kCGPathElementAddLineToPoint) &&
(type != kCGPathElementMoveToPoint))
[bezierPoints addObject:VALUE(1)];
}
if (type == kCGPathElementAddCurveToPoint)
[bezierPoints addObject:VALUE(2)];
}
NSArray *pointsFromBezierPath(UIBezierPath *bpath)
{
NSMutableArray *points = [NSMutableArray array];
CGPathApply(bpath.CGPath, (__bridge void *)points, getPointsFromBezier);
return points;
}
- (UIBezierPath*)smoothedPathWithGranularity:(NSInteger)granularity;
{
NSMutableArray *points = [pointsFromBezierPath(self) mutableCopy];
if (points.count < 4) return [self copy];
// Add control points to make the math make sense
[points insertObject:[points objectAtIndex:0] atIndex:0];
[points addObject:[points lastObject]];
UIBezierPath *smoothedPath = [self copy];
[smoothedPath removeAllPoints];
[smoothedPath moveToPoint:POINT(0)];
for (NSUInteger index = 1; index < points.count - 2; index++)
{
CGPoint p0 = POINT(index - 1);
CGPoint p1 = POINT(index);
CGPoint p2 = POINT(index + 1);
CGPoint p3 = POINT(index + 2);
// now add n points starting at p1 + dx/dy up until p2 using Catmull-Rom splines
for (int i = 1; i < granularity; i++)
{
float t = (float) i * (1.0f / (float) granularity);
float tt = t * t;
float ttt = tt * t;
CGPoint pi; // intermediate point
pi.x = 0.5 * (2*p1.x+(p2.x-p0.x)*t + (2*p0.x-5*p1.x+4*p2.x-p3.x)*tt + (3*p1.x-p0.x-3*p2.x+p3.x)*ttt);
pi.y = 0.5 * (2*p1.y+(p2.y-p0.y)*t + (2*p0.y-5*p1.y+4*p2.y-p3.y)*tt + (3*p1.y-p0.y-3*p2.y+p3.y)*ttt);
[smoothedPath addLineToPoint:pi];
}
// Now add p2
[smoothedPath addLineToPoint:p2];
}
// finish by adding the last point
[smoothedPath addLineToPoint:POINT(points.count - 1)];
return smoothedPath;
}
@end
オリジナルのCatmull-Rom実装は、彼女の本の1つにあるErica Sadunのコードに基づいていますが、完全に滑らかな曲線ができるように少し変更しました。これはUIBezierPathのカテゴリとして実装されており、非常にうまく機能しました。
@Rakeshは絶対に正しいです-曲線だけが必要な場合は、Catmull-Romアルゴリズムを使用する必要はありません。そして彼が提案したリンクはまさにそれをしている。そこで、ここに 彼の答え を追加します。
以下のコードは[〜＃〜] not [〜＃〜]Catmull-Romアルゴリズムと粒度を使用しますが、4曲線の線（コントロールポイントはあなたのために計算されます）。これは基本的に、Rakeshによって提案された iosフリーハンド描画チュートリアル で行われますが、スタンドアロンメソッドではどこにでも（またはUIBezierPathカテゴリで）ドロップでき、四角曲線のスプラインを箱から取り出すことができます。
CGPointの配列をNSValueでラップする必要があります
+ (UIBezierPath *)quadCurvedPathWithPoints:(NSArray *)points
{
UIBezierPath *path = [UIBezierPath bezierPath];
NSValue *value = points[0];
CGPoint p1 = [value CGPointValue];
[path moveToPoint:p1];
if (points.count == 2) {
value = points[1];
CGPoint p2 = [value CGPointValue];
[path addLineToPoint:p2];
return path;
}
for (NSUInteger i = 1; i < points.count; i++) {
value = points[i];
CGPoint p2 = [value CGPointValue];
CGPoint midPoint = midPointForPoints(p1, p2);
[path addQuadCurveToPoint:midPoint controlPoint:controlPointForPoints(midPoint, p1)];
[path addQuadCurveToPoint:p2 controlPoint:controlPointForPoints(midPoint, p2)];
p1 = p2;
}
return path;
}
static CGPoint midPointForPoints(CGPoint p1, CGPoint p2) {
return CGPointMake((p1.x + p2.x) / 2, (p1.y + p2.y) / 2);
}
static CGPoint controlPointForPoints(CGPoint p1, CGPoint p2) {
CGPoint controlPoint = midPointForPoints(p1, p2);
CGFloat diffY = abs(p2.y - controlPoint.y);
if (p1.y < p2.y)
controlPoint.y += diffY;
else if (p1.y > p2.y)
controlPoint.y -= diffY;
return controlPoint;
}
結果は次のとおりです。 
2つのベジェ曲線をスムーズに結合するための鍵は、関連する制御点と曲線の開始/終了点が同一直線上にある必要があることです。コントロールポイントとエンドポイントは、エンドポイントで曲線に接する線を形成すると考えてください。 1つの曲線が別の曲線の終点と同じ点から始まり、両方の曲線がその点で同じ接線を持っている場合、曲線は滑らかになります。以下に、少し説明するコードを示します。
_- (void)drawRect:(CGRect)rect
{
#define commonY 117
CGPoint point1 = CGPointMake(20, 20);
CGPoint point2 = CGPointMake(100, commonY);
CGPoint point3 = CGPointMake(200, 50);
CGPoint controlPoint1 = CGPointMake(50, 60);
CGPoint controlPoint2 = CGPointMake(20, commonY);
CGPoint controlPoint3 = CGPointMake(200, commonY);
CGPoint controlPoint4 = CGPointMake(250, 75);
UIBezierPath *path1 = [UIBezierPath bezierPath];
UIBezierPath *path2 = [UIBezierPath bezierPath];
[path1 setLineWidth:3.0];
[path1 moveToPoint:point1];
[path1 addCurveToPoint:point2 controlPoint1:controlPoint1 controlPoint2:controlPoint2];
[[UIColor blueColor] set];
[path1 stroke];
[path2 setLineWidth:3.0];
[path2 moveToPoint:point2];
[path2 addCurveToPoint:point3 controlPoint1:controlPoint3 controlPoint2:controlPoint4];
[[UIColor orangeColor] set];
[path2 stroke];
}
__path1_は_point2_で終了し、_path2_は_point2_で開始し、制御ポイント2と3は同じY値commonYを_point2_。コード内の任意の値を自由に変更できます。これらの3つのポイントがすべて同じ線上にある限り、2つのパスはスムーズに結合します。 （上記のコードでは、線は_y = commonY_です。線はX軸に平行である必要はありません。ポイントがそのように共線であることが簡単にわかります。）
上記のコードが描く画像は次のとおりです。
コードを見て、曲線がギザギザになっている理由は、制御点を曲線上の点と考えているためです。ベジェ曲線では、通常、制御点は曲線上にありません。曲線から制御点を取得しているため、制御点と交差点はnot共線であるため、パスはスムーズに結合しません。
ここでいくつかの良い答えがありますが、私はそれらが道を外れていると思います（user1244109の答えは水平接線のみをサポートし、一般的な曲線には有用ではありません）、または過度に複雑です（申し訳ありませんがCatmull-Romファン）。
Quadベジェ曲線を使用して、これをはるかに簡単な方法で実装しました。これらには、開始点、終了点、および制御点が必要です。行うべき自然なことは、タッチポイントを開始および終了ポイントとして使用するためにになる可能性があります。 これをしないでください！使用する適切なコントロールポイントがありません。代わりに、このアイデアを試してください。コントロールポイントとしてタッチポイントを使用し、midpointsを開始/終了ポイントとして使用します。この方法で適切な接線を持つことが保証され、コードは単純です。アルゴリズムは次のとおりです。
- 「タッチダウン」ポイントはパスの開始点であり、
locationにprevPointを格納します。 - ドラッグされた場所ごとに、
midPointとcurrentPoint。の間のポイントであるprevPointを計算します- これが最初のドラッグ位置の場合、
currentPointを線セグメントとして追加します。 - 将来のすべてのポイントについて、
midPointでterminatesであるクワッド曲線を追加し、prevPointを次のように使用します。 コントロールポイント。これにより、前のポイントから現在のポイントまで緩やかにカーブするセグメントが作成されます。
- これが最初のドラッグ位置の場合、
currentPointをprevPointに保存し、ドラッグが終了するまで＃2を繰り返します。- 最後のポイントを別の直線セグメントとして追加して、パスを完成させます。
MidPointsを使用すると、曲線が端点で滑らかな接線になることが保証されるため、これにより非常に見栄えの良い曲線が得られます（添付の写真を参照）。
Swiftコードは次のようになります。
var bezierPath = UIBezierPath()
var prevPoint: CGPoint?
var isFirst = true
override func touchesBegan(touchesSet: Set<UITouch>, withEvent event: UIEvent?) {
let location = touchesSet.first!.locationInView(self)
bezierPath.removeAllPoints()
bezierPath.moveToPoint(location)
prevPoint = location
}
override func touchesMoved(touchesSet: Set<UITouch>, withEvent event: UIEvent?) {
let location = touchesSet.first!.locationInView(self)
if let prevPoint = prevPoint {
let midPoint = CGPoint(
x: (location.x + prevPoint.x) / 2,
y: (location.y + prevPoint.y) / 2,
)
if isFirst {
bezierPath.addLineToPoint(midPoint)
else {
bezierPath.addQuadCurveToPoint(midPoint, controlPoint: prevPoint)
}
isFirst = false
}
prevPoint = location
}
override func touchesEnded(touchesSet: Set<UITouch>, withEvent event: UIEvent?) {
let location = touchesSet.first!.locationInView(self)
bezierPath.addLineToPoint(location)
}
または、ポイントの配列があり、UIBezierPathをワンショットで構築したい場合：
var points: [CGPoint] = [...]
var bezierPath = UIBezierPath()
var prevPoint: CGPoint?
var isFirst = true
// obv, there are lots of ways of doing this. let's
// please refrain from yak shaving in the comments
for point in points {
if let prevPoint = prevPoint {
let midPoint = CGPoint(
x: (point.x + prevPoint.x) / 2,
y: (point.y + prevPoint.y) / 2,
)
if isFirst {
bezierPath.addLineToPoint(midPoint)
}
else {
bezierPath.addQuadCurveToPoint(midPoint, controlPoint: prevPoint)
}
isFirst = false
}
else {
bezierPath.moveToPoint(point)
}
prevPoint = point
}
if let prevPoint = prevPoint {
bezierPath.addLineToPoint(prevPoint)
}
私のメモは次のとおりです。
キャプチャしたポイントにアルゴリズムを適用する前に、何かを観察する必要があります。
- 一般に、UIKitはポイントを等距離で与えません。
- 2つのCGPointsの間の中間点を計算する必要があります[これはTouch moveメソッドでキャプチャしました]
滑らかなラインを得るために、多くの方法があります。
場合によっては、2次多項式、3次多項式、またはcatmullRomSplineアルゴリズムを適用することで達成できます。
- (float)findDistance:(CGPoint)point lineA:(CGPoint)lineA lineB:(CGPoint)lineB
{
CGPoint v1 = CGPointMake(lineB.x - lineA.x, lineB.y - lineA.y);
CGPoint v2 = CGPointMake(point.x - lineA.x, point.y - lineA.y);
float lenV1 = sqrt(v1.x * v1.x + v1.y * v1.y);
float lenV2 = sqrt(v2.x * v2.x + v2.y * v2.y);
float angle = acos((v1.x * v2.x + v1.y * v2.y) / (lenV1 * lenV2));
return sin(angle) * lenV2;
}
- (NSArray *)douglasPeucker:(NSArray *)points epsilon:(float)epsilon
{
int count = [points count];
if(count < 3) {
return points;
}
//Find the point with the maximum distance
float dmax = 0;
int index = 0;
for(int i = 1; i < count - 1; i++) {
CGPoint point = [[points objectAtIndex:i] CGPointValue];
CGPoint lineA = [[points objectAtIndex:0] CGPointValue];
CGPoint lineB = [[points objectAtIndex:count - 1] CGPointValue];
float d = [self findDistance:point lineA:lineA lineB:lineB];
if(d > dmax) {
index = i;
dmax = d;
}
}
//If max distance is greater than epsilon, recursively simplify
NSArray *resultList;
if(dmax > epsilon) {
NSArray *recResults1 = [self douglasPeucker:[points subarrayWithRange:NSMakeRange(0, index + 1)] epsilon:epsilon];
NSArray *recResults2 = [self douglasPeucker:[points subarrayWithRange:NSMakeRange(index, count - index)] epsilon:epsilon];
NSMutableArray *tmpList = [NSMutableArray arrayWithArray:recResults1];
[tmpList removeLastObject];
[tmpList addObjectsFromArray:recResults2];
resultList = tmpList;
} else {
resultList = [NSArray arrayWithObjects:[points objectAtIndex:0], [points objectAtIndex:count - 1],nil];
}
return resultList;
}
- (NSArray *)catmullRomSplineAlgorithmOnPoints:(NSArray *)points segments:(int)segments
{
int count = [points count];
if(count < 4) {
return points;
}
float b[segments][4];
{
// precompute interpolation parameters
float t = 0.0f;
float dt = 1.0f/(float)segments;
for (int i = 0; i < segments; i++, t+=dt) {
float tt = t*t;
float ttt = tt * t;
b[i][0] = 0.5f * (-ttt + 2.0f*tt - t);
b[i][1] = 0.5f * (3.0f*ttt -5.0f*tt +2.0f);
b[i][2] = 0.5f * (-3.0f*ttt + 4.0f*tt + t);
b[i][3] = 0.5f * (ttt - tt);
}
}
NSMutableArray *resultArray = [NSMutableArray array];
{
int i = 0; // first control point
[resultArray addObject:[points objectAtIndex:0]];
for (int j = 1; j < segments; j++) {
CGPoint pointI = [[points objectAtIndex:i] CGPointValue];
CGPoint pointIp1 = [[points objectAtIndex:(i + 1)] CGPointValue];
CGPoint pointIp2 = [[points objectAtIndex:(i + 2)] CGPointValue];
float px = (b[j][0]+b[j][1])*pointI.x + b[j][2]*pointIp1.x + b[j][3]*pointIp2.x;
float py = (b[j][0]+b[j][1])*pointI.y + b[j][2]*pointIp1.y + b[j][3]*pointIp2.y;
[resultArray addObject:[NSValue valueWithCGPoint:CGPointMake(px, py)]];
}
}
for (int i = 1; i < count-2; i++) {
// the first interpolated point is always the original control point
[resultArray addObject:[points objectAtIndex:i]];
for (int j = 1; j < segments; j++) {
CGPoint pointIm1 = [[points objectAtIndex:(i - 1)] CGPointValue];
CGPoint pointI = [[points objectAtIndex:i] CGPointValue];
CGPoint pointIp1 = [[points objectAtIndex:(i + 1)] CGPointValue];
CGPoint pointIp2 = [[points objectAtIndex:(i + 2)] CGPointValue];
float px = b[j][0]*pointIm1.x + b[j][1]*pointI.x + b[j][2]*pointIp1.x + b[j][3]*pointIp2.x;
float py = b[j][0]*pointIm1.y + b[j][1]*pointI.y + b[j][2]*pointIp1.y + b[j][3]*pointIp2.y;
[resultArray addObject:[NSValue valueWithCGPoint:CGPointMake(px, py)]];
}
}
{
int i = count-2; // second to last control point
[resultArray addObject:[points objectAtIndex:i]];
for (int j = 1; j < segments; j++) {
CGPoint pointIm1 = [[points objectAtIndex:(i - 1)] CGPointValue];
CGPoint pointI = [[points objectAtIndex:i] CGPointValue];
CGPoint pointIp1 = [[points objectAtIndex:(i + 1)] CGPointValue];
float px = b[j][0]*pointIm1.x + b[j][1]*pointI.x + (b[j][2]+b[j][3])*pointIp1.x;
float py = b[j][0]*pointIm1.y + b[j][1]*pointI.y + (b[j][2]+b[j][3])*pointIp1.y;
[resultArray addObject:[NSValue valueWithCGPoint:CGPointMake(px, py)]];
}
}
// the very last interpolated point is the last control point
[resultArray addObject:[points objectAtIndex:(count - 1)]];
return resultArray;
}
これを実現するには、この方法を使用する必要があります。 BezierSpline コードはC＃であり、ベジェスプラインの制御点の配列を生成します。このコードをObjective Cに変換しましたが、うまく機能します。
コードをC＃からObjective Cに変換するには、C＃コードを1行ずつ理解します。C＃を知らなくても、C++/Javaを知っている必要がありますか？
変換中：
ここで使用するPoint構造体をCGPointに置き換えます。
Point配列をNSMutableArrayに置き換え、CGPointをラップするNSvaluesを格納します。
すべての二重配列をNSMutableArraysに置き換え、NSNumber wrapping doubleを格納します。
配列要素にアクセスするための添え字の場合は、objectAtIndex：メソッドを使用します。
replaceObjectAtIndex：withObject：を使用して、特定のインデックスにオブジェクトを保存します。
NSMutableArrayはlinkedListであり、C＃が使用するのは動的配列であるため、既存のインデックスが既に存在することに注意してください。あなたの場合、NSMutableArrayが空の場合、C＃コードのようにオブジェクトをランダムなインデックスで保存することはできません。このC＃コードでは、インデックス0の前にインデックス1を挿入する場合があり、インデックス1が存在する場合はそうすることができます。ここのNSMutabelArraysでは、replaceObjectを呼び出したい場合、インデックス1が必要です。そのため、何かを保存する前に、NSMutableArrayにn個のNSNullオブジェクトを追加するメソッドを作成します。
また：
このロジックには、ポイントの配列を受け入れ、2つの配列を提供する静的メソッドがあります。
最初の制御点の配列。
2番目の制御点の配列。
これらの配列は、最初の配列で渡す2点間の各曲線の最初と2番目の制御点を保持します。
私の場合、すでにすべてのポイントがあり、それらを通して曲線を描くことができました。
描画中の場合、滑らかな曲線を通過させる一連のポイントをどのように供給するかが必要になります。
setNeedsDisplayを呼び出して更新し、最初の配列の2つの隣接するポイント間にUIBezierPath以外のスプラインを描画します。インデックス単位で両方のコントロールポイント配列からコントロールポイントを取得します。
あなたの場合の問題は、すべての重要なポイントをとることを動かしながら理解するのが難しいということです。
できることは、単に指を動かしながら、前のポイントと現在のポイントの間に直線を描き続けることです。線は非常に小さいので、肉眼では見えないので、拡大しない限り、小さな小さな直線になります。
[〜＃〜] update [〜＃〜]
上記のリンクのObjective C実装に興味がある人は誰でも参照できます。
this GitHubリポジトリ。
いつか書き直しましたが、ARCをサポートしていませんが、簡単に編集したり、リリース呼び出しや自動解放呼び出しをいくつか削除して、ARCで動作させることができます。
これは、ベジェスプラインを使用して結合したいポイントのセットに対して、コントロールポイントの2つの配列を生成するだけです。
これだけのコードを書く必要はありません。
iosフリーハンド描画チュートリアル ;を参照してください。描画を本当にスムーズにします。また、連続して描画を続けてもパフォーマンスが低下しないようにキャッシュメカニズムがあります。
私は かなり素敵なチュートリアル を見つけました。これは、ベジエ曲線の描画をわずかに修正して、エッジをきれいに滑らかにする傾向があることを示しています。本質的には、制御ポイントと同じ線上に結合エンドポイントを配置することについて、カレブが上記で言及していることです。これは、私がしばらく読んだ中で最高のチュートリアル（何でも）の1つです。また、完全に機能するXcodeプロジェクトが付属しています。
迅速：
let point1 = CGPoint(x: 50, y: 100)
let point2 = CGPoint(x: 50 + 1 * CGFloat(60) * UIScreen.main.bounds.width / 375, y: 200)
let point3 = CGPoint(x: 50 + 2 * CGFloat(60) * UIScreen.main.bounds.width / 375, y: 250)
let point4 = CGPoint(x: 50 + 3 * CGFloat(60) * UIScreen.main.bounds.width / 375, y: 50)
let point5 = CGPoint(x: 50 + 4 * CGFloat(60) * UIScreen.main.bounds.width / 375, y: 100)
let points = [point1, point2, point3, point4, point5]
let bezier = UIBezierPath()
let count = points.count
var prevDx = CGFloat(0)
var prevDy = CGFloat(0)
var prevX = CGFloat(0)
var prevY = CGFloat(0)
let div = CGFloat(7)
for i in 0..<count {
let x = points[i].x
let y = points[i].y
var dx = CGFloat(0)
var dy = CGFloat(0)
if (i == 0) {
bezier.move(to: points[0])
let nextX = points[i + 1].x
let nextY = points[i + 1].y
prevDx = (nextX - x) / div
prevDy = (nextY - y) / div
prevX = x
prevY = y
} else if (i == count - 1) {
dx = (x - prevX) / div
dy = (y - prevY) / div
} else {
let nextX = points[i + 1].x
let nextY = points[i + 1].y
dx = (nextX - prevX) / div;
dy = (nextY - prevY) / div;
}
bezier.addCurve(to: CGPoint(x: x, y: y), controlPoint1: CGPoint(x: prevX + prevDx, y: prevY + prevDy), controlPoint2: CGPoint(x: x - dx, y: y - dy))
prevDx = dx;
prevDy = dy;
prevX = x;
prevY = y;
}
上記のすべてを試しましたが、機能しません。答えの一つは、私にとっても壊れた結果をもたらします。さらに検索すると、これが見つかりました： https://github.com/sam-keene/uiBezierPath-hermite-curve 。私はこのコードを書きませんでしたが、私はそれを実装しました、そしてそれは本当に本当にうまく動きます。 UIBezierPath + Interpolation.m/hおよびCGPointExtension.m/hをコピーするだけです。次に、次のように使用します。
UIBezierPath *path = [UIBezierPath interpolateCGPointsWithHermite:arrayPoints closed:YES];
全体として本当に堅牢できちんとしたソリューションです。
Swift 4/5のコードは次のとおりです。
func quadCurvedPathWithPoint(points: [CGPoint] ) -> UIBezierPath {
let path = UIBezierPath()
if points.count > 1 {
var prevPoint:CGPoint?
for (index, point) in points.enumerated() {
if index == 0 {
path.move(to: point)
} else {
if index == 1 {
path.addLine(to: point)
}
if prevPoint != nil {
let midPoint = self.midPointForPoints(from: prevPoint!, to: point)
path.addQuadCurve(to: midPoint, controlPoint: controlPointForPoints(from: midPoint, to: prevPoint!))
path.addQuadCurve(to: point, controlPoint: controlPointForPoints(from: midPoint, to: point))
}
}
prevPoint = point
}
}
return path
}
func midPointForPoints(from p1:CGPoint, to p2: CGPoint) -> CGPoint {
return CGPoint(x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2)
}
func controlPointForPoints(from p1:CGPoint,to p2:CGPoint) -> CGPoint {
var controlPoint = midPointForPoints(from:p1, to: p2)
let diffY = abs(p2.y - controlPoint.y)
if p1.y < p2.y {
controlPoint.y = controlPoint.y + diffY
} else if ( p1.y > p2.y ) {
controlPoint.y = controlPoint.y - diffY
}
return controlPoint
}