2017-09-14 166 views
0

在Swift中,我有兩個半透明圓圈,它們都是CAShapeLayer。由於他們是半透明的,它們之間沒有任何重疊,像這樣變得可見:使用CAShapeLayer作爲CAShapeLayer的遮罩時的薄邊框

enter image description here

相反,我希望他們能在視覺上「合併」在一起。我試過的解決方案是使用圓圈2作爲圓圈1的掩碼,因此切掉重疊。

這個解決方案通常工作,但我得到的圈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

這並不直接回答你的問題,但你可以使用兩個弧來繪製上面的形狀,而不是試圖合併兩個圓。 – Sparky

回答

0

如果兩個CAShapeLayers具有相同的阿爾法值,你可以將它們放在一個新的父的CALayer然後設置父的alpha,而不是內部。