fabirc-lib-distance-guide

[zhe-he]

I've developed a distance display plugin:

1. When you move a graphic between two other graphics, it will show the distance.
2. When you hold down the Alt key, it will display the distance between the current graphic and the selected one.

You can customize the line color, text size, text spacing, detection spacing, dashed line style, etc.
Here is a demonstration.

2025-03-07.16.11.25.mov

Of course, you can also use it in a more advanced way. For example, as shown below, after holding down the Alt key, you can manually set it to display the distance between two graphics.(It doesn't interfere with the plugin for aligning with the guide lines.)

2025-03-07.16.27.34.mov

demo

how to use:

import { DistanceGuide } from "./lib/distance-guide";

const distanceGuide = new DistanceGuide(canvas, { color: "rgba(255,0,0,.5)" });

// distanceGuide.dispose();