angular-canvas-painter

WebJar for angular-canvas-painter

License	MIT
Categories	Angular User Interface Web Frameworks
GroupId	org.webjars.npm
ArtifactId	angular-canvas-painter
Last Version	0.6.0
Release Date	Aug 11, 2017
Type	jar
Description	angular-canvas-painter WebJar for angular-canvas-painter
Project URL	http://webjars.org
Source Code Management	https://github.com/pwambach/angular-canvas-painter

Download angular-canvas-painter

Filename	Size
angular-canvas-painter-0.6.0.pom
angular-canvas-painter-0.6.0.jar	18 KB
angular-canvas-painter-0.6.0-sources.jar	22 bytes
angular-canvas-painter-0.6.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/angular-canvas-painter/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>angular-canvas-painter</artifactId>
    <version>0.6.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/angular-canvas-painter/
implementation 'org.webjars.npm:angular-canvas-painter:0.6.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/angular-canvas-painter/
implementation ("org.webjars.npm:angular-canvas-painter:0.6.0")

Apache Buildr

'org.webjars.npm:angular-canvas-painter:jar:0.6.0'

Apache Ivy

<dependency org="org.webjars.npm" name="angular-canvas-painter" rev="0.6.0">
  <artifact name="angular-canvas-painter" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='angular-canvas-painter', version='0.6.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "angular-canvas-painter" % "0.6.0"

Leiningen

[org.webjars.npm/angular-canvas-painter "0.6.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

angular-canvas-painter

⚠️ This project is not under active development! PRs welcome!

Angular.js directive to paint on a canvas on desktop or touch devices

View Demo

Usage

1. bower install angular-canvas-painter
2. Include dist/angular-canvas-painter(.min).js from bower_components/angular-canvas-painter/dist.
3. Add pw.canvas-painter as an angular module dependency.
4. Use the pw-canvas directive in your template to create the painting canvas.
5. Optionally you can use the pw-color-selector directive to choose colors from.

####pwCanvas

<div pw-canvas options="{width: 400, height: 300, color: '#ff0'}"></div>

Options

{
  width: 400, //px
  height: 300, //px
  backgroundColor: '#fff',
  color: '#000',
  lineWidth: 1, //px
  opacity: 0.9, //0-1
  undo: false // boolean or a number of versions to keep in memory
  imageSrc: 'images/example.jpg', // loads the specified image and sets it as background image,
  customCanvasId: 'myCustomId' // define a custom value for the id attribute of the canvas element (default: 'pwCanvasMain')
}

Undo

To enable the undo function set undo: true in the options and provide a version attribute:

<div pw-canvas options="{undo: true, width: 400, height: 300, color: '#ff0'}" version="model.version"></div>

The version attribute will always be set to the amount of available versions in memory. To undo a stroke just decrease the version number in your surrounding controller e.g. model.version = model.version - 1. To jump back 3 versions set model.version = model.version - 3.

You can set a maximum number of saved versions to prevent too much memory consumption by setting a number instead of true in the options, e.g. {undo: 20}

####pwColorSelector

<div pw-color-selector="['#000', '#00f', '#0f0', '#f00']" color="selectedColor"></div>

To use pwColorSelector with pwCanvas set the color option in pwCanvas to the color variable of the selecot:

<div pw-canvas options="{color: model.myColor}"></div>
<div pw-color-selector="['#000', '#00f', '#0f0', '#f00']" color="model.myColor"></div>

Drawing algorithm

The drawing algorithm to produce clear and smooth edges is based on a great article by Rishabh

License

MIT

Versions

Version
0.6.0 Aug 11, 2017