我如何从单个 CAShapeLayer 中的触摸中绘制线条以便能够 select 并移动 UIBezierPaths？

Question

我正在尝试用触摸画线，然后能够移动它。 我没有使用带有 draw(_ rect: CGRect) 的 UIContext 方法进行绘图，因为我无法获得笔画的大小及其一些属性，所以我使用 CAShapeLayer 来使用如下触摸方法进行绘图：

    let shapeLayer: CAShapeLayer = {
    let layer = CAShapeLayer()
    layer.lineWidth = 1
    layer.strokeColor = UIColor.black.cgColor
    layer.fillColor = UIColor.clear.cgColor
    layer.lineCap = .round
    layer.lineJoin = .round
    layer.lineDashPattern = [10, 10]
    layer.name = "ShapeLayer"
    return layer
}()

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        let shapeLayer = CAShapeLayer()
        shapeLayer.lineWidth = 1
        shapeLayer.strokeColor = UIColor.black.cgColor
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.lineCap = .round
        shapeLayer.lineJoin = .round
        shapeLayer.lineDashPattern = [10, 10]
        shapeLayer.name = "ShapeLayer"
        self.canvas.layer.addSublayer(shapeLayer)

        path = MyBezierPath()
        if let location = touches.first?.location(in: self.canvas) { previousTouchPoint = location }
}

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    
    guard let touch = touches.first?.location(in: self.canvas) else { return }
    
        if let location = touches.first?.location(in: self.canvas) {
            path.move(to: location)
            path.addLine(to: previousTouchPoint)
            previousTouchPoint = location

            if canvas.layer.sublayers != nil && canvas.layer.sublayers?.last?.name == "ShapeLayer" {
                guard let layer = canvas.layer.sublayers?.last as? CAShapeLayer else { return }
                print("Here \(layer.path?.boundingBoxOfPath)")
                layer.path = path.cgPath
            }
        }
 }

我试图将所有 UIBezierpath 添加到单个 CAShapeLayer 以便我可以 select 特定路径并移动它。 但是在这种方法中，它为每一行创建新的 CAShapeLayer，所以我尝试定义全局 CAShapeLayer 变量并为所有行附加 UIBezierPath 并将其添加到全局 CAShapeLayer 变量，但它非常缓慢且滞后。 有什么办法我可以只用一个 CAShapeLayer 绘制然后能够改变它的 BezierPath 的位置？

Answer 1

这是将多个“线段”添加到单个UIBezierPath的简单示例，然后能够拖动/移动该路径。

在UIView子类中，我们：

• 创建一个UIBezierPath我们称之为thePath
• 创建、分配属性并添加CAShapeLayer -- shapeLayer
• 如果我们处于“绘图”模式
  • 在 touchesBegan 上， thePath.move(to: point)
  • 在 touchesMoved 上， thePath.addLine(to: point)和shapeLayer.path = thePath.cgPath
• 如果我们处于“移动”模式
  • 在 touchesBegan 时，保存要点
  • 在 touchesMoved 上，变换路径

在启动时，它看起来像这样：

我们触摸并拖动以添加到路径：

更多的触摸和拖动以添加更多“段”：

现在我们切换到“移动”并向下和向右拖动：

切换回“Draw”并添加更多片段：

切换回“移动”并向上和向左拖动：

示例 controller

class DrawMoveLayerTestVC: UIViewController {

    let testView = DrawMoveLayerView()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .systemBackground
        
        testView.backgroundColor = UIColor(white: 0.95, alpha: 1.0)
        testView.translatesAutoresizingMaskIntoConstraints = false
        
        // segmented control to switch between drawing / moving
        let segControl = UISegmentedControl(items: ["Draw", "Move"])
        segControl.translatesAutoresizingMaskIntoConstraints = false
        segControl.selectedSegmentIndex = 0
        segControl.addTarget(self, action: #selector(segChanged(_:)), for: .valueChanged)
        
        view.addSubview(testView)
        view.addSubview(segControl)
        
        let g = view.safeAreaLayoutGuide
        
        NSLayoutConstraint.activate([
            
            // put segmented control at bottom
            segControl.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
            segControl.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
            segControl.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -20.0),

            // constrain test view to all top/leading/trailing with 20-points "padding"
            testView.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
            testView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
            testView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
            // bottom to segmented control top with 20-points "padding"
            testView.bottomAnchor.constraint(equalTo: segControl.topAnchor, constant: -20.0),
            
        ])
        
    }
    @objc func segChanged(_ sender: UISegmentedControl) {
        // set test view to "drawing" or "moving"
        testView.isDrawing = sender.selectedSegmentIndex == 0
    }
}

示例视图子类

class DrawMoveLayerView: UIView {
    
    public var isDrawing: Bool = true
    
    private let shapeLayer = CAShapeLayer()
    private let thePath = UIBezierPath()
    private var startPoint: CGPoint = .zero

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    private func commonInit() {
        shapeLayer.lineWidth = 1
        shapeLayer.strokeColor = UIColor.black.cgColor
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.lineCap = .round
        shapeLayer.lineJoin = .round
        shapeLayer.lineDashPattern = [5, 10]
        shapeLayer.name = "ShapeLayer"
        layer.addSublayer(shapeLayer)
        self.clipsToBounds = true
    }
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        guard let t = touches.first else { return }
        let point = t.location(in: self)
        if isDrawing {
            thePath.move(to: point)
        } else {
            self.startPoint = point
        }
    }
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        guard let t = touches.first else { return }
        let point = t.location(in: self)
        if isDrawing {
            thePath.addLine(to: point)
        } else {
            // move the path by the distance the touch moved
            let tr = CGAffineTransform(translationX: point.x - startPoint.x, y: point.y - startPoint.y)
            thePath.apply(tr)
            startPoint = point
        }
        // update the path of the shape layer
        shapeLayer.path = thePath.cgPath
    }
    
}

Answer 2

在做了一些研究后，我发现不可能在单个 CAShapeLayer 中绘制多条线，您可以绘制单条线但不能绘制多条线。 您可以通过向UIBezierPath添加新线来绘制多条线，但它会滞后很多。

对于绘制多条线，主要有两种已知方法：

1. 使用CGContext
2. 通过为您绘制的每条线添加单独的CAShapeLayer 。

CAShapeLayer 方法更容易，并且对性能和新手都有好处。