🤩 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 --saveAfter 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent