A fabric pen tool
fabricjs Libary pen tool, Currently supports lines and quadratic Bezier curve and cubic Bezier curve Online Demo
* 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
* 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
`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()
* 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
* isOpen: Whether to turn on the pen tool
* subColor: All auxiliary colors except for drawing paths
* isDestroyed: Whether it has been destroyed
* open(): Turn on the pen tool
* close(): Turn off the pen tool
* destroy(): Remove all event listeners
`html
`
`html
`
`html``
!demo