How to get a UIImage out of a freehand drawing UIView - iOS Swift

915 views Asked by At

I have a DrawView UIView that works fine to allow you making freehand drawing over an existing UIImageView. Here's the code I use to draw over that DrawView:

class DrawView: UIView {

/* Variables */
var lines: [Line] = []
var lastPoint: CGPoint!

var actionsCountArr:[Int] = []


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


override func touchesBegan(touches: NSSet, withEvent event: UIEvent) {
    lastPoint = touches.anyObject()?.locationInView(self)

}

override func touchesMoved(touches: NSSet, withEvent event: UIEvent) {
    var newPoint = touches.anyObject()?.locationInView(self)

    lines.append(Line(start: lastPoint, end: newPoint!))
    lastPoint = newPoint
    self.setNeedsDisplay()
}

override func touchesEnded(touches: NSSet, withEvent event: UIEvent) {
    actionsCountArr.append(lines.count)
    println("actions: \(actionsCountArr)")

}
// Draw Rect function
override func drawRect(rect: CGRect) {
    var context = UIGraphicsGetCurrentContext()
    CGContextBeginPath(context)
    for line in lines {
        CGContextMoveToPoint(context, line.start.x, line.start.y)
        CGContextAddLineToPoint(context, line.end.x, line.end.y)
        CGContextSetStrokeColorWithColor(context, colorPicked?.CGColor)
        CGContextSetLineWidth(context, lineWidth!)
        CGContextSetLineCap(context, kCGLineCapRound)
        CGContextStrokePath(context)
    }
}   

}

class Line {
        var start: CGPoint
        var end: CGPoint

    init(start _start: CGPoint, end _end: CGPoint) {
        start = _start
        end = _end
    }
}

Then here's yhe method I use to render the drawn lines of such UIView into a UIImage (it's in another class which has a UIImageView in background too):

func renderDrawingViewImage() {
    var rect:CGRect = drawingView.bounds
    UIGraphicsBeginImageContextWithOptions(rect.size, true, 0.0)
    drawingView.drawViewHierarchyInRect(drawingView.bounds, afterScreenUpdates: false)
    drawingImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

// Call the Filtering method
    applyPixellateFilter()
    }

After that, I apply a CIPixellate filter on that drawingImage, the result I get is that my drawingImage gets the filter and looks pixellate, but the whole background of that image gets black, non-transparent, as it was in the beginning (DrawView has bkg color set as clearColor).

here's the code:

func applyPixellateFilter() {
// Apply Pixllate filter to the drawing
var CIfilterName = "CIPixellate"

let ciContext = CIContext(options: nil)
let coreImage = CIImage(image: drawingImage)
let filter = CIFilter(name: CIfilterName)
filter.setDefaults()

filter.setValue(CIVector(x: 150, y: 150), forKey: kCIInputCenterKey)
filter.setValue(10.0, forKey: kCIInputScaleKey)

// Finalize the filtered image ==========
filter.setValue(coreImage, forKey: kCIInputImageKey)
let filteredImageData = filter.valueForKey(kCIOutputImageKey) as CIImage
    let filteredImageRef = ciContext.createCGImage(filteredImageData, fromRect: filteredImageData.extent())
    drawingImage = UIImage(CGImage: filteredImageRef);
}

So my question is: how may I get a transparent UIImage out of that DrawView UIView? It seems that if I don't apply that Pixellate filter, I can merge both my background image with the drawing view and get that last one with transparent background, but if I apply that filter, the background of drawingImage gets all black.

Thanks in advance!

0

There are 0 answers