• Stars
    star
    645
  • Rank 69,781 (Top 2 %)
  • Language
    Swift
  • License
    MIT License
  • Created about 6 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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

More Repositories

1

typed-react

A binding layer between React and TypeScript
TypeScript
373
star
2

kraken

Distributed Pubsub Server for Realtime Apps
Erlang
335
star
3

python-asana

Official Python client library for the Asana API v1
Python
280
star
4

node-asana

Official node.js and browser JS client for the Asana API v1
JavaScript
249
star
5

Chrome-Extension-Example

Sample application illustrating use of the Asana API
JavaScript
232
star
6

php-asana

Official PHP client library for the Asana API v1
PHP
135
star
7

locheck

Validate iOS, Android, and Mac localizations. Find errors in .strings, .stringsdict, and strings.xml files.
Swift
97
star
8

bazels3cache

Small web server for a Bazel cache, proxies to S3; allows Bazel to work offline; async uploads to make Bazel faster
TypeScript
79
star
9

ruby-asana

Official Ruby client library for the Asana API v1
Ruby
76
star
10

bazeltsc

TypeScript compiler that knows how to run as a Bazel "persistent worker"
TypeScript
39
star
11

java-asana

Official Java client library for the Asana API v1
Java
35
star
12

create-app-attachment-github-action

TypeScript
33
star
13

devrel-examples

A place to share some examples from our Developer Relations team for commonly-asked-about workflows.
Python
27
star
14

comment-on-task-github-action

TypeScript
25
star
15

asana2sql

Utility for exporting Asana data to SQL databases
Python
23
star
16

api-explorer

React component to explore the Asana API
TypeScript
19
star
17

omniauth-asana

Official Asana strategy for OmniAuth
Ruby
16
star
18

SGTM

Python
14
star
19

asana-api-meta

Metadata for Asana API for generating client libraries and documenation
HTML
11
star
20

kraken-node-client

A nodejs client for the Kraken pubsub server
JavaScript
10
star
21

tsutil

TypeScript Utility Data Structures
TypeScript
9
star
22

node-asana-phrase

A random error phrase generator used to create memorable error codes, as used by Asana.
JavaScript
9
star
23

typescript-namespace-imports-vscode-plugin

A VSCode plugin that makes it easier to automatically include TypeScript namespace imports.
TypeScript
6
star
24

asana-shift

A small node script which uses the Asana API to shift all task start and due dates relative to a project's due date.
TypeScript
5
star
25

markdown-formatter

JavaScript
5
star
26

random-one-on-one

Python
5
star
27

app-components-example-app

app-components-example-app
JavaScript
4
star
28

ohmega

The Asana Ohmega process automation toolkit
Python
4
star
29

openapi

Python
4
star
30

sshca

Certificate authority for OpenSSH
Python
3
star
31

jira-server-plugin

Asana for Jira Server
3
star
32

node-asana-preview

A preview of Asana's new node client library
JavaScript
3
star
33

app-components-rule-action-example-app

JavaScript
3
star
34

python-asana-preview

A preview of Asana's new python client library
Python
3
star
35

node-sync-to-github

A node library that makes it easy to sync a directory of files to a GitHub repo using the GitHub API
JavaScript
3
star
36

deprovision_inactive_guests

A small script which uses the Asana API to remove external users (ie without a company email) from an organization if they haven't logged in for 30 days
JavaScript
2
star
37

archie

Python
2
star
38

formula-custom-fields

JavaScript
1
star
39

node-linux-fork

An implementation of fork() for Node.JS in Linux (requires a custom Node.JS build)
C++
1
star