javascript - How to allow resizing while keeping aspect ratio in all cases? - Stack Overflow

admin管理员组

文章数量:1293149

I have a fabricImage and I want to allow resizing while keeping the aspect ratio intact.

By default, Fabric.js allows resizing from:

• Corners, which scales both x and y proportionally (this works as expected).
• Edges (left, right, top, bottom), which scales only x or y, breaking the aspect ratio.

I tried setting lockScalingX = true and lockScalingY = true, but this completely prevents scaling, including corner scaling. Desired Behavior:

• Allow resizing from corners while maintaining the aspect ratio.
• Allow resizing from edges, but force uniform scaling so that dragging an edge scales both x and y equally. (or disable border scaling, both ok)
• Prevent aspect ratio from being broken when resizing from edges.

What I’ve tried:

• Setting lockScalingX = true and lockScalingY = true (prevents all scaling).
• Searching the documentation but haven't found a clear way to enforce aspect ratio for all resize handles.

How can I achieve this? Any help would be greatly appreciated!

I have a fabricImage and I want to allow resizing while keeping the aspect ratio intact.

By default, Fabric.js allows resizing from:

• Corners, which scales both x and y proportionally (this works as expected).
• Edges (left, right, top, bottom), which scales only x or y, breaking the aspect ratio.

I tried setting lockScalingX = true and lockScalingY = true, but this completely prevents scaling, including corner scaling. Desired Behavior:

• Allow resizing from corners while maintaining the aspect ratio.
• Allow resizing from edges, but force uniform scaling so that dragging an edge scales both x and y equally. (or disable border scaling, both ok)
• Prevent aspect ratio from being broken when resizing from edges.

What I’ve tried:

• Setting lockScalingX = true and lockScalingY = true (prevents all scaling).
• Searching the documentation but haven't found a clear way to enforce aspect ratio for all resize handles.

How can I achieve this? Any help would be greatly appreciated!

• javascript
• fabricjs

Share Follow asked Feb 12 at 22:03 AdamAdam 29.1k2727 gold badges183183 silver badges272272 bronze badges 0

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

Set the centeredScaling property of the fabric.Object.prototype to true.

  fabric.Object.prototype.centeredScaling = true;

This will ensure that all objects created using Fabric.js will have centered scaling enabled by default.

You can check Vue FabricJs Starter kit for basic structure initialization.

Create custom controls with controlled scaling :

    fabric.FabricObject.prototype.controls = customControls();

Then make each controls individualy:

Action handler scalingEqually doc

const scaleEquallyControl = {
    cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,
    actionHandler: fabric.controlsUtils.scalingEqually,
    actionName: "scaling",
};

Define defaultControl() with scalingEqually action handler demo | doc

export const customControls = () => ({
    ml: new fabric.Control({
        x: -0.5,
        y: 0,
        ...scaleEquallyControl,
    }),

    mr: new fabric.Control({
        x: 0.5,
        y: 0,
        ...scaleEquallyControl,
    }),

    mb: new fabric.Control({
        x: 0,
        y: 0.5,
        ...scaleEquallyControl,
    }),

    mt: new fabric.Control({
        x: 0,
        y: -0.5,
        ...scaleEquallyControl,
    }),
    ...yourOtherControls
})

本文标签： javascriptHow to allow resizing while keeping aspect ratio in all casesStack Overflow