16

いくつかの CGRect と Ellipses を使用して複雑な形状を作成しています。パスが作成されたら、そのパスをストロークしたいと思います。パスをストロークすると、各シェイプがストロークされます。ストロークが交差しないように、各シェイプを 1 つのパスにマージする方法はありますか?

ここに画像の説明を入力

int thirds = self.height / 3;

CGPathRef aPath = CGPathCreateMutable();

CGRect rectangle = CGRectMake((58 - 10) / 2, 46, 10, self.height - 58);
CGPathAddRect(aPath, nil, rectangle);

CGPathAddEllipseInRect(aPath, nil, CGRectMake((58 - 48) / 2, 0, 48, 48));
CGPathAddEllipseInRect(aPath, nil, CGRectMake((58 - 48) / 2, thirds, 48, 48));
CGPathAddEllipseInRect(aPath, nil, CGRectMake((58 - 48) / 2, thirds * 2, 48, 48));
CGPathAddEllipseInRect(aPath, nil, CGRectMake(0, self.height - 58, 58, 58));
CGPathCloseSubpath(aPath);
CGPathRef other = CGPathCreateCopy(aPath);

CAShapeLayer *square = [CAShapeLayer layer];
square.fillColor = [UIColor colorWithRed:36/255.0f green:56/255.0f blue:82/255.0f alpha:1.0f].CGColor;
square.strokeColor = [UIColor colorWithRed:50/255.0f green:70/255.0f blue:96/255.0f alpha:1.0f].CGColor;
square.path = other;
[self.layer addSublayer:square];

アップデート

パスを一緒に追加してみましたが、まったく同じ結果が得られました

CGPathAddPath(aPath, nil, CGPathCreateWithRect(rectangle, nil));

CGPathAddPath(aPath, nil, CGPathCreateWithEllipseInRect(CGRectMake((58 - 48) / 2, 0, 48, 48), nil));
CGPathAddPath(aPath, nil, CGPathCreateWithEllipseInRect(CGRectMake((58 - 48) / 2, thirds, 48, 48), nil));
CGPathAddPath(aPath, nil, CGPathCreateWithEllipseInRect(CGRectMake((58 - 48) / 2, thirds * 2, 48, 48), nil));
CGPathAddPath(aPath, nil, CGPathCreateWithEllipseInRect(CGRectMake(0, self.height - 58, 58, 58), nil));
4

2 に答える 2

24

パス構成のアウトラインのみを記述するパスが必要な場合は、関係する形状に対してブール演算を実行する必要があります。
そこにはいくつかの良いチュートリアルがあります。
例: http://losingfight.com/blog/2011/07/07/how-to-implement-boolean-operations-on-bezier-paths-part-1/

アウトラインの視覚的な外観を実現したいだけの場合は、2 つのシェイプ レイヤーを描画できます。

  • CGPathCreateCopyByStrokingPath と
  • あなたの元の道を上に満たすもの

投稿したコードの形状を使用する:

int thirds = self.height / 3;

CGMutablePathRef aPath = CGPathCreateMutable();

CGRect rectangle = CGRectMake((58 - 10) / 2, 46, 10, self.height - 58);
CGPathAddRect(aPath, nil, rectangle);

CGPathAddEllipseInRect(aPath, nil, CGRectMake((58 - 48) / 2, 0, 48, 48));
CGPathAddEllipseInRect(aPath, nil, CGRectMake((58 - 48) / 2, thirds, 48, 48));
CGPathAddEllipseInRect(aPath, nil, CGRectMake((58 - 48) / 2, thirds * 2, 48, 48));
CGPathAddEllipseInRect(aPath, nil, CGRectMake(0, self.height - 58, 58, 58));
CGPathCloseSubpath(aPath);

CGPathRef other = CGPathCreateCopyByStrokingPath(aPath, NULL, 12.0, kCGLineCapRound, kCGLineJoinRound, 1.0);
CAShapeLayer *square = [CAShapeLayer layer];
square.fillColor = [UIColor colorWithRed:36/255.0f green:56/255.0f blue:82/255.0f alpha:1.0f].CGColor;
square.path = other;
[self.view.layer addSublayer:square];

CAShapeLayer *square2 = [CAShapeLayer layer];
square2.fillColor = [UIColor colorWithRed:50/255.0f green:70/255.0f blue:96/255.0f alpha:1.0f].CGColor;
square2.path = aPath;
[self.view.layer addSublayer:square2];

これにより、次の形状が描画されます。
ここに画像の説明を入力

于 2013-07-09T07:05:17.577 に答える