ios - 在 Swift/IOS 中将 shapeLayer 添加到 View 层时，绘制应用程序出现滞后

Question

我正在创建一个绘图应用。该应用程序允许用户在 View 上绘图。我在下面给出的代码中将该 View 命名为绘图 View 。为了创建这个应用程序，我使用了BeizerPath和ShapeLayer，每当用户触摸屏幕时，UIBeizerPath和CAShapeLayer就会初始化。这个应用程序的问题是在某些绘图 View 出现滞后之后。我不知道发生了什么事。有更好的方法来优化这个应用程序吗？

CanvasViewController: UIViewController {

    // MARK: Properties

    @IBOutlet weak var verticalScrollView: UIScrollView!
    var lastPoint:CGPoint?   // var mutablePath:CGMutablePath?
    var drawLine:UIBezierPath?
    var shapeLayer:CAShapeLayer?
    let dropDown = DropDown()
    var shape:CAShapeLayer?
    let listOfDropDownMenu:[String] = ["Create New Canvas","Save","Change Color"]
    var presenter: CanvasModuleInterface?

    // MARK: IBOutlets
     @IBOutlet weak var drawingView: UIView!
    @IBOutlet weak var showColorViewControllerDropDownButton: UIBarButtonItem!

    // MARK: VC's Life cycle

    override func viewDidLoad() {
        super.viewDidLoad()
        self.setup()
        self.verticalScrollView.isUserInteractionEnabled = false
    }

    // MARK: IBActions

    // MARK: Other Functions

    @IBAction func ShowColorViewControllerAction(_ sender: Any) {
         self.dropDown.anchorView = self.showColorViewControllerDropDownButton
         self.dropDown.dataSource = self.listOfDropDownMenu
        self.dropDown.selectionAction = { [unowned self] (index: Int, item: String) in
            switch index{
            case 0:
              self.createNewView()
            case 1:
              self.saveTheCanvas()
            case 2:
             self.presentToColorViewController()

            //self.presentColorController()
            default:
                print("out of order !!!")
            }

        }
        self.dropDown.show()
    }

    private func createNewView(){
        //Mark: - create new canvas
        self.drawingView.layer.sublayers!.forEach { (layers) in
            layers.removeFromSuperlayer()
        }
    }
    private func presentToColorViewController(){
        // Mark : - naviagate to color view controller.


    }
    private func saveTheCanvas(){
        // Mark: - save the drawing

    }

    private func setup() {
        // all setup should be done here
    }
    private func presentColorController(){
        let colorSelectionController = EFColorSelectionViewController()
        let colorNavigationController = UINavigationController(rootViewController: colorSelectionController)
        colorNavigationController.navigationBar.backgroundColor = UIColor.white
        colorNavigationController.navigationBar.isTranslucent = false
        colorNavigationController.modalPresentationStyle = UIModalPresentationStyle.popover
        colorSelectionController.delegate = self
        colorSelectionController.color = self.view.backgroundColor ?? UIColor.white

        if UIUserInterfaceSizeClass.compact == self.traitCollection.horizontalSizeClass {
            let doneButton: UIBarButtonItem = UIBarButtonItem(
                title: NSLocalizedString("Done", comment: ""),
                style: UIBarButtonItem.Style.done,
                target: self,
                action: #selector(dismissViewController)
            )
            colorSelectionController.navigationItem.rightBarButtonItem = doneButton
        }
        self.present(colorNavigationController, animated: true, completion: nil)
    }
    @objc func dismissViewController(){
        //##ask confusion.....
        self.dismiss(animated: true, completion: nil)
    }

}

// MARK: CanvasViewInterface extension CanvasViewController: CanvasViewInterface {
     } extension CanvasViewController: EFColorSelectionViewControllerDelegate{
    func colorViewController(_ colorViewCntroller: EFColorSelectionViewController, didChangeColor color: UIColor) {

    } } extension CanvasViewController{

    //Mark: - this extension contains function for drawing the circle.
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        print("touches begin")

        self.drawLine = UIBezierPath()
        self.shapeLayer = CAShapeLayer()
        //       self.mutablePath = CGMutablePath()

        if let touchesPoint = touches.first{
            self.lastPoint = touchesPoint.location(in: self.drawingView)
         }

    }
    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
         //        self.drawingView.layer.sublayers!.forEach { (layer) in //            print(layer) //        }
      //  print(self.drawingView.layer)

    }
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?){ //        print("\(self.drawingView)") //        print("\(self.drawingView.layer.sublayers)")

        var nextPoint:CGPoint?
        if let touchesPoint = touches.first{
            nextPoint = touchesPoint.location(in: self.drawingView)
            guard let lastLinePoint = self.lastPoint , let nextLinePoint = nextPoint else{return}
            self.drawLineInDrawingView(from: lastLinePoint, to: nextLinePoint)
        }
        if let newPoint = nextPoint{
        self.lastPoint  = newPoint
        }
    }
    func drawLineInDrawingView(from:CGPoint,to:CGPoint){
        drawLine!.move(to: CGPoint(x: from.x, y: from.y))
        drawLine!.addLine(to: CGPoint(x: to.x, y:  to.y))
        shapeLayer!.path = drawLine!.cgPath
        shapeLayer!.strokeColor = UIColor.black.cgColor
        shapeLayer!.lineCap = .round
        shapeLayer!.lineWidth = 100
        self.drawingView.layer.addSublayer(shapeLayer!)    //     print(self.drawingView.layer.sublayers)
    }
     }

Answer 1

不知道什么CanvasViewController您正在使用，无法完全正确地回答您的问题，但我会回答，假设它的工作原理与 iOS 中的任何常规 UIView 类似。

我可以指出一些可以提高性能的事情:

首先，不要添加相同的ShapeLayer在里面一遍又一遍drawLineInDrawingView(from:CGPoint,to:CGPoint)到绘图 View ，而只在 touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) 中执行一次并存储对其的引用。

其次是你的drawLineInDrawingView(from:CGPoint,to:CGPoint)应该看起来像这样:

func drawLineInDrawingView(from:CGPoint,to:CGPoint){
    CATransaction.begin()
    CATransaction.setDisableActions(true)

    drawLine!.move(to: CGPoint(x: from.x, y: from.y))
    drawLine!.addLine(to: CGPoint(x: to.x, y:  to.y))
    shapeLayer!.path = drawLine!.cgPath
    shapeLayer!.strokeColor = UIColor.black.cgColor
    shapeLayer!.lineCap = .round
    shapeLayer!.lineWidth = 100
    shapeLayer!.setNeedsDisplay()

    CATransaction.commit()
}

总而言之:在 TouchesBegan() 上，您添加 shapeLayer 并存储对其的引用。在touchesMoved 内部，您调用drawLineInDrawingsFunction。你的drawLineInDrawingsFunction，只更新你的Shapelayer shapeLayer.setNeedsDisplay() .

将您的转换放入其中

CATransaction.begin()
CATransaction.setDisableActions(true)
/**Your transformation here**/
CATransaction.commit()

只是为了阻止您的 View 自动动画更改，而是立即显示它们。

我希望这会有所帮助。