【发布时间】:2017-09-14 19:49:25
【问题描述】:
在 Swift 中,我有两个半透明的圆圈,都是CAShapeLayer。由于它们是半透明的,它们之间的任何重叠都会像这样可见:
相反,我希望它们在视觉上“合并”在一起。我尝试过的解决方案是使用圆 2 作为圆 1 的蒙版,从而消除重叠。
此解决方案通常有效,但我在圈 2 的外侧得到一条细线:
我的问题:我怎样才能摆脱右边圆圈上的细外线?为什么它还在那里?
代码如下(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
}
【问题讨论】:
-
细线几乎可以肯定是抗锯齿
-
我也有同样的想法——在这种情况下有什么方法可以控制混叠?
-
这并不能直接回答您的问题,但您可以使用两条弧线绘制上面的形状,而不是尝试合并两个圆。
-
不这么认为。您正在尝试绘制部分像素。我在这里唯一真正的想法是计算圆的交点并使用蒙版在该点垂直切割两个圆,这样你就有两个相邻的部分圆,而不是一个完整的圆和一个部分遮挡的圆。但即使这样也只有在垂直切割位于像素边界上时才能正常工作,否则您可能仍然会有抗锯齿伪影。
-
一个万无一失的方法是检测圆圈重叠并切换到使用单个形状图层,该图层绘制描述合并圆圈的单个路径。
标签: ios swift core-animation calayer cashapelayer