ios - CoreGraphics 之字形和 2 个 CGPoint 之间的哈希线

Question

我正在使用 Swift 构建一个 iOS 项目。如何使用CoreGraphics绘制锯齿形路径？我如何计算所有的中间点？

我还需要画一条哈希线吗？这可以用CoreGraphics创建吗？

作为我试图实现的一个例子：

标签： iosswiftcore-graphics

Answer 1

一般的想法是：

• 获取宽度：pt2.x - pt1.x
• 获取高度：pt2.y - pt1.y
• step-width 是 20，所以将宽度除以 20 得到步数
• step-height 将是高度/步数
• 创建一个UIBezierPath
• 循环步数，递增 x 和 y 值.lineTo(pt)

这是一个示例 - 请注意，它没有错误处理，如果不在右侧且低于 ，则需要pt2额外的逻辑pt1：

class SampleCGView: UIView {
    
    var pt1: CGPoint = .zero
    var pt2: CGPoint = .zero
    
    override func draw(_ rect: CGRect) {

        // green line to show pt1 to pt2
        let linePath: UIBezierPath = UIBezierPath()
        linePath.move(to: pt1)
        linePath.addLine(to: pt2)
        UIColor.green.setStroke()
        linePath.stroke()
        
        let zigzagPath: UIBezierPath = UIBezierPath()
        let numSteps: CGFloat = (pt2.x - pt1.x) / 20.0
        // step width is 20
        let xInc: CGFloat = 20
        // step height is based on line angle
        let yInc: CGFloat = (pt2.y - pt1.y) / numSteps
        var pt: CGPoint = pt1
        zigzagPath.move(to: pt)
        for _ in 1...Int(numSteps) {
            zigzagPath.addLine(to: CGPoint(x: pt.x + xInc * 0.75, y: pt.y - yInc * 0.25))
            zigzagPath.addLine(to: CGPoint(x: pt.x + xInc, y: pt.y + yInc))
            pt.x += xInc
            pt.y += yInc
        }
        UIColor.black.setStroke()
        zigzagPath.stroke()
        
    }
    
}

示例视图控制器演示：

class SampleDrawViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let v = SampleCGView()
        v.backgroundColor = .systemYellow
        v.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(v)
        
        let g = view.safeAreaLayoutGuide
        
        NSLayoutConstraint.activate([
            v.topAnchor.constraint(equalTo: g.topAnchor, constant: 80.0),
            v.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 40.0),
            v.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -40.0),
            v.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -80.0),
        ])
        
        // set start and end points for the zigzag line
        v.pt1 = CGPoint(x: 40, y: 40)
        v.pt2 = CGPoint(x: 260, y: 160)
        
    }
}

结果（绘制绿线只是为了使位置清晰）pt1：pt2