是否可以在 Swift 中交错 WebView 和 CALayerViews

Question

我有一个视图充当多个 CAShapeLayers 的容器。 这些包含贝塞尔曲线，在屏幕上形成一个组合，用户可以用不同的方式管理线宽、颜色、形状填充、不透明度等。

我想通过占用相同容器的 WebView 介绍文本。 诀窍是理想情况下我希望能够控制每个元素容器中相对于其他元素的 zPosition。

WebView 能否以与该容器中的 CAShapeLayers 共享 zPosition 范围的方式位于容器中？

Answer 1

夫妻选择...

1. 使用 html Canvas 并在页面内容本身中绘制形状。
2. 创建一个清晰的 web 视图，并在 web 视图下方/上方的视图中绘制形状。
3. 将子图层添加到 web 视图的图层（仍需要执行清除 html 以将图层放在 html 内容下）。

这是选项 3 的简单示例：

class ViewController: UIViewController {
    
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        webView = WKWebView()
        webView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(webView)
        
        let g = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            webView.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
            webView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
            webView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
            webView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -20.0),
        ])
        
        // this will allow us to see the shape layers
        //  if we put them *behind* the html content
        webView.isOpaque = false
        webView.backgroundColor = .clear
        webView.scrollView.backgroundColor = .clear
        
        // webView will be clear, so let's give it a border
        // so we can see the frame
        webView.layer.borderWidth = 1
        webView.layer.borderColor = UIColor.black.cgColor
        
        webView.loadHTMLString(html, baseURL: nil)
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        // we'll create 4 CAShapeLayers
        //  with oval paths
        //  each 1/4 the height of the webView
        //  overlapping a little
        var y: CGFloat = 12.0
        let yInc: CGFloat = (webView.bounds.height - 32.0) * 0.25
        var pathRect: CGRect = webView.bounds.insetBy(dx: 20.0, dy: 0.0)
        pathRect.size.height *= 0.25
        
        let colors: [UIColor] = [
            .systemRed, .systemGreen, .systemBlue, .cyan
        ]
        
        for (i, c) in colors.enumerated() {
            
            // oval CAShapeLayer with
            //  solid color thick stroke
            //  50% transparent color fill
            let cLayer = CAShapeLayer()
            cLayer.lineWidth = 8
            cLayer.strokeColor = c.cgColor
            cLayer.fillColor = c.withAlphaComponent(0.5).cgColor
            cLayer.path = UIBezierPath(ovalIn: pathRect.offsetBy(dx: 0.0, dy: y)).cgPath
            
            // add shape layers to the webView's layer
            //  shape layers will NOT scroll
            var targetLayer = webView.layer
            
            // or, add shape layers to the webView's scrollView's layer
            //  shape layers WILL scroll
            //targetLayer = webView.scrollView.layer
            
            if i < 2 {
                // insert the first two layers *behind* the web page content
                targetLayer.insertSublayer(cLayer, at: UInt32(i))
            } else {
                // add the second two layer *on top of* the web page content
                targetLayer.addSublayer(cLayer)
            }
            
            y += yInc
        }
        
    }
    
    let html: String =
"""
<html>
<head>
<style type=\"text/css\">
body{
 font-size: 100px;
 font-family:verdana;
 text-align: center;
 color: #ffdd00;
}
</style>
</head>
<body>
<p>This is some web page body text in a WKWebView.</p>
<p>Red and Green shape layers are <i><b>behind</b></i> the html content.</p>
<p>Blue and Cyan shape layers are <i><b>on top of</b></i> the html content.</p>
<p>Let's add enough text to exceed the height of the web view so we can see what happens when we scroll.</p>
</body>
</html>
"""
    
}

看起来像这样：