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!