CODEWITHSUNDEEP
swiftuiimageviewcore-graphicsuibezierpath
blueWings
blueWings

Reputation: 71

merging imageviews in drawing app swift

I am working on drawing app. I have three image views -

imageView - Contains base Image

tempImageView - for drawing annotations. drawLineFrom function takes a point and draw then lines on tempImageView

  func drawLineFrom(fromPoint: CGPoint, toPoint: CGPoint)
    {
        //print("drawLineFrom")
        let mid1 = CGPoint(x:(prevPoint1.x + prevPoint2.x)*0.5, y:(prevPoint1.y + prevPoint2.y)*0.5)
        let mid2 = CGPoint(x:(toPoint.x + prevPoint1.x)*0.5, y:(toPoint.y + prevPoint1.y)*0.5)
        UIGraphicsBeginImageContextWithOptions(self.tempImageView.boundsSize, false, 0.0)
        if let context = UIGraphicsGetCurrentContext()
        {
            tempImageView.image?.draw(in: CGRect(x: 0, y: 0, width: self.tempImageView.frame.size.width, height: self.tempImageView.frame.size.height))
            let annotaionPath = UIBezierPath()
            annotaionPath.move(to:  CGPoint(x: mid1.x, y: mid1.y))
            annotaionPath.addQuadCurve(to: CGPoint(x:mid2.x,y:mid2.y), controlPoint: CGPoint(x:prevPoint1.x,y:prevPoint1.y))
            annotaionPath.lineCapStyle = CGLineCap.round
            annotaionPath.lineJoinStyle = CGLineJoin.round
            annotaionPath.lineWidth = editorPanelView.brushWidth
            context.setStrokeColor(editorPanelView.drawingColor.cgColor)
            annotaionPath.stroke()
            tempImageView.image = UIGraphicsGetImageFromCurrentImageContext()
            tempImageView.alpha = editorPanelView.opacity
            UIGraphicsEndImageContext()
        }
    }

drawingImageView - after each touchesEnded method I am merging tempImageView with drawingImageView and setting tempImageView.image = nil .

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?)
    {
        isDrawing = false
        if !swiped
        {
            drawLineFrom(fromPoint: lastPoint, toPoint: lastPoint)
        }
        annotationArray.append(annotationsPoints)
        annotationsPoints.removeAll()
        // Merge tempImageView into drawingImageView
        UIGraphicsBeginImageContext(drawingImageView.frame.size)
        drawingImageView.image?.draw(in: CGRect(x: 0, y: 0, width: drawingImageView.frame.size.width, height: drawingImageView.frame.size.height), blendMode: CGBlendMode.normal, alpha: 1.0)
        tempImageView.image?.draw(in: CGRect(x: 0, y: 0, width: drawingImageView.frame.size.width, height: drawingImageView.frame.size.height), blendMode: CGBlendMode.normal, alpha: editorPanelView.opacity)
        drawingImageView.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        tempImageView.image = nil
    }

When save button clicked,

let drawingImage = self.drawingImageView.image
let combinedImage = self.imageView.combineWithOverlay(overlayImageView: self.drawingImageView)

and I am saving combinedImage.

Problem is, when I merge tempImage view with drawing image view, the annotations get blurred.I want to maintain same clarity. I am not able to find any solution for this. Any help (even if it's just a kick in the right direction) would be appreciated.

Upvotes: 1

Views: 56

Answers (1)

Craig Siemens
Craig Siemens

Reputation: 13296

I think the issue is with using UIGraphicsBeginImageContext(drawingImageView.frame.size).

The default scale it uses is 1.0 so if you're using a retina screen, it will cause the content to be scaled up 2 or 3 times causing the blurry appearance.

You should use UIGraphicsBeginImageContextWithOptions like you have in drawLineFrom with a scale of 0.0 which will default to the screens scale.

Upvotes: 0

Related Questions