我想在照片中制作一個網格。我怎樣才能做到這一點？你能告訴我在哪里看嗎？谷歌搜索了一切，但什么也沒找到，除了通過 CoreGraphics，但這不是我正在考慮的選擇。
uj5u.com熱心網友回復：
這是一個使用CAShapeLayer...的非常快速的示例
UIImageView 子類
class GridImageView: UIImageView {
public var numRows: Int = 1
public var numColumns: Int = 1
private let gridLayer = CAShapeLayer()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
override init(image: UIImage?) {
super.init(image: image)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() {
layer.addSublayer(gridLayer)
gridLayer.strokeColor = UIColor.white.cgColor
gridLayer.fillColor = UIColor.clear.cgColor
gridLayer.lineWidth = 1
}
override func layoutSubviews() {
super.layoutSubviews()
if numRows == 1 && numColumns == 1 {
// no need to draw any lines
gridLayer.path = nil
return
}
let bez = UIBezierPath()
if numRows > 1 {
let yIncrement: CGFloat = bounds.height / CGFloat(numRows)
var y: CGFloat = yIncrement
for _ in 0..<numRows-1 {
bez.move(to: CGPoint(x: bounds.minX, y: y))
bez.addLine(to: CGPoint(x: bounds.maxX, y: y))
y = yIncrement
}
}
if numColumns > 1 {
let xIncrement: CGFloat = bounds.width / CGFloat(numColumns)
var x: CGFloat = xIncrement
for _ in 0..<numColumns-1 {
bez.move(to: CGPoint(x: x, y: bounds.minY))
bez.addLine(to: CGPoint(x: x, y: bounds.maxY))
x = xIncrement
}
}
gridLayer.path = bez.cgPath
}
}
示例控制器
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .systemYellow
guard let img = UIImage(named: "beach") else { return }
let imgView = GridImageView(image: img)
imgView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(imgView)
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
imgView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
imgView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
imgView.centerYAnchor.constraint(equalTo: g.centerYAnchor),
imgView.heightAnchor.constraint(equalTo: imgView.widthAnchor, multiplier: img.size.height / img.size.width)
])
imgView.numRows = 4
imgView.numColumns = 3
}
}
輸出（使用隨機海灘 jpg）：
編輯-在對 OP 進行進一步評論后...
要從您發布的視頻中獲得“效果”，我們可以簡單地在滾動視圖的頂部添加一個“網格覆寫視圖”。
因此，我們將使用幾乎相同的 subclassed UIView：
class GridOverlayView: UIView {
public var lineColor: UIColor = .white { didSet { setNeedsLayout() } }
public var numRows: Int = 1 { didSet { setNeedsLayout() } }
public var numColumns: Int = 1 { didSet { setNeedsLayout() } }
private let gridLayer = CAShapeLayer()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() {
layer.addSublayer(gridLayer)
gridLayer.fillColor = UIColor.clear.cgColor
gridLayer.lineWidth = 1
}
override func layoutSubviews() {
super.layoutSubviews()
if numRows == 1 && numColumns == 1 {
// no need to draw any lines
gridLayer.path = nil
return
}
let bez = UIBezierPath()
if numRows > 1 {
let yIncrement: CGFloat = bounds.height / CGFloat(numRows)
var y: CGFloat = yIncrement
for _ in 0..<numRows-1 {
bez.move(to: CGPoint(x: bounds.minX, y: y))
bez.addLine(to: CGPoint(x: bounds.maxX, y: y))
y = yIncrement
}
}
if numColumns > 1 {
let xIncrement: CGFloat = bounds.width / CGFloat(numColumns)
var x: CGFloat = xIncrement
for _ in 0..<numColumns-1 {
bez.move(to: CGPoint(x: x, y: bounds.minY))
bez.addLine(to: CGPoint(x: x, y: bounds.maxY))
x = xIncrement
}
}
gridLayer.strokeColor = lineColor.cgColor
gridLayer.path = bez.cgPath
}
}
有了這個“海灘”影像：
這個帶有滾動視圖的控制器類：
class GridScrollTestVC: UIViewController, UIScrollViewDelegate {
let imgView = UIImageView()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .systemYellow
guard let img = UIImage(named: "beach") else { return }
imgView.image = img
let scrollView = UIScrollView()
scrollView.backgroundColor = .red
scrollView.delegate = self
imgView.translatesAutoresizingMaskIntoConstraints = false
scrollView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(scrollView)
scrollView.addSubview(imgView)
let g = view.safeAreaLayoutGuide
let cg = scrollView.contentLayoutGuide
let fg = scrollView.frameLayoutGuide
NSLayoutConstraint.activate([
scrollView.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
scrollView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
scrollView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
scrollView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -20.0),
imgView.topAnchor.constraint(equalTo: cg.topAnchor, constant: 0.0),
imgView.leadingAnchor.constraint(equalTo: cg.leadingAnchor, constant: 0.0),
imgView.trailingAnchor.constraint(equalTo: cg.trailingAnchor, constant: 0.0),
imgView.bottomAnchor.constraint(equalTo: cg.bottomAnchor, constant: 0.0),
imgView.widthAnchor.constraint(equalTo: fg.widthAnchor),
imgView.heightAnchor.constraint(equalTo: imgView.widthAnchor, multiplier: img.size.height / img.size.width)
])
scrollView.minimumZoomScale = 1.0
scrollView.maximumZoomScale = 5.0
// now let's add the grid "overlay"
let gridView = GridOverlayView()
gridView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(gridView)
gridView.numRows = 4
gridView.numColumns = 3
gridView.lineColor = .black
NSLayoutConstraint.activate([
gridView.topAnchor.constraint(equalTo: scrollView.topAnchor),
gridView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
gridView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
gridView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
])
// don't let the grid overlay view interfere with the scrolling/zooming
gridView.isUserInteractionEnabled = false
}
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return imgView
}
}
我們得到這個輸出：
放大一點后：
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/526042.html