๐คฉ Help you easily append guidelines and auto-snap to your fabric.js canvas.
- ๐ Easily append guidelines to your fabric.js canvas
- ๐จ Automatically snap to nearby elements
- ๐ค Automatically adjust the auto-snap threshold when the window is zoomed
- ๐ ๏ธ Customize guidelines' style and other options
- ๐ฆ Zero dependencies
See ๐ CodeSandbox.
npm install fabric-guideline-plugin --save
After install, you can use it in your project.
import { AlignGuidelines } from "fabric-guideline-plugin";
import { fabric } from "fabric";
import { AlignGuidelines } from "fabric-guideline-plugin";
const fabricCanvas = new fabric.Canvas("myCanvas");
const guideline = new AlignGuidelines({
canvas: fabricCanvas,
});
guideline.init();
You can also set some options to customize the guideline.
const guideline = new AlignGuidelines({
canvas: fabricCanvas,
pickObjTypes: [{ key: "myType", value: "box" }],
aligningOptions: {
lineColor: "#32D10A",
lineWidth: 2,
lineMargin: 2,
},
});
If you want to develop this plugin, you can easily start with the following steps:
$ git clone https://github.com/caijinyc/guideline.git
$ cd guideline
$ pnpm install
$ pnpm dev