How to Create a Custom Bounding Box Around an Object in Fabric.js That Follows Rotations and Persists Across Selection Events?

Question

Title: Custom Bounding Box Follows Rotation But Not After Deselection and Reselection in Fabric.js

Description: Hello fellow developers,

I'm working on a project using Fabric.js, and I'm facing an issue with creating a custom bounding box (ruler) around an object. Here are the specifics:

1. Initially, I tried using lines as rulers, but they didn't sync with the object during rotations.
2. Now, I've switched to using a rectangle around the object, which works well during rotation.
3. However, after deselecting the item and then reselecting it (especially when it's already been rotated), the ruler dimensions are not accurate. The ruler doesn't follow the rectangle's position correctly.

Additional Details:

• You can see the attached image for reference (unfortunately, I cannot directly share the image here).
• Here's the relevant code snippet I'm using for the custom bounding box:

  export class CustomFabricCanvas extends fabric.Canvas {
    constructor(element, options) {
        super(element, options);
        this.rulerLine = null;
        this.on("selection:created", this.onSelectionCreated.bind(this));
        this.on("selection:cleared", this.onSelectionCleared.bind(this));

        this.on("object:scaling", this.onObjectScaling.bind(this));
        this.on("object:moving", this.onObjectMoving.bind(this));
        this.on("object:rotating", this.onObjectRotating.bind(this));
    }

    onSelectionCreated(event) {
        const activeObject = event.selected;
        if (activeObject?.length > 0) {
            activeObject.forEach((obj) => {
                this.showRuler({ ...obj });
            });
        }
    }

    onSelectionCleared() {
        this.hideRuler();
    }

    showRuler(options) {
        if (!this.rulerLine) {
            this.rulerLine = new fabric.Rect({
                left: options.left + 50, // 
                top: options.top + 50, // +
                height: options.height + 10, 
                width: options.width + 10, 
                stroke: "black",
                strokeWidth: 1,
                fill: "transparent",
                selectable: false,
                originX: "center",
                originY: "center",
                angle: options.angle,
            });

            this.add(this.rulerLine);
            this.renderAll();
        }
    }

    hideRuler() {
        if (this.rulerLine) {
            this.remove(this.rulerLine);
            this.rulerLine = null;
            this.renderAll();
        }
    }
   onObjectRotating(e) {
        const target = e.target;
        console.log(e.target);
        this.rulerLine.set({
            angle: target.angle,
        });

        this.renderAll();
    }

}

Request for Help: I need assistance with implementing a solution that ensures the ruler remains proportionate to the object's position even after deselection and reselection. How can I make the rectangle-based ruler persist correctly?

Image Ref:

• after rotation
  
• before rotation
  

---

I attempted to create a custom bounding box (ruler) around an object in Fabric.js. Initially, I used lines as rulers, but they didn’t sync with the object during rotations. Now, I’ve switched to using a rectangle around the object, which works well during rotation.

However, after deselecting the item and then reselecting it (especially when it’s already been rotated), the ruler dimensions are not accurate. The ruler doesn’t follow the rectangle’s position correctly.

I expected the ruler to consistently adjust with the object’s position, even after deselection and reselection.

Answer 1

Your problem is best seen if you visualize it real time ...

See my sample code below (mostly your code), I changed the function onObjectRotating to also set the left and top, that way we can see what you are doing when the rotation event not only at select.

class CustomFabricCanvas extends fabric.Canvas {
    constructor(element, options) {
        super(element, options);
        this.rulerLine = null;
        this.on("selection:created", this.onSelectionCreated.bind(this));
        this.on("selection:cleared", this.onSelectionCleared.bind(this));

        // this.on("object:scaling", this.onObjectScaling.bind(this));
        this.on("object:moving", this.onObjectRotating.bind(this));
        this.on("object:rotating", this.onObjectRotating.bind(this));
    }
    onObjectRotating(e) {
        this.rulerLine.set({
            angle: e.target.angle,
            left: e.target.left + 50,
            top: e.target.top + 50
        });
        this.renderAll();
    }
    onSelectionCreated(event) {
        event.selected.forEach((obj) => {
            this.showRuler({ ...obj });
        });
    }
    onSelectionCleared() {
        this.hideRuler();
    }
    showRuler(options) {
        if (!this.rulerLine) {
            this.rulerLine = new fabric.Rect({
                left: options.left + 50, // 
                top: options.top + 50, // +
                height: options.height + 10, 
                width: options.width + 10, 
                stroke: "black",
                strokeWidth: 1,
                fill: "transparent",
                selectable: false,
                originX: "center",
                originY: "center",
                angle: options.angle,
            });

            this.add(this.rulerLine);
            this.renderAll();
        }
    }
    hideRuler() {
        if (this.rulerLine) {
            this.remove(this.rulerLine);
            this.rulerLine = null;
            this.renderAll();
        }
    }
}

var canvas = new CustomFabricCanvas('a');
var rect = new fabric.Rect({ left: 15, top: 50, height: 50, width: 50 })
canvas.add(rect);
canvas.renderAll();
canvas.setActiveObject(rect);

<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>

<canvas id="a" width="200" height="200"></canvas>

if you want to see a different behavior try without the:

originX: "center",
originY: "center",

Here is how that visually looks like

. VS .