An open source library that lets your users draw on things - mark up images with text, shapes, etc.

Overview

Drawsana 0.12.0

Drawsana is a generalized framework for making freehand drawing views on iOS. You can let users scribble over images, add shapes and text, and even make your own tools.

Do you want to let your users mark up images? Are you writing a simple painting app? Drawsana might work for you!

Demo source code

Docs

Blog post: Let your users mark up images on iOS with Drawsana

Like what you see? Come work with us!

Features

  • Built-in tools
    • Pen with line smoothing
    • Eraser
    • Ellipse, rect, line, arrow
    • Selection
    • Text
  • Undo/redo
  • Drawings are Codable, so you can save and load them
  • Extensible—make your own shapes and tools without forking the library

screenshot

Installation

Add Asana/Drawsana to your Cartfile and update your project like you would for any other Carthage framework, or clone the source code and add the project to your workspace.

github "Asana/Drawsana" == 0.12.0

Usage

import Drawsana

class MyViewController: UIViewController {
  let drawsanaView = DrawsanaView()
  let penTool = PenTool()
  
  func viewDidLoad() {
    /* ... */
    drawsanaView.set(tool: penTool)
    drawsanaView.userSettings.strokeWidth = 5
    drawsanaView.userSettings.strokeColor = .blue
    drawsanaView.userSettings.fillColor = .yellow
    drawsanaView.userSettings.fontSize = 24
    drawsanaView.userSettings.fontName = "Marker Felt"
  }
  
  func save() {
    let jsonEncoder = JSONEncoder()
    jsonEncoder.outputFormatting = [.prettyPrinted, .sortedKeys]
    let jsonData = try! jsonEncoder.encode(drawingView.drawing)
    // store jsonData somewhere
  }
  
  func load() {
    let data = // load data from somewhere
    let jsonDecoder = JSONDecoder()
    let drawing = try! jsonDecoder.decode(Drawing.self, from: jsonData)
    drawsanaView.drawing = drawing
  }
  
  func showFinalImage() {
    imageView.image = drawsanaView.render() 
  }
}

Background images

Drawsana does not currently have a way to automatically show an image under your drawing. We recommend that, like in the example class, you add a UIImageView underneath your DrawsanaView and make sure your DrawsanaView's frame matches the image frame. When it's time to get the final image, use DrawsanaView.render(over: myImage).

Building docs

sudo gem install jazzy
make docs
open .docs/index.html

pip install ghp-import
make publish-docs
open https://asana.github.io/Drawsana

Changelog

0.12.0

  • Undo operations are now accessible outside the framework to enable you to make undoable changes with your own UI.
    • AddShapeOperation
    • RemoveShapeOperation
    • ChangeTransformOperation
    • EditTextOperation
    • ChangeExplicitWidthOperation
  • Fix drawing view not being redrawn after being resized.
  • Fix bugs related to color serialization.
  • Fix bugs related to text entry.

0.11.0

  • DrawingOperationStack.clearRedoStack() clears all redo operations from the redo stack.
  • DrawingToolForShapeWithThreePoints and DrawingToolForShapeWithTwoPoints are declared open instead of public so they can be subclassed.
  • PenShape now works with the selection tool.
  • DrawsanaView.selectionIndicatorAnchorPointOffset allows Drawsana to keep working when you change the anchorPoint.
  • Shape.id is now settable.
  • Fix bug that prevented character input of some languages, including Chinese.
  • Fix bugs in gesture recognizer.

0.10.0

  • Convert to Swift 5
  • Fix NgonShape and TextShape serialization bugs. Old data can't be fixed, but new data will be correct.
  • Deserialization error reporting is more detailed. Shapes that find a JSON object with the correct type will now throw errors instead of causing the whole operation to silently fail, as long as you enable Drawing.debugSerialization.
  • Replacing DrawingView.drawing now behaves correctly instead of being unusably buggy.
  • PenLineSegment's members are now public.
  • ShapeTransform and PenLineSegment are now Equatable.

0.9.4

  • Star, triangle, pentagon, and angle tools
  • DrawsanaView.render() accepts a scale parameter instead of always using zero

