JarCasting
JarCasting JarCasting

angular-canvas-painter

WebJar for angular-canvas-painter

License

License

MIT
Categories

Categories

Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

angular-canvas-painter
Last Version

Last Version

0.6.0
Release Date

Release Date
Type

Type

jar
Description

Description

angular-canvas-painter
WebJar for angular-canvas-painter
Project URL

Project URL

http://webjars.org
Source Code Management

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 11 KB
angular-canvas-painter-0.6.0-sources.jar 22 bytes
angular-canvas-painter-0.6.0-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-canvas-painter/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-canvas-painter</artifactId>
    <version>0.6.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/angular-canvas-painter/
implementation 'org.webjars.bower:angular-canvas-painter:0.6.0'
// https://jarcasting.com/artifacts/org.webjars.bower/angular-canvas-painter/
implementation ("org.webjars.bower:angular-canvas-painter:0.6.0")
'org.webjars.bower:angular-canvas-painter:jar:0.6.0'
<dependency org="org.webjars.bower" name="angular-canvas-painter" rev="0.6.0">
  <artifact name="angular-canvas-painter" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='angular-canvas-painter', version='0.6.0')
)
libraryDependencies += "org.webjars.bower" % "angular-canvas-painter" % "0.6.0"
[org.webjars.bower/angular-canvas-painter "0.6.0"]

Dependencies

compile (1)

Group / Artifact Type Version
org.webjars.bower : angular jar [1.4.1,1.5)

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