A Canvas mouse / touch detection directive for Angular. It uses Bresenham's Line Drawing Algorithm to ensure a smooth draw.
@jimeh87/pencil@1.0.2
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);
}
}
[jrPencil]
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> |
Run yarn build
and then in ./dist/pencil
run yarn publish