0.9.2

  • Convert to Swift 4.2
  • CocoaPods support

0.9.1

  • DrawsanaView.selectionIndicatorViewShapeLayer is exposed, allowing you to more easily customize the appearance of the selection indicator
  • Changes to DrawsanaView.selectionIndicatorView's style are animated in fewer cases, which more closely matches user intent
  • Improved text tool use in the demo app

0.9.0

Initial release

Comments
  • StarTool_PentagonTool_TriangleTool and related files are missing from pod version

    StarTool_PentagonTool_TriangleTool and related files are missing from pod version

    Hi first thanks for the library. Second, pod version have some files missing.

    StarTool_PentagonTool_TriangleTool StarShape NgonShape

    and can you open DrawingToolForShapeWithTwoPoints so i can manually add or create new shapes of needed? for now adding StarTool_PentagonTool_TriangleTool results in

    Cannot inherit from non-open class 'DrawingToolForShapeWithTwoPoints' outside of its defining

    opened by sameer4 8
  • Canvas view is not recognising touches after coming from background (device: iPad)

    Canvas view is not recognising touches after coming from background (device: iPad)

    When the app is sent to background via sliding from the bottom and then opening the app, the touches are not recognizing again and getting below crash.

    assert(false, "State not handled") (DrawsanaView.swift -> 302 line)

    bug 
    opened by ghost 7
  • Text tool's bounding rect is lost in serialization roundtrip

    Text tool's bounding rect is lost in serialization roundtrip

    Loading a json file back in to the Drawing view works with the exception of Text objects and Ngon shapes. The text objects don't render and the Ngon shapes raise exception. It looks like the sides property is erroring on a nil exception.

    bug 
    opened by jeffstay 7
  • Shapes not added to Decoded Drawing

    Shapes not added to Decoded Drawing

    Drawing (only tested pen strokes) on a decoded drawing does not add shapes to the shapes array of that drawing. The new shapes still appear on the drawing, but since they're not added to the array they're not encoded if you want to save the drawing.

    Edit: Never mind, they are being added to the drawing. But somehow, new shapes on a decoded drawing aren't being properly encoded.

    bug 
    opened by eimlaymaire 4
  • Question: ViewWillAppear vs ViewDidAppear to load drawing

    Question: ViewWillAppear vs ViewDidAppear to load drawing

    I have stored the JSON string of the drawing and want to reload it back into DrawingView.

    func loadScratchText() {
            let jsonDecoder = JSONDecoder()
            let scratchText = self.viewModel.scratchText
            print("scratchText: \(scratchText)")
            guard let jsonData = scratchText.data(using: .utf8) else {
                return
            }
            guard let drawing = try? jsonDecoder.decode(Drawing.self, from: jsonData) else {
                print("Unable to load scratch json")
                return
            }
            self.drawingView.drawing = drawing
            print(drawingView.drawing.shapes)
            print("")
        }
    

    If I call this function in viewWillAppear - it prints the shapes but the drawing is NOT visible. But when I use viewDidAppear - it does nicely render back the drawing.

    Is this expected behavior?

    thanks Ram

    opened by ramjyroo 3
  • Added a scale parameter to the renderImage class with the default value of 1

    Added a scale parameter to the renderImage class with the default value of 1

    Added a scale parameter to the renderImage class with the default value of 1. This is to fix a problem where the output image was rendering way bigger than the original image. The reason is that if we pass 0 as the scale on the method UIGraphicsBeginImageContextWithOptions the output is set to the scale factor of the device’s main screen creating images that may be 2x or 3x bigger than the original (depending on the device used)

    opened by echamussy 3
  • Eraser tool doesn't work if drawing was loaded from JSON

    Eraser tool doesn't work if drawing was loaded from JSON

    Hello! Eraser tool doesn't work on drawing view if it's drawing property was set. do { self.drawingView.drawing = try JSONDecoder().decode(Drawing.self, from: data) } catch let error { print(error) } Any suggestions? Thank you!

    bug 
    opened by StasMalinovsky 3
  • shapes not adding in the decoded drawing operation stack

    shapes not adding in the decoded drawing operation stack

    Hi,

    I am decoding drawing from data and adding them on the drawing view. When I added new pen stokes on the same same drawing view, those stokes are not added in the operation stack for me save decoded drawing + new pen stokes. If I saved, I am getting on old decoded layers only , new stokes are adding to the data.

    bug 
    opened by SanjeevSundaravarathan 2
  • Add straight line tool

    Add straight line tool

    I just made straight line tool. That helps draw a line parallel to the screen edge. The line is horizontal or vertical depending on touch moved direction.

    opened by jwthanh 2
  • Ability to delete an object that has been selected

    Ability to delete an object that has been selected

    Firstly this is a great little library! I was just checking if there is an ability to delete an object once it has been selected using the "Selection" tool.

    opened by philgrida 1
  • Restore 'drawing' will get incorrect fillColor

    Restore 'drawing' will get incorrect fillColor

    It seems the alpha part of UIColor not encode/decode correctly. Says if I set the fillColor to clear, after encode/decode, the fillColor changed to black.

    opened by Horse888 1
  • Drawsana is not having feature of zooming image

    Drawsana is not having feature of zooming image

    We have integrated Drawsana inside our project and its working great....

    And we also would like to zoom that image while editing, but I can't find any way to zoom image while editing..

    Help will be appreciated...

    opened by saurabhc-ecsion 3
  • [Bug] Text tool + Orientation Change

    [Bug] Text tool + Orientation Change

    Hello,

    Steps to reproduce:

    1. open the app (the bug can be found in the sample app)
    2. activate the text tool
    3. use the resize & rotate
    4. change orientation of the device at least 2 times. (the more you do it, the more the bug is pronounced)

    Device: iPad (or on an app that are orientation free)

    Discovered on iPad Pro 11" iOS 15.4

    Hint: I guess the bug is at the handling of the drawing with the transform, and the anchor points make the box move

    Thanks !

    opened by clementnonn 1
