Narcissistic, Perfectly Modest

    ng-opendraw
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.4 • Public • Published

    Opendraw

    Opendraw is an angular component that manipulates the canvas for drawing content across all devices. It supports touch/pen/mouse devices. It uses pointerEvent to detect the device.

    Demo

    Try it out here: DEMO or clone this repo and run ng serve for a full demo of opendraw. Angular version 8.2.14.

    Features

    • Draw with different devices (mouse|pen|touch)
    • Export your drawings
    • Handle foreground and background layer (image|color)
    • Configure drawing style (color|width|shapes|eraser)
    • Configure allowed devices (mouse|pen|touch|all)

    How to use

    First install the package with the command npm i ng-opendraw

    Then, in your module.ts, import the library module

    import { NgOpendrawModule } from 'ng-opendraw';
    

    And add it to your imports modules. You can now use <ng-opendraw></ng-opendraw> it in any component.html

    <ng-opendraw 
        [canHeight]='this.height'
        [canWidth]='this.width'
        [lineWidth]='this.lineWidth'
        [lineColor]='this.getColor()'
        [commandObs]='this.commandObs$'
        [drawStyle]='this.drawStyle'
        [fillShape]='this.fillShape'
        [eraser]='this.eraser'
        [allowedDeviceType]='this.allowedDeviceType'
        [backgroundImage]='this.bgImg'
        [backgroundColor]='this.bgColor'
        (outputEvent)='this.processResult($event)'
        (errorEvent)='this.processError($event)'
    ></ng-opendraw>
    

    Check out the repo for a full demo code here

    Inputs

    Property Type Note
    [canHeight] number Height of the canvas area in px
    [canWidth] number Width of the canvas area in px
    [lineWidth] number Line width in px, default: 3
    [lineColor] string Line color, default: black
    [commandObs] Observable(DrawCommand) Triggers a drawcommand like export, clear, ...
    [drawStyle] DrawStyle Specify the drawing style like normal, circle, rectangle, line... default: normal
    [fillShape] boolean Enable/disable shape filling
    [eraser] boolean Enable/disable eraser
    [allowedDeviceType] DeviceType Specify the allowed device type like mouse, touch, pen... default: all
    [backgroundImage] Image/HTMLImageElement Specify the background layer image
    [backgroundColor] string Specify the background layer color

    Outputs

    Event Type Note
    (outputEvent) string Emits the exported drawing image
    (errorEvent) any Emits all errors

    To-Do / Improvements

    • Layers (add|remove|select|hide)
    • Undo / Redo actions

    NPM

    This package is on npm https://www.npmjs.com/package/ng-opendraw

    License

    This package is under the MIT license

    Install

    npm i ng-opendraw

    DownloadsWeekly Downloads

    1

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    359 kB

    Total Files

    38

    Last publish

    Collaborators

    • rloris