fabric-pen-tool

fabricjs Libary pen tool, Currently supports lines and quadratic Bezier curve and cubic Bezier curve Online Demo

Tips and Techniques

* To click open button
* After opening, the graph cannot be selected. Click to draw a straight line, click and drag the animation of a quadratic Bezier curve (cubic Bezier curve is not currently supported, supported in the next version)
* The starting point is identified by the close mark. When the mouse displays a closed circle icon at the starting point, clicking or dragging will close the graph
* Move and display the done mark at the end point, and click to complete the drawing
* Move at the end point and press the alt key to display the break flag. Click to disconnect the next control point
* You can continue selecting drawings after closing

Installation

* Using npm

``bash
npm install fabric fabric-pen-tool --save
`

* Using yarn

`bash
yarn add fabric fabric-pen-tool
`

* Using pnpm

`bash
pnpm add fabric fabric-pen-tool
`

Usage

$3

`js
import { fabric } from 'fabric'
import { PenTool } from 'fabric-pen-tool'
const canvas = new fabric.Canvas('myCanvas')
const pt = new PenTool(canvas)
pt.open()
pt.close()
pt.destroy()
`

$3

* canvas
* Type: fabric.Canvas
* Description: fabric canvas instance
* Required: true
* pathStyle
* Type: fabric.IPathOptions | undefined
* Description: The style of drawn path.(eg: { stroke: '#00f', fill: '#000' })
* Required: false

$3

* isOpen: Whether to turn on the pen tool
* subColor: All auxiliary colors except for drawing paths
* isDestroyed: Whether it has been destroyed

$3

* open(): Turn on the pen tool
* close(): Turn off the pen tool
* destroy(): Remove all event listeners

Used in Vue3

`html



`

Used in Vue2

`html



`

Used in browsers

`html














``

Demo picture

!demo