ios - 带有触摸位置的绘制线条缩小并淡入背景 Swift 3.0

Question

我在 Swift 3.0 上遇到了一个奇怪的错误，我成功地绘制了一个位于 UIView 内部的 UIImageView，但是当我绘制之前绘制的线开始淡化并收缩到 UIImageView 的顶部并且变得非常模糊时如附图所示。 Beginning of Drawing , Image becoming blurry .

如果能提供任何帮助/指导，我将不胜感激。

class DrawView: UIView {
    var drawArea: UIImageView!
    var clearDrawArea: UIButton!
    var lastTouch = CGPoint.zero

    init(){
        super.init(frame: CGRect(x: UIScreen.main.bounds.width*0.135, y:UIScreen.main.bounds.height*0.05, width: UIScreen.main.bounds.width*0.8, height: UIScreen.main.bounds.height*0.9))
        drawArea = UIImageView(frame: CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: self.bounds.width*0.9, height: self.bounds.height*0.86))
        drawArea.backgroundColor = UIColor.white

        let buttonWidth = self.bounds.width*0.2
        let buttonHeight = self.bounds.height*0.1
        clearDrawArea = UIButton(frame: CGRect(x: (self.bounds.width*0.61)-(buttonWidth/2), y: self.bounds.height*0.94, width: buttonWidth, height: buttonHeight))
        clearDrawArea.setTitle("Clear Draw Area", for: .normal)
        clearDrawArea.backgroundColor = UIColor(red: 49/255, green: 200/255, blue: 134/255, alpha: 255)
        clearDrawArea.addTarget(self, action: #selector(resetImage), for: .touchUpInside)

        self.addSubview(clearDrawArea)
        self.addSubview(drawArea)

    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

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

        if let firstTouch = touches.first{

            lastTouch = firstTouch.location(in: drawArea)
        }

    }
    func drawLines(_ from: CGPoint, to: CGPoint){
        UIGraphicsBeginImageContext(drawArea.frame.size)
        let context = UIGraphicsGetCurrentContext()

        context?.move(to: CGPoint(x: from.x, y: from.y))
        context?.addLine(to: CGPoint(x: to.x, y: to.y))

        context?.setLineCap(.round)
        context?.setLineWidth(3)
        context?.setStrokeColor(UIColor.black.cgColor)

        context?.strokePath()

        drawArea.image?.draw(in: drawArea.bounds)
        drawArea.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
    }
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {


        if let firstTouch = touches.first{
            let touchLocation = firstTouch.location(in: drawArea)
            drawLines(lastTouch, to: touchLocation)

            lastTouch = touchLocation
        }
    }

    func resetImage(){

        drawArea.image = nil            
    }
}

Answer 1

稍微更改了您的代码尝试以下操作..

class DrawView: UIView {
var drawArea: UIImageView!
var clearDrawArea: UIButton!
var lastTouch = CGPoint.zero
let pathAnimation: CABasicAnimation = CABasicAnimation(keyPath:"animation")
let tempPathLayer: CAShapeLayer = CAShapeLayer()
var lineLayer:CAShapeLayer=CAShapeLayer()
init(){
    super.init(frame: CGRect(x: UIScreen.main.bounds.width*0.135, y:UIScreen.main.bounds.height*0.05, width: UIScreen.main.bounds.width*0.8, height: UIScreen.main.bounds.height*0.9))
    drawArea = UIImageView(frame: CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: self.bounds.width*0.9, height: self.bounds.height*0.86))
    drawArea.backgroundColor = UIColor.white

    let buttonWidth = self.bounds.width*0.2
    let buttonHeight = self.bounds.height*0.1
    clearDrawArea = UIButton(frame: CGRect(x: (self.bounds.width*0.61)-(buttonWidth/2), y: self.bounds.height*0.94, width: buttonWidth, height: buttonHeight))
    clearDrawArea.setTitle("Clear Draw Area", for: .normal)
    clearDrawArea.backgroundColor = UIColor(red: 49/255, green: 200/255, blue: 134/255, alpha: 255)
    clearDrawArea.addTarget(self, action: #selector(resetImage), for: .touchUpInside)

    self.addSubview(clearDrawArea)
    self.addSubview(drawArea)

}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)

    //fatalError("init(coder:) has not been implemented")
}

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

    if let firstTouch = touches.first{

        lastTouch = firstTouch.location(in: drawArea)
    }

}
func drawLines(_ from: CGPoint, to: CGPoint){
    UIGraphicsBeginImageContext(drawArea.frame.size)

    //let context = UIGraphicsGetCurrentContext()
    let tempPath: UIBezierPath = UIBezierPath()
    var lineLayer:CAShapeLayer=CAShapeLayer()
    tempPath.move(to: from)
    tempPath.addLine(to: to)
    let strokeColor = UIColor.red
    UIColor.blue.setFill()
    strokeColor.setStroke()

    let tempPathLayer: CAShapeLayer = CAShapeLayer()
    tempPathLayer.frame = self.bounds
    tempPathLayer.position=self.layer.position
    tempPathLayer.strokeColor = UIColor.green.cgColor
    tempPathLayer.fillColor = UIColor.red.cgColor
    tempPathLayer.lineWidth = 1.0
    tempPathLayer.path = tempPath.cgPath
    lineLayer=tempPathLayer
    pathAnimation.beginTime=CACurrentMediaTime()
    pathAnimation.duration = 2
    pathAnimation.fromValue = NSNumber(value: 0.0)
    pathAnimation.toValue = NSNumber(value:1.0)

    lineLayer.add(pathAnimation, forKey: "animation")
    self.layer.addSublayer(lineLayer)

    drawArea.image?.draw(in: drawArea.bounds)
    drawArea.image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
}

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


    if let firstTouch = touches.first{
        let touchLocation = firstTouch.location(in: drawArea)
        drawLines(lastTouch, to: touchLocation)

        lastTouch = touchLocation
    }
}

func resetImage(){

    drawArea.image = nil            
}