Releases(0.12.0)
  • 0.12.0(Aug 26, 2020)

    • Undo operations are now accessible outside the framework to enable you to make undoable changes with your own UI.
      • AddShapeOperation
      • RemoveShapeOperation
      • ChangeTransformOperation
      • EditTextOperation
      • ChangeExplicitWidthOperation
    • Fix drawing view not being redrawn after being resized.
    • Fix bugs related to color serialization.
    • Fix bugs related to text entry.
    Source code(tar.gz)
    Source code(zip)
  • 0.11.0(Apr 22, 2020)

    • DrawingOperationStack.clearRedoStack() clears all redo operations from the redo stack.
    • DrawingToolForShapeWithThreePoints and DrawingToolForShapeWithTwoPoints are declared open instead of public so they can be subclassed.
    • PenShape now works with the selection tool.
    • DrawsanaView.selectionIndicatorAnchorPointOffset allows Drawsana to keep working when you change the anchorPoint.
    • Shape.id is now settable.
    • Fix bug that prevented character input of some languages, including Chinese.
    • Fix bugs in gesture recognizer.
    Source code(tar.gz)
    Source code(zip)
  • 0.9.2(Nov 5, 2018)

Design shapes in Interface Builder

EPShapes Create shapes(Polygons, Stars, Hearts, Arrows) in Interface builder using IBInspectable and IBDesignable Features Design shapes in interface

Praba 390 Dec 27, 2022
The application is develop in Objective IOS. kids can draw whatever they want and also kids can save the drawing as well as undo erase the drawing.

IOSObjC_KidsBoard The application is develop in Objective IOS. kids can draw whatever they want and also kids can save the drawing as well as undo era

Haresh 0 Oct 28, 2021
An iOS framework for easily adding drawings and text to images.

jot is an easy way to add touch-controlled drawings and text to images in your iOS app. What's jot for? Annotating Images jot is the easiest way to ad

IFTTT 1.8k Oct 28, 2022
Display and interact with SVG Images on iOS / OS X, using native rendering (CoreAnimation)

