2012-10-06 11 views
6

ボーダーカラー、ボーダーの幅と塗りつぶしの色の両方を持つ線を描画するにはどうすればよいですか?あなたがnilや透明以外に層のfillColorプロパティを設定した場合ボーダーと塗りの色と丸めを持つCAShapeLayer

self.lineShape.strokeColor = [UIColor blueColor].CGColor; 
self.lineShape.fillColor = [UIColor greenColor].CGColor; 
self.lineShape.lineWidth = 100; 
self.lineShape.lineCap = kCALineCapRound; 
self.lineShape.lineJoin = kCALineJoinRound; 
UIBezierPath* path = [UIBezierPath bezierPath]; 
[path moveToPoint:self.lineStart]; 
[path addLineToPoint:self.lineEnd]; 
self.lineShape.path = path.CGPath; 

答えて

7
self.lineShapeBorder = [[CAShapeLayer alloc] init]; 
    self.lineShapeBorder.zPosition = 0.0f; 
    self.lineShapeBorder.strokeColor = [UIColor blueColor].CGColor; 
    self.lineShapeBorder.lineWidth = 25; 
    self.lineShapeBorder.lineCap = kCALineCapRound; 
    self.lineShapeBorder.lineJoin = kCALineJoinRound; 

    self.lineShapeFill = [[CAShapeLayer alloc] init]; 
    [self.lineShapeBorder addSublayer:self.lineShapeFill]; 
    self.lineShapeFill.zPosition = 0.0f; 
    self.lineShapeFill.strokeColor = [UIColor greenColor].CGColor; 
    self.lineShapeFill.lineWidth = 20.0f; 
    self.lineShapeFill.lineCap = kCALineCapRound; 
    self.lineShapeFill.lineJoin = kCALineJoinRound; 

// ... 

    UIBezierPath* path = [UIBezierPath bezierPath]; 
    [path moveToPoint:self.lineStart]; 
    [path addLineToPoint:self.lineEnd]; 
    self.lineShapeBorder.path = self.lineShapeFill.path = path.CGPath; 
+0

これは私の最終的な解決策でした – jjxtra

7

...

は、ここで私が試したものだが、それだけで今まで青だ、層はそのパスを記入します。

レイヤーのlineWidthを0より大きい数値に設定し、strokeColornilまたは透明以外のレイヤーに設定すると、レイヤーはそのパスをストロークします。

これらのプロパティをすべて設定した場合、レイヤーにはパスがで塗りつぶされます。塗りつぶした後にストロークを描画します。

レイヤのパスは、何かを埋めるために実際にあるエリアを囲む必要があります。あなたの投稿では、次のようなパスを設定します:

UIBezierPath* path = [UIBezierPath bezierPath]; 
[path moveToPoint:self.lineStart]; 
[path addLineToPoint:self.lineEnd]; 
self.lineShape.path = path.CGPath; 

そのパスには1行のセグメントが含まれています。どの領域も囲みませんので、レイヤーには何も塗りつぶされません。

+0

私の現在のコードで私の質問を更新します... – jjxtra

+0

@PsychoDad私は私の答えを更新しました。 –

+0

だから、私のパスをポリゴンにする必要がありますか? – jjxtra

1

スウィフト3では、拡張方法UIViewです。

// Usage: 
self.btnGroup.roundCorner([.topRight, .bottomRight], radius: 4.0, borderColor: UIColor.red, borderWidth: 1.0) 

// Apply round corner and border. An extension method of UIView. 
public func roundCorner(_ corners: UIRectCorner, radius: CGFloat, borderColor: UIColor, borderWidth: CGFloat) { 
    let path = UIBezierPath.init(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius)) 

    let mask = CAShapeLayer() 
    mask.path = path.cgPath 
    self.layer.mask = mask 

    let borderPath = UIBezierPath.init(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius)) 
    let borderLayer = CAShapeLayer() 
    borderLayer.path = borderPath.cgPath 
    borderLayer.lineWidth = borderWidth 
    borderLayer.strokeColor = borderColor.cgColor 
    borderLayer.fillColor = UIColor.clear.cgColor 
    borderLayer.frame = self.bounds 
    self.layer.addSublayer(borderLayer) 
} 
関連する問題