是否可以在 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>
"""
    
}

看起來像這樣：