我有一个充当多个 CAShapeLayers 容器的视图。它们包含在屏幕上形成组合的贝塞尔曲线，用户可以通过不同的方式管理线宽、颜色、形状填充、不透明度等。
我想通过占据相同容器的 WebView 引入文本。诀窍是，理想情况下我希望能够控制每个元素相对于其他元素的容器中的 zPosition。
WebView 是否可以以与该容器中的 CAShapeLayers 共享 zPosition 范围的方式位于容器中？
情侣选项...
- 使用 html Canvas 并在页面内容本身中绘制形状。
- 创建一个clearWeb 视图并在 Web 视图下/顶部的视图中绘制形状。
- 将子图层添加到 Web 视图的图层（仍然需要实现clear 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>
"""
}
看起来像这样：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
