GithubHelp home page GithubHelp logo

asana / drawsana Goto Github PK

View Code? Open in Web Editor NEW
638.0 30.0 100.0 8.81 MB

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

Home Page: https://asana.github.io/Drawsana/

License: MIT License

Swift 99.26% Objective-C 0.29% Makefile 0.09% Ruby 0.35%
ios swift drawing markup asana

drawsana's Introduction

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

drawsana's People

Contributors

echamussy avatar edwinlai avatar horse888 avatar jwthanh avatar madan222 avatar max-christian avatar stevelandeyasana avatar thomasmfinalcad avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

drawsana's Issues

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...

Image not Save

when ever i picked large resolution image at that time i am getting nil image in UIGraphicsGetImageFromCurrentImageContext()

populate undostack or operation stack?

I am using drawsana to draw on an image, but i also have a tool which draws a circle with a number (a bullet) which i created with just a view on top of drawsana being interaction enabled when the tool is selected. I want to have these bullets be part of the operation stack. I am happy to create my own opStack but I cant seem to figure out how to have my view controller be notified when a drawing has taken place by drawsana, or when drawsanaView.operationStack has changed. Whenever I try to access anything i get a "'undoStack' is inaccessible due to 'internal' protection level". Is there a way to have a flag or listener for when drawsana draws on my current viewController?

[question] Is there a reason why the id of a Shape is a get-only-property?

When creating Shapes from a network-based update you have to downcast the shape to a subclass like LineShape or RectShape, if you want to set the id. Which leads to duplicate code.

So is there a reason why the id property of the shape protocol couldn't be settable?

public protocol Shape: AnyObject, Codable  #{
  /// Globally unique identifier for this shape. Meant to be used for equality
  /// checks, especially for network-based updates.
  var id: String { get }
  ...

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

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.

Image shape + tool

Can we give support for image addition as a shape layer just like any other drawing tool?

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.

Add resize/rotate to Selection tool

Hi,
Im looking for a solution how to resize or rotate shape after its drawn, the behaviour is only available in TextTool. How to do the same thing in other shapes?

Thanks,
Roger

Select Shape from code

Hi Mate,

I have only one tool which is a text tool .and my app updates text font from button rather user select shape and resize.

so how I can programmatically select a shape and update the user setting?

or there is any way to update textview directly from code by ignoring user setting?

How to block text editing

I want to disable text editing for user. So you can only tap, enter a text and that's all. No more options with tapping on entered text and edit it. Is it possible?

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

Rotate RectTool's shape

I couldn't find any way how to set a rotation angle for RectTool or any other Ngon tool.
What I want to achieve:

  1. Set rotation to 45 degrees
  2. When I start drawing a rectangle, the shape will be rotated in 45 degrees.

I also found that RectShape has a transform property but I couldn't achieve the rotation effect described above.

[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 !

Drawsana View not rendering any shape layers once, palm of the drawer sits on the view for some time

When someone draws in the drawsana view, when its an ipad, its natural that, the palm of the hand of person sits on the screen. So there is this weird bug, where, the drawing functionality works properly, until, someone puts their hand or palm on screen. After that, trying to draw on new shape, nothing gets drawn.

I added break points to check the flow, and though nothing gets drawn the flow is working i.e. did-pan gesture recogniser gets called, but doesn't render new layers.

Explicitly support Swift 5

Can you please support latest version of swift version. And please update the document for coocapods details too.

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!

clear the drawing view

we want to reset or clear all the drawing view on click event,but couldnt find the proper method

Some way to get shape points

I'm using library to draw on map and i need to access points/path of shape so i can get coordinates from map view by converting the points/path.

Change Orientation Bug

Steps to reproduce

  1. Draw some thing in potrait mode like draw arrow or with pen
  2. Change Orientation to landscape
  3. Draw again. Previous drawing will not remain at its original position

Drawing Lags Badly on Large UIViews

First of all, this is a fantastic library. Your work on this is much appreciated.

I have a particular use case for this, where the view may be larger than the device's viewport. Disregarding zooming/panning for now (that's something I'll tackle later), I've noticed that there is a significant performance penalty for views that span the full width/height of the screen (say, an ipad pro), and even moreso for views that are larger than the viewport.

Are there any optimizations or culling techniques that I can implement on my end? Or features I can disable to speed things up? Or any off-the-top improvements that I could make (and maybe even contribute to this code base)? Something that comes to mind might be, say, reducing the smoothness of the lines so that not as many calls to the graphics rendering APIs are made (I know, that's likely a massive oversimplification).

Any pointers in the right direction would be much appreciated!

Erased shapes should stay erased when moved

I am facing issue into eraser tool while using it with selection tool. when I draw something and erase some part and then select it and move to other position it move full object that I have created at first removed area also move with selected tool.

Eraser should remove drawing from view not paint with background colour

please help me thanks in advance

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.

Draw inside scrollview

Hi Sir, I want to add the drawing view inside UIScrollView so that I can zoom and drag the drawing view. How can do that? Because ImmediatePanGestureRecognizer class always receive events before UIScrollview can detect zoom or drag view.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.