https://github.com/ittus/draw-lock-angle

Lock 45, 90, 135, 180... degree when drawing line on Javascript canvas
https://github.com/ittus/draw-lock-angle

angle canvas horizontal javascript vertical

Last synced: about 1 year ago
JSON representation

Lock 45, 90, 135, 180... degree when drawing line on Javascript canvas

• Host: GitHub
• URL: https://github.com/ittus/draw-lock-angle
• Owner: ittus
• License: mit
• Created: 2019-02-25T07:36:55.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-05-08T08:46:38.000Z (about 7 years ago)
• Last Synced: 2025-03-28T17:05:39.729Z (about 1 year ago)
• Topics: angle, canvas, horizontal, javascript, vertical
• Language: Vue
• Homepage: https://ittus.github.io/draw-lock-angle/
• Size: 1.01 MB
• Stars: 12
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# draw-lock-angle

A small library to lock angle when drawing on canvas in Javascript

[![CircleCI](https://circleci.com/gh/ittus/draw-lock-angle/tree/master.svg?style=shield)](https://circleci.com/gh/ittus/draw-lock-angle/tree/master)

![Size](https://badgen.net/bundlephobia/min/draw-lock-angle)

> Checkout the demo https://ittus.github.io/draw-lock-angle/

## How to use

### Install

```

  yarn add draw-lock-angle

```

### Usage

```javascript

import { calculatePosition } from 'draw-lock-angle'

projection = calculatePosition (newPoint, oldPint, config)

```

## Config

| Prop                  | Type            | Default     | Description                              |

|-----------------------|-----------------|-------------|------------------------------------------|

| isSimple                 | Boolean    |      false     | If `isSimple` is true, only calculate projection on horizontal line and vertical line. If `isSimple` is false, calculate the nearest projection on 0, 45, 90, 135-degree line             |

| boundary                  | Object. Format: {minX: Number, minY: number, maxX: number, maxY: number}         |    undefined         | Boundary of calculation

## Development

```

yarn install

```

### Compiles and hot-reloads for development

```

yarn run serve

```

### Compiles and minifies for production

```

yarn run build

```

### Run your tests

```

yarn run test

```

### Lints and fixes files

```

yarn run lint

```

## Support