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

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> This is some web page body text in a WKWebView. Red and Green shape layers are behind the html content. Blue and Cyan shape layers are on top of the html content. Let's add enough text to exceed the height of the web view so we can see what happens when we scroll. </body> </html> """ }