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.
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.
Related
I would like to clip a bezier path from an image. For some reason, the image remains the unclipped. And how do I position the path so it would be properly cut?
extension UIImage {
func imageByApplyingMaskingBezierPath(_ path: UIBezierPath, _ pathFrame: CGFrame) -> UIImage {
UIGraphicsBeginImageContext(self.size)
let context = UIGraphicsGetCurrentContext()!
context.saveGState()
path.addClip()
draw(in: CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height))
let maskedImage = UIGraphicsGetImageFromCurrentImageContext()!
context.restoreGState()
UIGraphicsEndImageContext()
return maskedImage
}
}
You need to add your path.cgPath to your current context, also you need to remove context.saveGState() and context.restoreGState()
Use this code
func imageByApplyingMaskingBezierPath(_ path: UIBezierPath, _ pathFrame: CGRect) -> UIImage {
UIGraphicsBeginImageContext(self.size)
let context = UIGraphicsGetCurrentContext()!
context.addPath(path.cgPath)
context.clip()
draw(in: CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height))
let maskedImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return maskedImage
}
Using it
let testPath = UIBezierPath()
testPath.move(to: CGPoint(x: self.imageView.frame.width / 2, y: self.imageView.frame.height))
testPath.addLine(to: CGPoint(x: 0, y: 0))
testPath.addLine(to: CGPoint(x: self.imageView.frame.width, y: 0))
testPath.close()
self.imageView.image = UIImage(named:"Image")?.imageByApplyingMaskingBezierPath(testPath, self.imageView.frame)
Result
You can try like this.
var path = UIBezierPath()
var shapeLayer = CAShapeLayer()
var cropImage = UIImage()
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
if let touch = touches.first as UITouch?{
let touchPoint = touch.location(in: self.YourimageView)
print("touch begin to : \(touchPoint)")
path.move(to: touchPoint)
}
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
if let touch = touches.first as UITouch?{
let touchPoint = touch.location(in: self.YourimageView)
print("touch moved to : \(touchPoint)")
path.addLine(to: touchPoint)
addNewPathToImage()
}
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
if let touch = touches.first as UITouch?{
let touchPoint = touch.location(in: self.YourimageView)
print("touch ended at : \(touchPoint)")
path.addLine(to: touchPoint)
addNewPathToImage()
path.close()
}
}
func addNewPathToImage(){
shapeLayer.path = path.cgPath
shapeLayer.strokeColor = strokeColor.cgColor
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.lineWidth = lineWidth
YourimageView.layer.addSublayer(shapeLayer)
}
func cropImage(){
UIGraphicsBeginImageContextWithOptions(YourimageView.bounds.size, false, 1)
tempImageView.layer.render(in: UIGraphicsGetCurrentContext()!)
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
self.cropImage = newImage!
}
#IBAction func btnCropImage(_ sender: Any) {
cropImage()
}
Once you draw a path on particular button action just call your imageByApplyingMaskingBezierPath
Here is Swift code to get clips from an image based on a UIBezierPath and it is very quickly implemented. This method works if the image is already being shown on the screen, which will most often be the case. The resultant image will have a transparent background, which is what most people want when they clip part of a photo image. You can use the resultant clipped image locally because you will have it in a UIImage object that I called imageWithTransparentBackground. This very simple code also shows you how to save the image to the camera roll, and how to also put it right into the pasteboard so a user can paste that image directly into a text message, paste it into Notes, an email, etc. Note that in order to write the image to the camera roll, you need to edit the info.plist and provide a reason for “Privacy - Photo Library Usage Description”
import Photos // Needed if you save to the camera roll
Provide a UIBezierPath for clipping. Here is my declaration for one.
let clipPath = UIBezierPath()
Populate the clipPath with some logic of your own using some combination of commands. Below are a few I used in my drawing logic. Provide CGPoint equivalents for aPointOnScreen, etc Build your path relative to the main screen as self.view is this apps ViewController (for this code), and self.view.layer is rendered through the clipPath.
clipPath.move(to: aPointOnScreen)
clipPath.addLine(to: otherPointOnScreen)
clipPath.addLine(to: someOtherPointOnScreen)
clipPath.close()
This logic uses all of the devices screen as the context size. A CGSize is declared for that. fullScreenX and fullScreenY are my variables where I have already captured the devices width and height. It is nice if the photo you are clipping from is already zoomed into and is an adequate size as shown on the whole of the screen. What you see, is what you get.
let mainScreenSize = CGSize(width: fullScreenX, height: fullScreenY)
// Get an empty context
UIGraphicsBeginImageContext(mainScreenSize)
// Specify the clip path
clipPath.addClip()
// Render through the clip path from the whole of the screen.
self.view.layer.render(in: UIGraphicsGetCurrentContext()!)
// Get the clipped image from the context
let image : UIImage = UIGraphicsGetImageFromCurrentImageContext()!
// Done with the context, so end it.
UIGraphicsEndImageContext()
// The PNG data has the alpha channel for the transparent background
let imageData = image.pngData()
// Below is the local UIImage to use within your code
let imageWithTransparentBackground = UIImage.init(data: imageData!)
// Make the image available to the pasteboard.
UIPasteboard.general.image = imageWithTransparentBackground
// Save the image to the camera roll.
PHPhotoLibrary.shared().performChanges({
PHAssetChangeRequest.creationRequestForAsset(from: imageWithTransparentBackground!)
}, completionHandler: { success, error in
if success {
//
}
else if let error = error {
//
}
else {
//
}
})
I am attempting to make an image editing VC for my app and encountered the above issue. Whenever I start drawing on my image, the image would warp and then lose the aspect ratio.
Gif is:
My full code is:
class DrawImageController: UIViewController {
var canvasImageView: UIImageView = {
let iv = UIImageView()
iv.translatesAutoresizingMaskIntoConstraints = false
iv.backgroundColor = .yellow
iv.contentMode = .scaleAspectFit
return iv
}()
var lastTouch = CGPoint.zero
override func viewDidLoad() {
super.viewDidLoad()
setupViews()
}
func setupViews() {
view.backgroundColor = .black
view.addSubview(canvasImageView)
canvasImageView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
canvasImageView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
canvasImageView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
canvasImageView.heightAnchor.constraint(equalToConstant: 300).isActive = true
canvasImageView.image = UIImage(named: "testImage")
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
if let firstTouch = touches.first {
lastTouch = firstTouch.location(in: canvasImageView)
}
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
if let firstTouch = touches.first {
let touchLocation = firstTouch.location(in: canvasImageView)
drawLine(from: lastTouch, to: touchLocation)
lastTouch = touchLocation
}
}
func drawLine(from: CGPoint, to: CGPoint) {
UIGraphicsBeginImageContext(canvasImageView.frame.size)
if let context = UIGraphicsGetCurrentContext() {
canvasImageView.image?.draw(in: CGRect(x: 0, y: 0, width: canvasImageView.frame.size.width, height: canvasImageView.frame.size.height))
context.move(to: from)
context.addLine(to: to)
context.setLineCap(.round)
context.setLineWidth(5.0)
context.setStrokeColor(UIColor.blue.cgColor)
context.strokePath()
let image = UIGraphicsGetImageFromCurrentImageContext()
canvasImageView.image = image
UIGraphicsEndImageContext()
}
}
}
I adapted my draw method from various tutorials on YouTube, GitHub and SO. Where have I gone wrong?
Solved
With the advice from #Sweeper, I have modified my code in setupViews() and drawLine to account for aspect ratio of the image and imageView.
func setupViews() {
view.backgroundColor = .black
view.addSubview(canvasImageView)
canvasImageView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
canvasImageView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
canvasImageView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
let aspectRatio = getImageAspectRatio(image: UIImage(named: "testImage")!)
let screenWidth = UIScreen.main.bounds.width
let height = CGFloat(1.0) / aspectRatio * screenWidth
canvasImageView.heightAnchor.constraint(equalToConstant: height).isActive = true
canvasImageView.image = UIImage(named: "testImage")
}
func drawLine(from: CGPoint, to: CGPoint) {
UIGraphicsBeginImageContext(canvasImageView.frame.size)
guard let context = UIGraphicsGetCurrentContext() else {return}
if let canvasImage = canvasImageView.image {
let imageViewAspectRatio = getAspectRatio(frame: canvasImageView.frame)
let imageAspectRatio = getImageAspectRatio(image: canvasImage)
if imageViewAspectRatio > imageAspectRatio {
canvasImageView.image?.draw(in: CGRect(x: 0, y: 0, width: imageAspectRatio * canvasImageView.frame.size.height, height: canvasImageView.frame.size.height))
} else if imageViewAspectRatio < imageAspectRatio {
canvasImageView.image?.draw(in: CGRect(x: 0, y: 0, width: canvasImageView.frame.size.width, height: CGFloat(1.0) / imageAspectRatio * canvasImageView.frame.size.width))
} else {
canvasImageView.image?.draw(in: CGRect(x: 0, y: 0, width: canvasImageView.frame.size.width, height: canvasImageView.frame.size.height))
}
context.move(to: from)
context.addLine(to: to)
context.setLineCap(.round)
context.setLineWidth(5.0)
context.setStrokeColor(UIColor.blue.cgColor)
context.strokePath()
let image = UIGraphicsGetImageFromCurrentImageContext()
canvasImageView.image = image
UIGraphicsEndImageContext()
}
}
The problem is here:
canvasImageView.image?.draw(in: CGRect(x: 0, y: 0, width: canvasImageView.frame.size.width, height: canvasImageView.frame.size.height))
You are drawing the image using the image view's frame. This stretches the image.
You need to draw the image as if contentMode is .scaleAspectFit.
To do this, first determine the image's aspect ratio (W:H). You can do this by access the size property of UIImage. Compare this ratio to the aspect ratio of the image view.
If the image's ratio is smaller than the view's, then that means the height at which you draw the image can be the same as the image view height, and the image width can be calculated using the aspect ratio of the image.
If the image's ratio is larger than the view's, then that means the width at which you draw the image can be the same as the image view width, and the image height can be calculated,
So in my swift app I'm allowing the user to paint with there finger on touch. I'm using cgcontext to do this. After the user lifts the finger and the touch ends I am dynamically adding a visualeffect view on top of the shape with the same height and width of the drawn shape. What i want to do next is use the shape as a mask for visualeffect view. The problem right now is if i try to mask the visualeffect view with the shape. the masked view does not show unless the origin point of the shape is (0,0). Here is a link to how i'm currently attempting to implementing this (https://pastebin.com/JaM9kx4G)
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
swiped = false
if let touch = touches.first as? UITouch {
if (touch.view == sideView){
return
}
tempPath = UIBezierPath()
lastPoint = touch.location(in: view)
tempPath.move(to:lastPoint)
}
}
func drawLineFrom(fromPoint: CGPoint, toPoint: CGPoint) {
tempPath.addLine(to: CGPoint(x: toPoint.x, y: toPoint.y))
UIGraphicsBeginImageContext(view.frame.size)
let context = UIGraphicsGetCurrentContext()
otherImageView.image?.draw(in: CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height))
// 2
context!.move(to: CGPoint(x:fromPoint.x,y:fromPoint.y))
context!.addLine(to: CGPoint(x:toPoint.x, y:toPoint.y))
// 3
context!.setLineCap(CGLineCap.round)
context!.setLineWidth(brushWidth)
context!.setStrokeColor(red: red, green: green, blue: blue, alpha: 1.0)
context!.setBlendMode(CGBlendMode.normal)
// 4
context!.strokePath()
// 5
otherImageView.image = UIGraphicsGetImageFromCurrentImageContext()
otherImageView.alpha = opacity
UIGraphicsEndImageContext()
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
swiped = true
if let touch = touches.first as? UITouch {
let currentPoint = touch.location(in: view)
drawLineFrom(fromPoint: lastPoint, toPoint: currentPoint)
// 7
lastPoint = currentPoint
}
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
tempPath.close()
let tempImage = UIImageView(frame: CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height))
UIGraphicsBeginImageContext(tempImage.frame.size)
tempImage.image?.draw(in: CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height), blendMode: CGBlendMode.normal, alpha: 1.0)
otherImageView.image?.draw(in: CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height), blendMode: CGBlendMode.normal, alpha: opacity)
let context = UIGraphicsGetCurrentContext()
let image = UIGraphicsGetImageFromCurrentImageContext()
tempImage.image = image
otherImageView.image = nil
imageView.addSubview(tempImage)
let blur = VisualEffectView()
blur.frame = CGRect(x:tempPath.bounds.origin.x,y:tempPath.bounds.origin.y, width:tempPath.bounds.width, height:tempPath.bounds.height)
blur.blurRadius = 5
blur.layer.mask = tempImage.layer
}
The Problem
This is going to sound crazy. I'm making a drawing app and I want users to be able to draw on images that are bigger or smaller than the screen. So when the user selects an image from his photo library it is put into an image view in a scroll view. The user draws on image views that are the same dimensions as the selected image and in another scroll view on top of the other one. The scrolling of the two scroll views is synchronized so when you draw then scroll the drawing appears to be above the image (in the right place). For some reason however, when the user selects a long image (let's say 400 x 2000), the drawing works at the top of the image, but when you scroll down to draw, the lines you draw go to the top. I can't figure out what's going wrong... My code is below.
About The Code
cameraStill is the image view containing the image
drawable is the height of the image
myScroll is the scroll view for the image
mainImageView, tempImageView, undo1, undo2, undo3 are the drawing layers
drawScroll is the scroll view for the drawing layers
Image Selection
func imagePickerController(picker: UIImagePickerController, didFinishPickingImage image: UIImage!, editingInfo: [NSObject : AnyObject]!) {
self.dismissViewControllerAnimated(true, completion: { () -> Void in
})
if (image != nil) {
self.cameraStill.contentMode = UIViewContentMode.ScaleAspectFit
cameraStill.frame = CGRectMake(0, 0, screenWidth, screenWidth*(image.size.height/image.size.width))
// change uiimageivews size
mainImageView.frame = CGRectMake(0, 0, screenWidth, screenWidth*(image.size.height/image.size.width))
tempImageView.frame = CGRectMake(0, 0, screenWidth, screenWidth*(image.size.height/image.size.width))
undo1.frame = CGRectMake(0, 0, screenWidth, screenWidth*(image.size.height/image.size.width))
undo2.frame = CGRectMake(0, 0, screenWidth, screenWidth*(image.size.height/image.size.width))
undo3.frame = CGRectMake(0, 0, screenWidth, screenWidth*(image.size.height/image.size.width))
drawable = screenWidth*(image.size.height/image.size.width)
myScroll.contentSize = CGSize(width: screenWidth,height: screenWidth*(image.size.height/image.size.width))
drawScroll.contentSize = CGSize(width: screenWidth,height: screenWidth*(image.size.height/image.size.width))
if (screenWidth*(image.size.height/image.size.width) > (screenHeight-130)) {
myScroll.scrollEnabled = true
drawScroll.scrollEnabled = true
}
else {
myScroll.scrollEnabled = false
drawScroll.scrollEnabled = false
cameraStill.center = CGPoint(x: screenWidth/2, y: (screenHeight-130)/2)
mainImageView.center = CGPoint(x: screenWidth/2, y: (screenHeight-130)/2)
tempImageView.center = CGPoint(x: screenWidth/2, y: (screenHeight-130)/2)
undo1.center = CGPoint(x: screenWidth/2, y: (screenHeight-130)/2)
undo2.center = CGPoint(x: screenWidth/2, y: (screenHeight-130)/2)
undo3.center = CGPoint(x: screenWidth/2, y: (screenHeight-130)/2)
}
self.camera!.stopCamera()
}
//drawView.alpha = 1.0
}
Drawing
override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent) {
println("began")
if (drawingEnabled == true) {
c1 = 3
closeAllExtras()
swiped = false
if let touch = touches.first as? UITouch {
lastPoint = touch.locationInView(self.view)
}
}
}
func drawLineFrom(fromPoint: CGPoint, toPoint: CGPoint) {
//if (fromPoint.y > 50 && fromPoint.y < screenHeight-80 && toPoint.y > 50 && toPoint.y < screenHeight-80) {
// 1
UIGraphicsBeginImageContext(CGSize(width: view.frame.size.width,height: drawable))
let context = UIGraphicsGetCurrentContext()
tempImageView.image?.drawInRect(CGRect(x: 0, y: 0, width: view.frame.size.width, height: drawable))
// 2
CGContextMoveToPoint(context, fromPoint.x, fromPoint.y)
CGContextAddLineToPoint(context, toPoint.x, toPoint.y)
// 3
CGContextSetLineCap(context, kCGLineCapRound)
CGContextSetLineWidth(context, brushWidth)
CGContextSetRGBStrokeColor(context, red, green, blue, 1.0)
CGContextSetBlendMode(context, kCGBlendModeNormal)
// 4
CGContextStrokePath(context)
// 5
tempImageView.image = UIGraphicsGetImageFromCurrentImageContext()
tempImageView.alpha = opacity
UIGraphicsEndImageContext()
//}
}
override func touchesMoved(touches: Set<NSObject>, withEvent event: UIEvent) {
// 6
if (drawingEnabled == true) {
swiped = true
if let touch = touches.first as? UITouch {
let currentPoint = touch.locationInView(view)
drawLineFrom(lastPoint, toPoint: currentPoint)
// 7
lastPoint = currentPoint
}
}
}
func mergeViewContext(v1 : UIImageView, v2: UIImageView) {
UIGraphicsBeginImageContext(v1.frame.size)
v1.image?.drawInRect(CGRect(x: 0, y: 0, width: view.frame.size.width, height: drawable), blendMode: kCGBlendModeNormal, alpha: 1.0)
v2.image?.drawInRect(CGRect(x: 0, y: 0, width: view.frame.size.width, height: drawable), blendMode: kCGBlendModeNormal, alpha: 1.0)
v1.image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
v2.image = nil
}
override func touchesEnded(touches: Set<NSObject>, withEvent event: UIEvent) {
if (drawingEnabled == true) {
if !swiped {
// draw a single point
drawLineFrom(lastPoint, toPoint: lastPoint)
}
mergeViewContext(mainImageView, v2: undo1)
undo1.image = undo2.image
undo2.image = nil
undo2.image = undo3.image
undo3.image = nil
UIGraphicsBeginImageContext(undo3.frame.size)
undo3.image?.drawInRect(CGRect(x: 0, y: 0, width: view.frame.size.width, height: drawable), blendMode: kCGBlendModeNormal, alpha: 1.0)
tempImageView.image?.drawInRect(CGRect(x: 0, y: 0, width: view.frame.size.width, height: drawable), blendMode: kCGBlendModeNormal, alpha: opacity)
undo3.image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
tempImageView.image = nil
}
Synching Both Scroll Views
func scrollViewDidScroll(scrollView: UIScrollView) {
if (scrollView == drawScroll) {
var offset = scrollView.contentOffset
myScroll.setContentOffset(offset, animated: false)
}
}
I got it to work by correcting the following values with the offset of the scroll view. However, I get some blurring for long images and a very strange bug with short ones. No idea what's wrong.
CGContextMoveToPoint(context, fromPoint.x, fromPoint.y)
CGContextAddLineToPoint(context, toPoint.x, toPoint.y)
I followed a raywenderlich tutorial on using the UIKit to make a drawing app. I'm now trying to add in the functionality to undo the last stroke. Ideally I would like to undo up to 10ish strokes. I'm trying to figure out what is the best way to go about doing this. I was thinking of creating another ImageView which has only the last stroke and making the ImageView.image = nil when the user presses back. In the code from the tutorial there's something similar to this. When the touches end, the newest stroke is merged onto the imageview with all of the old ones at the right opacity. I'm not really sure how I could add this third (and potentially more) imageivews to this code to make it work. Any ideas / a better way to go about this? Code for touchesEnded is below.
Code
override func touchesEnded(touches: Set<NSObject>, withEvent event: UIEvent) {
if !swiped {
// draw a single point
drawLineFrom(lastPoint, toPoint: lastPoint)
}
// Merge tempImageView into mainImageView
UIGraphicsBeginImageContext(mainImageView.frame.size)
mainImageView.image?.drawInRect(CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height), blendMode: kCGBlendModeNormal, alpha: 1.0)
tempImageView.image?.drawInRect(CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height), blendMode: kCGBlendModeNormal, alpha: opacity)
mainImageView.image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
tempImageView.image = nil
}
#SpaceShroomies: I found/came up with a great solution..
I used parts from nsHiptser, and from the Raywenderlich tutorial.
And here i my solution:
override func touchesEnded(touches: Set<NSObject>, withEvent event: UIEvent) {
//undoManager
let undo: UIImageView = undoManager?.prepareWithInvocationTarget(Temp2Image) as! UIImageView
UIGraphicsBeginImageContext(Temp2Image.frame.size)
Temp2Image.image?.drawInRect(CGRect(x: 0, y: 0, width: Temp2Image.frame.size.width, height: Temp2Image.frame.size.height), blendMode: kCGBlendModeNormal, alpha: 1.0)
TempImage.image?.drawInRect(CGRect(x: 0, y: 0, width: TempImage.frame.size.width, height: TempImage.frame.size.height), blendMode: kCGBlendModeNormal, alpha: opacity)
undo.image = Temp2Image.image
Temp2Image.image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
TempImage.image = nil
}
The important thing here is to set, what UNDO should go back to I.e. undo.image = Temp2Image.image otherwise it will not change "it" back
So I managed to get an undo function working for one step backwards by having a UIImageView that stores the last stroke before it's added to the rest of the strokes when the next stroke is complete... Would there be something wrong with using the same technique to go backwards 10 steps? I would need 10 UIImageViews... Would that be inefficient / cause crashing? The code is below:
override func touchesEnded(touches: Set<NSObject>, withEvent event: UIEvent) {
if !swiped {
// draw a single point
drawLineFrom(lastPoint, toPoint: lastPoint)
}
UIGraphicsBeginImageContext(mainImageView.frame.size)
mainImageView.image?.drawInRect(CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height), blendMode: kCGBlendModeNormal, alpha: 1.0)
undo1.image?.drawInRect(CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height), blendMode: kCGBlendModeNormal, alpha: 1.0)
mainImageView.image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
undo1.image = nil
UIGraphicsBeginImageContext(undo1.frame.size)
undo1.image?.drawInRect(CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height), blendMode: kCGBlendModeNormal, alpha: 1.0)
tempImageView.image?.drawInRect(CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height), blendMode: kCGBlendModeNormal, alpha: opacity)
undo1.image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
tempImageView.image = nil
}