Or you can use this instead if your build pipeline supports ES6 imports:
import { fabric } from "fabric";
NOTE: If you are using Fabric.js in a Node.js script, you will depend on node-canvas. node-canvas is an HTML canvas replacement that works on top of native libraries. Please follow the instructions to get it up and running.
NOTE: es6 imports won't work in browser or with bundlers which expect es6 module like vite. Use commonjs syntax instead.
importReact,{useEffect,useRef}from'react'import{fabric}from'fabric'constFabricJSCanvas=()=>{constcanvasEl=useRef(null)useEffect(()=>{constoptions={ ... };constcanvas=newfabric.Canvas(canvasEl.current,options);// make the fabric.Canvas instance available to your appupdateCanvasContext(canvas);return()=>{updateCanvasContext(null);canvas.dispose()}},[]);return(<canvaswidth="300"height="300"ref={canvasEl}/>)});exportdefaultFabricJSCanvas;
NOTE: Fabric.js requires a window object.
Building
Build distribution file [~77K minified, ~20K gzipped]
$ node build.js
1.1 Or build a custom distribution file, by passing (comma separated) module names to be included.
$ node build.js modules=text,serialization,parser
// or
$ node build.js modules=text
// or
$ node build.js modules=parser,text
// etc.
By default (when none of the modules are specified) only basic functionality is included.
See the list of modules below for more information on each one of them.
Note that default distribution has support for static canvases only.
To get minimal distribution with interactivity, make sure to include corresponding module:
These are the optional modules that could be specified for inclusion, when building custom version of fabric:
text — Adds support for static text (fabric.Text)
itext — Adds support for interactive text (fabric.IText, fabric.Textbox)
serialization — Adds support for loadFromJSON, loadFromDatalessJSON, and clone methods on fabric.Canvas
interaction — Adds support for interactive features of fabric — selecting/transforming objects/groups via mouse/touch devices.
parser — Adds support for fabric.parseSVGDocument, fabric.loadSVGFromURL, and fabric.loadSVGFromString
image_filters — Adds support for image filters, such as grayscale of white removal.
easing — Adds support for animation easing functions
node — Adds support for running fabric under node.js, with help of jsdom and node-canvas libraries.
freedrawing — Adds support for free drawing
erasing — Adds support for object erasing using an eraser brush
gestures — Adds support for multitouch gestures with help of Event.js
object_straightening — Adds support for rotating an object to one of 0, 90, 180, 270, etc. depending on which is angle is closer.
animation — Adds support for animation (fabric.util.animate, fabric.util.requestAnimFrame, fabric.Object#animate, fabric.Canvas#fxCenterObjectH/#fxCenterObjectV/#fxRemove)
Additional flags for build script are:
requirejs — Makes fabric requirejs AMD-compatible in dist/fabric.js. Note: an unminified, requirejs-compatible version is always created in dist/fabric.require.js
no-strict — Strips "use strict" directives from source
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
请发表评论