CODEWITHSUNDEEP
swiftcore-graphicsuibezierpath
DanielZanchi
DanielZanchi

Reputation: 2768

How to edit high resolution images with Core Graphics?

I'm trying to draw a path on a high resolution image, that's nothing complicated for an iPhone but if I add shadow to my path everything lags. It lags only when I work on images with a certain resolution (2000 x 3000) even less.

The Storyboard vies are:

-Scroll View
  -Image View
  -Draw View

So I have the DrawingView on top of the ImageView when I need to draw.
So the ImageView and the DrawView (view.bounds.size) have the same resolution as the image (e.g. 2000 x 3000) (there's the problem).
I'm drawing on a view with a high resolution.

I'm not directly calling drawRect: but only calling setNeedsDisplay() inside touchesBegan() and touchesMoved() after doing some operations (path.moveToPoint, path.addCurveToPoint, array operations) and adding points to my array.

In drawRect: I essentially have:

override func drawRect(rect: CGRect) {
        print(self.bounds.size)
        UIColor.greenColor().setStroke()
        path.lineCapStyle = .Round
        path.lineJoinStyle = .Round
        path.lineWidth = 60.0
        context = UIGraphicsGetCurrentContext()!
        CGContextAddPath(context, path.CGPath)
        CGContextSetShadowWithColor(context, CGSizeZero, 14.0, UIColor.whiteColor().CGColor)  // <-- with this shadow it lags a lot.
        path.stroke()
    }

My path is a UIBezierPath().

Any ideas to improve the speed?

Update: I followed what @brimstone said. I now have ImageView with a lower resolution, but have to apply my drawn path to the high resolution image.
(I'm trying to hand crop an image with the path that the user draws)
In this code I already got my closed path: 

    let layer = CAShapeLayer()
    layer.path = path.CGPath
    self.imageToEditView.layer.mask = layer
    UIGraphicsBeginImageContext(self.imageEdited.size)
    self.imageToEditView.layer.renderInContext(UIGraphicsGetCurrentContext()!)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    let croppedCGImage = CGImageCreateWithImageInRect(image.CGImage!, CGPathGetBoundingBox(path.CGPath))
    let croppedImage = UIImage(CGImage: croppedCGImage!)
    self.imageToEditView.image = croppedImage
    self.imageToEditView.layer.mask = nil

imageToEditView.bounds.size = low resolution
imageEdited.size = high resolution

I need to set the hight resolution (I think) when i renderInContext. But how can I change the resolution of the imageView now?

Upvotes: 0

Views: 618

Answers (1)

brimstone
brimstone

Reputation: 3400

Try downsizing it for the user to draw over (doesn't make a huge difference on small iPhone screens for user experience), then apply the edits to the high-res image.

To downsize images, either use UIImagePNGRepresentation, which may make your image sufficiently smaller, or (if you're still having memory issues), try using techniques in this tutorial and this answer to make it even smaller.

Then, you can take the content of what they've drawn and apply it to the high-res image.

Alternatively, look at high-res optimisation techniques by Apple: https://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/SupportingHiResScreensInViews/SupportingHiResScreensInViews.html

Upvotes: 1

Related Questions