在swift中画一条直线 3 和核心图形

Question

我正在尝试使用核心图形和 swift 3 绘制一条直线，但是，当调用 touchesmoved 时，它会创建多条线，而不仅仅是一条线。使用的代码如下：

import UIKit

    class ViewController: UIViewController {

        @IBOutlet weak var drawingPlace: UIImageView!

        var startTouch : CGPoint?
        var secondTouch : CGPoint?

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

        override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
            for touch in touches{
                secondTouch = touch.location(in: drawingPlace)

                UIGraphicsBeginImageContext(drawingPlace.frame.size)
                drawingPlace.image?.draw(in: CGRect(x: 0, y: 0, width: drawingPlace.frame.width, height: drawingPlace.frame.height))
                let bezier = UIBezierPath()

                bezier.move(to: startTouch!)
                bezier.addLine(to: secondTouch!)
                bezier.close()

                bezier.lineWidth = 4
                UIColor.blue.set()
                bezier.stroke()

                let img = UIGraphicsGetImageFromCurrentImageContext()
                UIGraphicsEndImageContext()
                drawingPlace.image = img   
            }
        }
    }

btw touchesEnd 创建单行，但仅在用户结束触摸后创建。我希望用户在触摸时看到正在绘制的线。谢谢你。

Answer 1

你需要保持电流context直到画线过程结束，之后你需要保持电流图像并清除 context，再次绘制保存的图像，然后绘制新线。当调用结束触摸时，清除当前 context 并保存当前图像，然后再次开始新的线条绘制过程

这是完整代码

import UIKit

class ViewController2: UIViewController {

    @IBOutlet weak var drawingPlace: UIImageView!

    var startTouch : CGPoint?
    var secondTouch : CGPoint?
    var currentContext : CGContext?
    var prevImage : UIImage?

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

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        for touch in touches{
            secondTouch = touch.location(in: drawingPlace)


            if(self.currentContext == nil)
            {
                UIGraphicsBeginImageContext(drawingPlace.frame.size)
                self.currentContext = UIGraphicsGetCurrentContext()
            }else{
                self.currentContext?.clear(CGRect(x: 0, y: 0, width: drawingPlace.frame.width, height: drawingPlace.frame.height))
            }

            self.prevImage?.draw(in: self.drawingPlace.bounds)

            let bezier = UIBezierPath()

            bezier.move(to: startTouch!)
            bezier.addLine(to: secondTouch!)
            bezier.close()


            UIColor.blue.set()

            self.currentContext?.setLineWidth(4)
            self.currentContext?.addPath(bezier.cgPath)
            self.currentContext?.strokePath()
            let img2 = self.currentContext?.makeImage()
            drawingPlace.image = UIImage.init(cgImage: img2!)
        }
    }

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {

        self.currentContext = nil
        self.prevImage = self.drawingPlace.image
    }
}

在swift中画一条直线 3 和核心图形

draw a straight line in swift 3 and core graphics

drawing

core-graphics

sprite-kit

swift

结果