https://github.com/jimeh87/pencil

A Canvas mouse / touch detection directive for Angular. It uses Bresenham's Line Drawing Algorithm to insure a smooth draw.
https://github.com/jimeh87/pencil

angular canvas library

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/jimeh87/pencil
• Owner: Jimeh87
• Created: 2019-03-16T05:18:40.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T03:51:19.000Z (almost 2 years ago)
• Last Synced: 2024-10-14T04:41:15.363Z (about 1 month ago)
• Topics: angular, canvas, library
• Language: TypeScript
• Size: 1.57 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 21
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Pencil

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

## Demo

[StackBlitz Demo](https://stackblitz.com/edit/pencil-sample)

## Latest Version

@jimeh87/[email protected]

## Setup

Add dependency `@jimeh87/pencil`

npm:

```shell

npm install --save @jimeh87/pencil

```

yarn:

```shell

yarn add @jimeh87/pencil

```

Add the `PencilModule` to your application module

```js

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

@NgModule({

  ...

  imports: [PencilModule, ...],

  ...

})

export class YourAppModule {

}

```

Add the directive to your canvas:

```html

```

```js

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` | ```   ```                                    |

| @Output() pencilUp = new EventEmitter();                                          | Emits event when `mouseup` or `touchend`                                               | ```   ``` |

| @Input()  pencilDisabled = false;                                                       | disables pencil directive                                                              | ```  ```     |

## Usage

* [https://gameoflife.xyz](https://gameoflife.xyz)

## Development

### Publishing

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