repository·master·Indexed 12 days ago
https://github.com/fabricjs/fabric.jsA powerful JavaScript HTML5 canvas library providing an object model for canvas and an SVG-to-canvas parser. Version 7.4.0 supports both browser and Node.js environments, offering built-in shapes, animations, image filters, and a flexible Layout Manager with FitContent, Fixed, and Clippath strategies. The ecosystem includes specialized extensions for aligning guidelines, cropping controls, and serialized data migration helpers.
@fabricjs/aligning-guidelines package provides helper utilities for implementing aligning guidelines within Fabric.js applications. It is designed as a standalone package that relies on @fabricjs/core to function.@fabricjs/cropping-controls package provides specialized image crop and resize controls for Fabric.js. It is designed to work as an extension that depends on @fabricjs/core to enable interactive cropping interfaces on image objects.The @fabricjs/gradient-controls package provides helper functions to manage and manipulate linear gradient controls within Fabric.js. It exposes the createLinearGradientControls function, which allows you to implement interactive gradient controls. This package is a standalone module that requires @fabricjs/core as a dependency.
import { createLinearGradientControls } from '@fabricjs/gradient-controls';@fabricjs/westures-integration package provides gesture helpers for Fabric.js. It acts as a bridge between @fabricjs/core and the westures gesture library, allowing you to implement advanced gesture recognition (like pinch, rotate, etc.) within your Fabric.js applications.When working with groups in Fabric.js, choosing the right layout strategy is critical for how the group responds to content changes:
| Strategy | Behavior on Add/Remove | Dimension Control |
|---|---|---|
| FitContent | Group size and center update to fit the new bounding box. | Automatic (based on content). |
| Fixed | Group size remains constant; content is cropped by the fixed box. | Manual (developer sets width or height). |
| Clippath | Group size and center are driven by the clipPath object. | Dependent on clipPath. |
Note on Fixed Layout: The Fixed strategy is the only one where you can change the group's width and height at will without them being reset during the next performLayout call.
The Layout Manager is responsible for calculating the size and position of a group based on its member objects. It provides a structured lifecycle for layout operations to ensure objects are correctly repositioned relative to the group center and that the group's bounding box is updated.
Every performLayout call follows this execution flow:
onBeforeLayout: Subscribes to object events and fires a user event.getLayoutResult: Calculates the new layout using a strategy (e.g., FitContent).commitLayout: Applies the calculated width, height, and position (top/left) to the group.onAfterLayout: Fires a completion event and bubbles the layout operation to parent groups.You can choose different strategies to define how a group behaves when its contents change:
width or height. Once initialized, adding or removing objects will not change the group's dimensions or position. The group acts as a fixed container that crops its contents.clipPath rather than the objects themselves. The group is as large as the clipPath and centered on it.FabricJS extensions and plugins are features that exist outside the core library to prevent scope creep. While the core library focuses on rendering, interactive layers, and serialization, extensions provide specialized functionality such as:
Extensions are not included in the main FabricJS bundle. They are available as separate ES modules or extension bundles.
The @fabricjs/core package is the environment-neutral shared runtime for Fabric.js. It is used internally by @fabricjs/browser and @fabricjs/node.
Important Usage Guidelines:
@fabricjs/core directly. Instead, use @fabricjs/browser for browser-based applications or @fabricjs/node for Node.js applications.@fabricjs/core directly for an advanced integration, be aware that it is not a DOM-free API. You must provide a suitable environment implementation if your code touches the DOM or the canvas.@fabricjs/core is kept on the same version as all other @fabricjs/* packages and the legacy fabric facade in your application to prevent compatibility issues.Fabric.js data exports include a version tag representing the library version used during export. To prevent incorrect positioning when loading old data, you should implement a conditional update strategy:
version property on the loaded data/label during session instantiation.installOriginWrapperUpdater() for that specific session.When removing an object from a group using group.remove(A), the following occurs:
A is removed from the group structure.A absorbs the transform state of the group. This ensures that if the object is added back to the scene (outside the group), its visual position and appearance remain unchanged.Fabric.js has moved to a modular architecture. Understanding the roles of different packages is crucial for correct installation and importing.
| Package | Role |
|---|---|
fabric | Legacy compatibility facade. Re-exports @fabricjs/browser. |
@fabricjs/browser | Preferred entrypoint for new browser applications. |
@fabricjs/node | Preferred entrypoint for new Node.js applications. Owns Node-specific dependencies. |
@fabricjs/core | Shared, environment-neutral runtime. Intended for advanced/shared dependencies. |
| Extension packages | Optional features (e.g., @fabricjs/aligning-guidelines). |
fabric and every @fabricjs/* package on matching versions. Mixing mismatched versions can load separate runtimes.import { Canvas } from '@fabricjs/browser';import { StaticCanvas } from '@fabricjs/node';import { AligningGuidelines } from '@fabricjs/aligning-guidelines';@fabricjs/core is environment-neutral but is not a DOM-free API. If you use core APIs that touch the DOM or canvas, you must provide a suitable environment implementation.