Pencil

A Canvas mouse / touch detection directive for Angular. It uses Bresenham's Line Drawing Algorithm to ensure a smooth draw.

Demo

StackBlitz Demo

Latest Version

@jimeh87/pencil@1.0.2

Setup

Add dependency @jimeh87/pencil

npm:

npm install --save @jimeh87/pencil

yarn:

yarn add @jimeh87/pencil

Add the PencilModule to your application module

import { PencilModule } from '@jimeh87/pencil';

@NgModule({
  ...
  imports: [PencilModule, ...],
  ...
})
export class YourAppModule {
}

Add the directive to your canvas:

<canvas (jrPencil)="onDraw($event)"
        style="width: 500px; height: 500px">
</canvas>

export class AppComponent {

  onDraw(point: { x: number, y: number }) {
    console.log(point);
  }

}

API

Pencil Directive

Selector

[jrPencil]

Properties

Property	Description	Example
@Output('jrPencil') pencilPositionEvent = new EventEmitter<{ x: number, y: number }>();	Emits mouse coordinates when mousedown or touchstart until mouseup or touchend	<canvas (jrPencil)="onDraw($event)"></canvas>
@Output() pencilUp = new EventEmitter();	Emits event when mouseup or touchend	<canvas (jrPencil)="onDraw($event)" (pencilUp)="onPencilUp()"></canvas>
@Input() pencilDisabled = false;	disables pencil directive	<canvas (jrPencil)="onDraw($event)" [pencilDisabled]="true"></canvas>

Usage

• https://gameoflife.xyz

Development

Publishing

Run yarn build and then in ./dist/pencil run yarn publish