CALayer 的一些视觉错误
Some visual bug with CALayer
我有一个具有以下单元格布局的 UITableView:
• UIView
•• UIImageView
••• 半透明覆盖UIView作为UIImageView的子视图
还有模仿"play"按钮和UILabel的iconview,不过好像和这个bug无关
我有以下代码:
override func layoutSubviews() {
super.layoutSubviews()
createPath()
}
private func createPath() {
let padding = CGFloat(16)
let bottomLineLength = CGFloat(64)
let arcPadding = CGFloat(8)
let width = self.contentView.frame.width
let height = self.contentView.frame.height
if pathLayer != nil {
pathLayer?.removeFromSuperlayer()
}
pathLayer = CAShapeLayer()
let path = UIBezierPath()
path.move(to: CGPoint(x: padding + arcPadding, y: padding))
path.addLine(to: CGPoint(x: width - padding - arcPadding, y: padding))
// Top-Right arc
path.addArc(withCenter: CGPoint(x: width - padding - arcPadding, y: padding + arcPadding),
radius: arcPadding,
startAngle: CGFloat(3 * M_PI / 2),
endAngle: CGFloat(M_PI * 2),
clockwise: true)
path.move(to: CGPoint(x: width - padding, y: padding + arcPadding))
path.addLine(to: CGPoint(x: width - padding, y: height - padding - arcPadding))
// Bottom-Right arc
path.addArc(withCenter: CGPoint(x: width - padding - arcPadding, y: height - padding - arcPadding),
radius: arcPadding,
startAngle: CGFloat(M_PI * 2),
endAngle: CGFloat(M_PI / 2),
clockwise: true)
path.move(to: CGPoint(x: width - padding - arcPadding, y: height - padding))
path.addLine(to: CGPoint(x: width - padding - bottomLineLength, y: height - padding))
path.move(to: CGPoint(x: padding + bottomLineLength, y: height - padding))
path.addLine(to: CGPoint(x: padding + arcPadding, y: height - padding))
// Bottom-Left arc
path.addArc(withCenter: CGPoint(x: padding + arcPadding, y: height - padding - arcPadding),
radius: arcPadding,
startAngle: CGFloat(M_PI / 2),
endAngle: CGFloat(M_PI),
clockwise: true)
path.move(to: CGPoint(x: padding, y: height - padding - arcPadding))
path.addLine(to: CGPoint(x: padding, y: padding + arcPadding))
// Top-Left arc
path.addArc(withCenter: CGPoint(x: padding + arcPadding, y: padding + arcPadding),
radius: arcPadding,
startAngle: CGFloat(M_PI),
endAngle: CGFloat(3 * M_PI / 2),
clockwise: true)
pathLayer?.rasterizationScale = 2 * UIScreen.main.scale
pathLayer?.shouldRasterize = true
pathLayer?.strokeColor = UIColor(red: 0xFF/255, green: 0xFF/255, blue: 0xFF/255, alpha: 0.5).cgColor
pathLayer?.lineWidth = 2.0
pathLayer?.path = path.cgPath
contentView.layer.addSublayer(pathLayer!)
}
我在 layoutSubviews 中调用它以在设备旋转时重新创建路径。
而且如果您看一下屏幕截图,路径附近有一些黑色并且旋转了一点黑色 "holes"。它们看起来都一样,而且它们肯定不会出现在 UIImageView 的图像上。
我觉得和我的CALayer有关。如何解决?
你的问题是这些黑色楔子:
根本原因是 CAShapeLayer
的默认 fillColor
是不透明的黑色。将其设置为 nil 以避免填充:
pathLayer?.fillColor = nil
完成后,让我向您展示构建路径的更短方法:
let cgPath = CGMutablePath()
let start = CGPoint(x: padding + bottomLineLength, y: height - padding)
let blCorner = CGPoint(x: padding, y: height - padding)
let tlCorner = CGPoint(x: padding, y: padding)
let trCorner = CGPoint(x: width - padding, y: padding)
let brCorner = CGPoint(x: width - padding, y: height - padding)
let end = CGPoint(x: width - padding - bottomLineLength, y: height - padding)
cgPath.move(to: start)
cgPath.addArc(tangent1End: blCorner, tangent2End: tlCorner, radius: arcPadding)
cgPath.addArc(tangent1End: tlCorner, tangent2End: trCorner, radius: arcPadding)
cgPath.addArc(tangent1End: trCorner, tangent2End: brCorner, radius: arcPadding)
cgPath.addArc(tangent1End: brCorner, tangent2End: end, radius: arcPadding)
cgPath.addLine(to: end)
shapeLayer.path = cgPath
结果:
我有一个具有以下单元格布局的 UITableView:
• UIView
•• UIImageView
••• 半透明覆盖UIView作为UIImageView的子视图
还有模仿"play"按钮和UILabel的iconview,不过好像和这个bug无关
我有以下代码:
override func layoutSubviews() {
super.layoutSubviews()
createPath()
}
private func createPath() {
let padding = CGFloat(16)
let bottomLineLength = CGFloat(64)
let arcPadding = CGFloat(8)
let width = self.contentView.frame.width
let height = self.contentView.frame.height
if pathLayer != nil {
pathLayer?.removeFromSuperlayer()
}
pathLayer = CAShapeLayer()
let path = UIBezierPath()
path.move(to: CGPoint(x: padding + arcPadding, y: padding))
path.addLine(to: CGPoint(x: width - padding - arcPadding, y: padding))
// Top-Right arc
path.addArc(withCenter: CGPoint(x: width - padding - arcPadding, y: padding + arcPadding),
radius: arcPadding,
startAngle: CGFloat(3 * M_PI / 2),
endAngle: CGFloat(M_PI * 2),
clockwise: true)
path.move(to: CGPoint(x: width - padding, y: padding + arcPadding))
path.addLine(to: CGPoint(x: width - padding, y: height - padding - arcPadding))
// Bottom-Right arc
path.addArc(withCenter: CGPoint(x: width - padding - arcPadding, y: height - padding - arcPadding),
radius: arcPadding,
startAngle: CGFloat(M_PI * 2),
endAngle: CGFloat(M_PI / 2),
clockwise: true)
path.move(to: CGPoint(x: width - padding - arcPadding, y: height - padding))
path.addLine(to: CGPoint(x: width - padding - bottomLineLength, y: height - padding))
path.move(to: CGPoint(x: padding + bottomLineLength, y: height - padding))
path.addLine(to: CGPoint(x: padding + arcPadding, y: height - padding))
// Bottom-Left arc
path.addArc(withCenter: CGPoint(x: padding + arcPadding, y: height - padding - arcPadding),
radius: arcPadding,
startAngle: CGFloat(M_PI / 2),
endAngle: CGFloat(M_PI),
clockwise: true)
path.move(to: CGPoint(x: padding, y: height - padding - arcPadding))
path.addLine(to: CGPoint(x: padding, y: padding + arcPadding))
// Top-Left arc
path.addArc(withCenter: CGPoint(x: padding + arcPadding, y: padding + arcPadding),
radius: arcPadding,
startAngle: CGFloat(M_PI),
endAngle: CGFloat(3 * M_PI / 2),
clockwise: true)
pathLayer?.rasterizationScale = 2 * UIScreen.main.scale
pathLayer?.shouldRasterize = true
pathLayer?.strokeColor = UIColor(red: 0xFF/255, green: 0xFF/255, blue: 0xFF/255, alpha: 0.5).cgColor
pathLayer?.lineWidth = 2.0
pathLayer?.path = path.cgPath
contentView.layer.addSublayer(pathLayer!)
}
我在 layoutSubviews 中调用它以在设备旋转时重新创建路径。
而且如果您看一下屏幕截图,路径附近有一些黑色并且旋转了一点黑色 "holes"。它们看起来都一样,而且它们肯定不会出现在 UIImageView 的图像上。
我觉得和我的CALayer有关。如何解决?
你的问题是这些黑色楔子:
根本原因是 CAShapeLayer
的默认 fillColor
是不透明的黑色。将其设置为 nil 以避免填充:
pathLayer?.fillColor = nil
完成后,让我向您展示构建路径的更短方法:
let cgPath = CGMutablePath()
let start = CGPoint(x: padding + bottomLineLength, y: height - padding)
let blCorner = CGPoint(x: padding, y: height - padding)
let tlCorner = CGPoint(x: padding, y: padding)
let trCorner = CGPoint(x: width - padding, y: padding)
let brCorner = CGPoint(x: width - padding, y: height - padding)
let end = CGPoint(x: width - padding - bottomLineLength, y: height - padding)
cgPath.move(to: start)
cgPath.addArc(tangent1End: blCorner, tangent2End: tlCorner, radius: arcPadding)
cgPath.addArc(tangent1End: tlCorner, tangent2End: trCorner, radius: arcPadding)
cgPath.addArc(tangent1End: trCorner, tangent2End: brCorner, radius: arcPadding)
cgPath.addArc(tangent1End: brCorner, tangent2End: end, radius: arcPadding)
cgPath.addLine(to: end)
shapeLayer.path = cgPath
结果: