Guideline to align object to canvas center (vertical/horizontal)

[camel113]

I'm using initAligningGuidelines and it works fine ❤️ to align objects together within the Canvas.
I'm wondering if it is possible to display alignment guidelines to help align objects vertically or horizontally relative to the canvas edges?

Thanks in advance!

[zhe-he]

If the canvas is immovable, drawing a straight line at -1px around the edges of the canvas—would that achieve the result you want?

If the canvas is movable, you need to upgrade. The following method can resolve this.

1. Update the code here and include it in your project.
2. Customize getObjectsByTarget to return the list of elements you want to align. Here’s an example:

initAligningGuidelines(canvas, {
    getObjectsByTarget(target) {
        const objects = new Set<FabricObject>();
        const canvas = target.canvas!;
        // The example aligns only with elements of the same type.
        for (const item of canvas.getObjects()) {
               if (item.type == target.type) {
                      objects.add(item);
               }
        }
        // Add the four corners of the canvas you want to align with. You can simulate this by creating four shapes as described in Solution A.
       const l = new FabricObject({ /** The left side of your canvas. */ });
       const t = new FabricObject({/** The same as above. */});
       const r = new FabricObject({/** The same as above. */});
       const b = new FabricObject({/** The same as above. */});
       objects.add(l);
       objects.add(t);
       objects.add(r);
       objects.add(b);

        // Exclude itself; otherwise, it will always align with itself.
        objects.delete(target);
        return objects;
    }
})

[camel113]

The canvas is immovable but I think my explanation of what I want to achieve was bad. Basically what I am trying to do is something like this example. Same sort of guidelines and snapping but to center my objects in the canvas container.

video.mov

[zhe-he]

Both Plan One and Plan Two can meet your needs, and the following changes are required.

trim.9824BD72-EBBD-4312-B341-23F1FDA3F07E.MOV