CALayer 的一些视觉错误答案

【问题标题】：Some visual bug with CALayerCALayer 的一些视觉错误
【发布时间】：2017-02-10 02:30:32
【问题描述】：

我有一个具有以下单元格布局的 UITableView：

• 界面视图

•• UIImageView

••• 半透明覆盖 UIView 作为 UIImageView 的子视图

还有模仿“播放”按钮和UILabel的图标视图，但它们似乎与此错误无关。

我有以下代码：

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 中调用它来重新创建设备旋转路径。

如果你看截图，路径附近有一些黑色和旋转的有点黑色的“洞”。它们看起来都一样，而且它们肯定不会出现在 UIImageView 中的图像上。

我认为这与我的 CALayer 有关。如何解决？

【问题讨论】：

每个圆角矩形的内左边缘都有一个黑色楔形。如果放大则可见。顶部、右侧和左下边缘也有楔形。
@robmayoff 很高兴你明白他的意思！

标签： ios uiimageview calayer uibezierpath cashapelayer

【解决方案1】：

你的问题是这些黑色楔子：

根本原因是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

结果：

【讨论】：