SVGKit SVGKit is a Cocoa framework for rendering SVG files natively: it's fast and powerful. Some additional info and links are on the wiki Versions:

null 4.3k Jan 3, 2023
Visual designing library for iOS & OSX

ProcessingKit ProcessingKit is a Visual designing library for iOS & OSX. ProcessingKit written in Swift ?? and you can write like processing. Demo Dem

Atsuya Sato 333 Nov 12, 2022
Powerful and easy-to-use vector graphics Swift library with SVG support

Macaw Powerful and easy-to-use vector graphics Swift library with SVG support We are a development agency building phenomenal apps. What is Macaw? Mac

Exyte 5.9k Jan 2, 2023
Mark - Xcode extension for generating MARK comments.

Mark Xcode extension for automatic generation of MARK comments. Why? If you would like to organize your code with MARK comments, this will save you so

Velislava Yanchina 160 Dec 17, 2022
PinpointKit is an open-source iOS library in Swift that lets your testers and users send feedback with annotated screenshots using a simple gesture.

PinpointKit is an open-source iOS library in Swift that lets your testers and users send feedback with annotated screenshots using a simple gesture. F

Lickability 1.1k Jan 6, 2023
Rough lets you draw in a sketchy, hand-drawn-like, style.

Rough (Swift) Rough lets you draw in a sketchy, hand-drawn-like, style. It is Swift clone of Rough.js. The library defines primitives to draw lines, c

null 96 Nov 24, 2022
Rough lets you draw in a sketchy, hand-drawn-like, style.

Rough (Swift) Rough lets you draw in a sketchy, hand-drawn-like, style. It is Swift clone of Rough.js. The library defines primitives to draw lines, c

null 96 Nov 24, 2022
SwiftGen is a tool to automatically generate Swift code for resources of your projects (like images, localised strings, etc), to make them type-safe to use.

SwiftGen is a tool to automatically generate Swift code for resources of your projects (like images, localised strings, etc), to make them type-safe to use.

null 8.3k Jan 5, 2023
Simple coach mark library written in Swift

Minamo Simple coach mark library written in Swift Usage Initialize let rippeleView = RippleView() rippeleView.tintColor = UIColor(red: 0.3, green: 0.7

yukiasai 248 Nov 24, 2022
An iOS app to turn typed text into images of handwritten text in your own handwriting style.

Text-to-Handwritting © 2021 by Daniel Christopher Long An iOS app to turn typed text into images of handwritten text in your own handwriting style. ht

Daniel Long 11 Dec 29, 2022
An open source iOS app that lets you use one device as a camera and another as a remote control for the camera

Q: What is Open Source Selfie Stick? A: With this free app you can use any iPhone or iPad as a remote control for the camera on any other iPhone or iP

Richard Nelson 43 Jan 5, 2023
TextFieldFormatter - Simple Text Formatter (Credit Card Number, Phone Number, Serial Number etc.)

TextFieldFormatter Simple Text Formatter (Credit Card Number, Phone Number, Seri

Anıl ORUÇ 4 Apr 4, 2022
Marky Mark is a parser written in Swift that converts markdown into native views.

Marky Mark is a parser written in Swift that converts markdown into native views. The way it looks it highly customizable and the supported markdown syntax is easy to extend.

M2mobi 287 Nov 29, 2022
A Pure Swift implementation of the markdown mark-up language

SmarkDown A pure Swift markdown implementation consistent with Gruber's 1.0.1 version. It is released under the BSD license so please feel free to use

Swift Studies 67 Jan 24, 2022
null 4 May 22, 2022
Text-cli - Command line tool for extracting text from images using Apple's Vision framework

text-cli Command line tool for extracting text from images using Apple's Vision

San Francisco International Airport Museum 9 Aug 29, 2022
Kanvas is an open-source iOS library for adding effects, drawings, text, stickers, and making GIFs from existing media or the camera.

Kanvas Kanvas is an open-source iOS library for adding effects, drawings, text, stickers, and making GIFs from existing media or the camera.

Tumblr 267 Nov 24, 2022