ios – Issue with Sequential Touch Points in Using CALayer for Drawing in Swift


I’m encountering an issue with my drawing functionality in Swift, specifically when using CALayer instead of UIBezierPath. Here’s the problem I’m facing:

I am creating a texture from an image and using the texture to create a drawing line through finger stroke. In this process, the line is being created by joining the texture one by one, side by side. Initially, I used UIBezierPath for drawing, and everything worked fine. However, when I switched to using CALayer for drawing, for using textures to draw lines, I noticed that the touch points are not sequentially joining or increasing if I move my finger fast.

When I move my finger slowly, the drawing works fine, and the touch points are joining sequentially.

However, when I move my finger fast, the touch points seem to skip, resulting in disjointed lines and multiple blank spaces within a line.

enter image description here

class CustomStrokeDrawingView: UIView {
    var path = UIBezierPath()
    var startPoint = CGPoint()
    var touchPoint = CGPoint()
    var shape =  UIImage(named:"square-outline")

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        let touch = touches.first
        if let point = touch?.location(in: self) {
            startPoint = point
        }
    }

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        let touch = touches.first
        if let point = touch?.location(in: self) {
            touchPoint = point
        }

        let imageLayer = CALayer()
        imageLayer.backgroundColor = UIColor.clear.cgColor
        imageLayer.bounds = CGRect(x: startPoint.x, y: startPoint.y , width: 20, height: 20)
        imageLayer.position = CGPoint(x:touchPoint.x ,y:touchPoint.y)
        imageLayer.contents = shape?.cgImage
        self.layer.addSublayer(imageLayer)
        
        
    }
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
    }
}

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img