CAShapeLayer 图像未出现

Question

我有一个 image.cgImage，我将其设置为 contents 到 CAShapeLayer()，但它没有出现。我强行打开图像，这样我就知道它确实存在。出现圆形但里面的图像没有。

let shapeLayer = CAShapeLayer()
var didSubviewsLayout = false

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    if !didSubviewsLayout {
        didSubviewsLayout = true

        setupShapeLayer()
    }
}

func setupShapeLayer() {
    
    shapeLayer.path = UIBezierPath(roundedRect: CGRect(x: 200, y: 200, width: 50, height: 50), cornerRadius: 25).cgPath
    
    shapeLayer.strokeColor = nil
    
    shapeLayer.fillColor = UIColor.orange.cgColor
    
    shapeLayer.contents = UIImage(named: "myIcon")!.cgImage // this doesn't crash so the image definitely exists
    
    view.layer.addSublayer(shapeLayer)
}

Answer 1

您可以在单独的图层中创建圆形路径，并将其作为蒙版添加到包含图像的图层中。首先，我会向父图层添加一个框架，以便图像可以使用 contentsGravity.

在图层中居中

shapeLayer.frame = CGRect(x: 200, y: 200, width: 50, height: 50)

shapeLayer.contents = UIImage(named: "myIcon")!.cgImage
        
// Center the image within the layer
shapeLayer.contentsGravity = .center
        
// We can set the orange color here
shapeLayer.backgroundColor = UIColor.orange.cgColor

然后，创建具有圆形路径的图层并将其设置为图像图层的蒙版：

let maskLayer = CAShapeLayer()
        
maskLayer.path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 50, height: 50), cornerRadius: 25).cgPath
        
shapeLayer.mask = maskLayer

您修改后的代码：

func setupShapeLayer() {
    shapeLayer.frame = CGRect(x: 200, y: 200, width: 50, height: 50)

    shapeLayer.contents = UIImage(named: "myIcon")!.cgImage
        
    // Center the image within the layer
    shapeLayer.contentsGravity = .center
        
    // We can set the orange color here
    shapeLayer.backgroundColor = UIColor.orange.cgColor
        
    // Create mask layer
    let maskLayer = CAShapeLayer()
        
    maskLayer.path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 50, height: 50), cornerRadius: 25).cgPath
        
    shapeLayer.mask = maskLayer
        
    view.layer.addSublayer(shapeLayer)
}

Answer 2

问题是你的形状层没有大小。你没有给它一个框架，所以它只是右上角的一个看不见的点。不幸的是，你仍然可以看到形状，所以你没有意识到你做错了。但是内容并没有画出来，因为图层只是一个点，所以它显示了你代码的粘土脚

因此，在这种情况下，更改

shapeLayer.path = UIBezierPath(roundedRect: CGRect(x: 200, y: 200, width: 50, height: 50), cornerRadius: 25).cgPath

至

shapeLayer.frame = CGRect(x: 200, y: 200, width: 50, height: 50)
shapeLayer.path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 50, height: 50), cornerRadius: 25).cgPath

顺便说一句，不是如何正确画圆，所以如果那是你的目标，请停止它。使用 ovalIn；这就是它的用途。完整示例：

    let shapeLayer = CAShapeLayer()

    shapeLayer.frame = CGRect(x: 200, y: 200, width: 50, height: 50)
    shapeLayer.path = UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: 50, height: 50)).cgPath
    shapeLayer.strokeColor = UIColor.orange.cgColor
    shapeLayer.lineWidth = 4
    shapeLayer.fillColor = nil
    shapeLayer.contents = UIImage(named: "smiley")?.cgImage

    self.view.layer.addSublayer(shapeLayer)

结果：

另请注意，您可能在所有形状层上犯了这个错误，而不仅仅是这个，因此您需要返回查看此应用程序中的所有代码（或者更好，你写过的所有代码！）并正确编写所有形状层。图层需要框架！

CAShapeLayer 图像未出现

CAShapeLayer Image Not Appearing

calayer

cashapelayer

ios

swift