2017-09-14 11 views
0

Swiftでは、私は2つの半透明の円を持っています。どちらもCAShapeLayerです。彼らは半透明なので、それらの間の任意の重複はそうのように見えるようになります:CAShapeLayerをCAShapeLayerのマスクとして使用する場合の細い境界

enter image description here

は、その代わりに、私は視覚的に一緒に「マージ」にそれらをしたいです。私が試した解決策は、サークル1のマスクとしてサークル2を使用することで、オーバーラップを切り捨てることです。

このソリューションでは、一般的に取り組んでいるが、私はサークル2の外側に細い線を得る:

enter image description here

私の質問:どのように私は右の円上に薄い、外線を取り除くことができますが?それはなぜそこにあるの?次のように


コードは(Xcode playground can be found here)です:

private let yPosition: CGFloat = 200 
    private let circle1Position: CGFloat = 30 
    private let circle2Position: CGFloat = 150 
    private let circleDiameter: CGFloat = 200 
    private var circleRadius: CGFloat { return self.circleDiameter/2.0 } 

    override func loadView() { 
     let view = UIView() 
     view.backgroundColor = .black 

     self.view = view 

     let circle1Path = UIBezierPath(
      roundedRect: CGRect(
       x: circle1Position, 
       y: yPosition, 
       width: circleDiameter, 
       height: circleDiameter), 
      cornerRadius: self.circleDiameter) 

     let circle2Path = UIBezierPath(
      roundedRect: CGRect(
       x: circle2Position, 
       y: yPosition, 
       width: circleDiameter, 
       height: circleDiameter), 
      cornerRadius: self.circleDiameter) 

     let circle1Layer = CAShapeLayer() 
     circle1Layer.path = circle1Path.cgPath 
     circle1Layer.fillColor = UIColor.white.withAlphaComponent(0.6).cgColor 

     let circle2Layer = CAShapeLayer() 
     circle2Layer.path = circle2Path.cgPath 
     circle2Layer.fillColor = UIColor.white.withAlphaComponent(0.6).cgColor 

     self.view.layer.addSublayer(circle1Layer) 
     self.view.layer.addSublayer(circle2Layer) 

     //Create a mask from the surrounding rectangle of circle1, and 
     //then cut out where it overlaps circle2 
     let maskPath = UIBezierPath(rect: CGRect(x: circle1Position, y: yPosition, width: circleDiameter, height: circleDiameter)) 
     maskPath.append(circle2Path) 
     maskPath.usesEvenOddFillRule = true 
     maskPath.lineWidth = 0 

     let maskLayer = CAShapeLayer() 
     maskLayer.path = maskPath.cgPath 
     maskLayer.fillColor = UIColor.black.cgColor 
     maskLayer.fillRule = kCAFillRuleEvenOdd 

     circle1Layer.mask = maskLayer 
    } 
+0

細い線はほぼ確実にアンチエイリアスです –

+0

私は同じ考えを持っていました - この場合、エイリアシングを制御する方法はありますか? – BlackWolf

+0

これはあなたの質問に直接答えませんが、2つの円を結合しようとするのではなく、2つの円を使って上の図形を描くことができます。 – Sparky

答えて

0

両方CAShapeLayersは、同じアルファ値を持っている場合、あなたはCALayerのは、代わりに親のアルファを設定し、新しい親の内側にそれらを置くことができます。

関連する問題