如何绘制图像并输出绘制的图像

Question

我对输出绘制的图像有疑问。为了创建绘制的图像，我将两个图像imageView图像和canvasView转向图像混合以构建此图像。但是我发现我绘制的图像和输出图像之间的触摸线路径不同。我放入绘制的图像并输出如下图所示的图像。我不知道我的areaSize是否设置错误导致这种情况。我也不知道我的代码出了什么问题并输出了错误的图像？谢谢This is image I drawn

Final Output image

class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()

    }

    @IBAction func cameraBtnPressed(_ sender: Any) {
        let imagePicker = UIImagePickerController()
        imagePicker.sourceType = .camera
        imagePicker.delegate = self
        present(imagePicker, animated: true, completion: nil)
    }

    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {

        dismiss(animated: false) {

            if let image = info[UIImagePickerController.InfoKey.originalImage] as? UIImage {
                let vc = CanvasViewController()
                vc.imageView.image = image

                self.present(UINavigationController(rootViewController: vc), animated: false, completion: nil)
            }

        }

    }

}

class CanvasViewController: UIViewController {

    let imageView: UIImageView = {
        let ui = UIImageView()
        ui.contentMode = .scaleAspectFit
        return ui
    }()

    let canvasView: CanvasView = {
        let ui = CanvasView()
        ui.backgroundColor = UIColor.clear
        ui.clipsToBounds = true
        ui.isMultipleTouchEnabled = false
        return ui
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        let save = UIBarButtonItem(barButtonSystemItem: .save, target: self, action: #selector(saveBtnPressed(sender:)))
        let redo = UIBarButtonItem(barButtonSystemItem: .refresh, target: self, action: #selector(clearBtnPressed(sender:)))
        let back = UIBarButtonItem(barButtonSystemItem: .stop, target: self, action: #selector(cancelBtnPressed(sender:)))

        self.navigationItem.rightBarButtonItems = [save, redo]
        self.navigationItem.leftBarButtonItem = back

        self.setupView()
    }

    fileprivate func setupView() {

        self.view.addSubview(imageView)
        self.view.addSubview(canvasView)

        if #available(iOS 11.0, *) {
            imageView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 0).isActive = true
        } else {
            imageView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor, constant: 0).isActive = true
        }

        imageView.snp.makeConstraints { (make) in
            make.bottom.left.right.equalToSuperview()
        }

        canvasView.snp.makeConstraints { (make) in
            make.left.equalTo(imageView.snp.left)
            make.top.equalTo(imageView.snp.top)
            make.right.equalTo(imageView.snp.right)
            make.bottom.equalTo(imageView.snp.bottom)
        }

    }

    //MARK: BUTTON ACTION

    @objc func saveBtnPressed(sender: UIButton) {

        let size = CGSize(width: self.imageView.frame.width, height: self.imageView.frame.height)

        let canvasImage: UIImage = self.canvasView.asImage()

        if let photoImage = self.imageView.image {

            UIGraphicsBeginImageContextWithOptions(size, false, 0)
            let areaSize = CGRect(x: 0, y: 0, width: size.width, height: size.height)
            photoImage.draw(in: areaSize)
            canvasImage.draw(in: areaSize, blendMode: .normal, alpha: 0.8)
            let newImage:UIImage = UIGraphicsGetImageFromCurrentImageContext()!
            UIGraphicsEndImageContext()

            UIImageWriteToSavedPhotosAlbum(newImage, self,#selector(image(_:didFinishSavingWithError:contextInfo:)), nil)
        }

    }

}

extension UIView {

    func asImage() -> UIImage {
        if #available(iOS 10.0, *) {
            let renderer = UIGraphicsImageRenderer(bounds: bounds)
            return renderer.image { rendererContext in
                layer.render(in: rendererContext.cgContext)
            }
        } else {
            UIGraphicsBeginImageContext(self.frame.size)
            self.layer.render(in:UIGraphicsGetCurrentContext()!)
            let image = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            return UIImage(cgImage: image!.cgImage!)
        }
    }
}

class CanvasView: UIView {

    var lineColor = UIColor.red
    var lineWidth: CGFloat = 10
    var path: UIBezierPath?
    var touchPoint: CGPoint!
    var startingPoint: CGPoint!

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

        self.startingPoint = touches.first?.location(in: self)
    }

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        self.touchPoint = touches.first?.location(in: self)
        self.path = UIBezierPath()
        path?.move(to: startingPoint)
        path?.addLine(to: touchPoint)
        self.startingPoint = touchPoint
        self.draw()
    }

    func draw() {
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = path?.cgPath
        shapeLayer.strokeColor = lineColor.cgColor
        shapeLayer.lineWidth = lineWidth
        shapeLayer.fillColor = UIColor.clear.cgColor
        self.layer.addSublayer(shapeLayer)
        self.setNeedsDisplay()
    }

    func clearCanvas() {
        guard let drawPath = path else { return }
        drawPath.removeAllPoints()
        self.layer.sublayers = nil
        self.setNeedsDisplay()
    }
}

Answer 1

我认为两幅图像之间没有区别，除了在输出视图中拉伸图像的方式。以宽高比和内容类型播放，以防止输出图像在输出视图中拉伸。