angular-canvas-painter

    0.6.0 • Public • Published

    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

    Install

    npm i angular-canvas-painter

    DownloadsWeekly Downloads

    94

    Version

    0.6.0

    License

    MIT

    Last publish

    Collaborators

    • pwambach