fabric 5.3.0 → 6.0.0-beta1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.babelrc +11 -0
- package/.babelrcAlt +19 -0
- package/.browserslistrc +5 -0
- package/.eslintrc.js +43 -0
- package/.eslintrc.json +38 -46
- package/.eslintrc_tests +12 -0
- package/.gitattributes +2 -0
- package/.prettierignore +16 -0
- package/.prettierrc +4 -0
- package/CHANGELOG.md +491 -189
- package/CONTRIBUTING.md +226 -58
- package/README.md +188 -239
- package/bower.json +1 -3
- package/dist/fabric.d.ts +1021 -0
- package/dist/index.cjs +28027 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.min.js +1 -0
- package/dist/index.mjs +27964 -0
- package/dist/index.mjs.map +1 -0
- package/dist/index.node.cjs +28092 -0
- package/dist/index.node.cjs.map +1 -0
- package/dist/index.node.d.ts +15 -0
- package/dist/index.node.mjs +28035 -0
- package/dist/index.node.mjs.map +1 -0
- package/dist/src/Collection.d.ts +126 -0
- package/dist/src/CommonMethods.d.ts +32 -0
- package/dist/src/EventTypeDefs.d.ts +226 -0
- package/dist/src/Intersection.d.ts +100 -0
- package/dist/src/Observable.d.ts +54 -0
- package/dist/src/Pattern.d.ts +104 -0
- package/dist/src/Point.d.ts +232 -0
- package/dist/src/Shadow.d.ts +87 -0
- package/dist/src/brushes/BaseBrush.d.ts +105 -0
- package/dist/src/brushes/CircleBrush.d.ts +49 -0
- package/dist/src/brushes/PatternBrush.d.ts +23 -0
- package/dist/src/brushes/PencilBrush.d.ts +92 -0
- package/dist/src/brushes/SprayBrush.d.ts +79 -0
- package/dist/src/cache.d.ts +46 -0
- package/dist/src/canvas/Canvas.d.ts +567 -0
- package/dist/src/canvas/SelectableCanvas.d.ts +723 -0
- package/dist/src/canvas/StaticCanvas.d.ts +751 -0
- package/dist/src/canvas/TextEditingManager.d.ts +17 -0
- package/dist/src/canvas/canvas_gestures.mixin.d.ts +2 -0
- package/dist/src/color/Color.d.ts +174 -0
- package/dist/src/color/color_map.d.ts +155 -0
- package/dist/src/color/constants.d.ts +22 -0
- package/dist/src/color/util.d.ts +12 -0
- package/dist/src/config.d.ts +115 -0
- package/dist/src/constants.d.ts +14 -0
- package/dist/src/controls/Control.d.ts +228 -0
- package/dist/src/controls/changeWidth.d.ts +13 -0
- package/dist/src/controls/controls.render.d.ts +29 -0
- package/dist/src/controls/default_controls.d.ts +50 -0
- package/dist/src/controls/drag.d.ts +12 -0
- package/dist/src/controls/polyControl.d.ts +5 -0
- package/dist/src/controls/rotate.d.ts +12 -0
- package/dist/src/controls/scale.d.ts +47 -0
- package/dist/src/controls/scaleSkew.d.ts +39 -0
- package/dist/src/controls/skew.d.ts +33 -0
- package/dist/src/controls/util.d.ts +41 -0
- package/dist/src/controls/wrapWithFireEvent.d.ts +8 -0
- package/dist/src/controls/wrapWithFixedAnchor.d.ts +9 -0
- package/dist/src/env/browser.d.ts +3 -0
- package/dist/src/env/index.d.ts +7 -0
- package/dist/src/env/node.d.ts +3 -0
- package/dist/src/env/types.d.ts +15 -0
- package/dist/src/filters/BaseFilter.d.ts +156 -0
- package/dist/src/filters/BlendColor.d.ts +80 -0
- package/dist/src/filters/BlendImage.d.ts +90 -0
- package/dist/src/filters/Blur.d.ts +50 -0
- package/dist/src/filters/Boilerplate.d.ts +46 -0
- package/dist/src/filters/Brightness.d.ts +46 -0
- package/dist/src/filters/Canvas2dFilterBackend.d.ts +27 -0
- package/dist/src/filters/ColorMatrix.d.ts +62 -0
- package/dist/src/filters/ColorMatrixFilters.d.ts +1169 -0
- package/dist/src/filters/Composed.d.ts +47 -0
- package/dist/src/filters/Contrast.d.ts +44 -0
- package/dist/src/filters/Convolute.d.ts +82 -0
- package/dist/src/filters/FilterBackend.d.ts +14 -0
- package/dist/src/filters/Gamma.d.ts +53 -0
- package/dist/src/filters/Grayscale.d.ts +45 -0
- package/dist/src/filters/HueRotation.d.ts +24 -0
- package/dist/src/filters/Invert.d.ts +54 -0
- package/dist/src/filters/Noise.d.ts +53 -0
- package/dist/src/filters/Pixelate.d.ts +43 -0
- package/dist/src/filters/RemoveColor.d.ts +62 -0
- package/dist/src/filters/Resize.d.ts +134 -0
- package/dist/src/filters/Saturation.d.ts +47 -0
- package/dist/src/filters/Vibrance.d.ts +47 -0
- package/dist/src/filters/WebGLFilterBackend.d.ts +126 -0
- package/dist/src/filters/WebGLProbe.d.ts +28 -0
- package/dist/src/filters/typedefs.d.ts +49 -0
- package/dist/src/gradient/Gradient.d.ts +149 -0
- package/dist/src/gradient/constants.d.ts +15 -0
- package/dist/src/gradient/parser/index.d.ts +4 -0
- package/dist/src/gradient/parser/misc.d.ts +4 -0
- package/dist/src/gradient/parser/parseColorStops.d.ts +6 -0
- package/dist/src/gradient/parser/parseCoords.d.ts +17 -0
- package/dist/src/gradient/typedefs.d.ts +93 -0
- package/dist/src/mixins/eraser_brush.mixin.d.ts +2 -0
- package/dist/src/mixins/stateful.mixin.d.ts +18 -0
- package/dist/src/parkinglot/canvas_animation.mixin.d.ts +2 -0
- package/dist/src/parkinglot/straighten.d.ts +2 -0
- package/dist/src/parser/applyViewboxTransform.d.ts +5 -0
- package/dist/src/parser/attributes.d.ts +6 -0
- package/dist/src/parser/constants.d.ts +54 -0
- package/dist/src/parser/doesSomeParentMatch.d.ts +2 -0
- package/dist/src/parser/elementById.d.ts +6 -0
- package/dist/src/parser/elementMatchesRule.d.ts +5 -0
- package/dist/src/parser/elements_parser.d.ts +3 -0
- package/dist/src/parser/getCSSRules.d.ts +7 -0
- package/dist/src/parser/getGlobalStylesForElement.d.ts +5 -0
- package/dist/src/parser/getGradientDefs.d.ts +7 -0
- package/dist/src/parser/getMultipleNodes.d.ts +2 -0
- package/dist/src/parser/getSvgRegex.d.ts +2 -0
- package/dist/src/parser/hasAncestorWithNodeName.d.ts +2 -0
- package/dist/src/parser/loadSVGFromString.d.ts +12 -0
- package/dist/src/parser/loadSVGFromURL.d.ts +13 -0
- package/dist/src/parser/normalizeAttr.d.ts +2 -0
- package/dist/src/parser/normalizeValue.d.ts +2 -0
- package/dist/src/parser/parseAttributes.d.ts +9 -0
- package/dist/src/parser/parseElements.d.ts +11 -0
- package/dist/src/parser/parseFontDeclaration.d.ts +10 -0
- package/dist/src/parser/parsePointsAttribute.d.ts +12 -0
- package/dist/src/parser/parseSVGDocument.d.ts +15 -0
- package/dist/src/parser/parseStyleAttribute.d.ts +9 -0
- package/dist/src/parser/parseStyleObject.d.ts +2 -0
- package/dist/src/parser/parseStyleString.d.ts +2 -0
- package/dist/src/parser/parseTransformAttribute.d.ts +10 -0
- package/dist/src/parser/parseUseDirectives.d.ts +2 -0
- package/dist/src/parser/percent.d.ts +9 -0
- package/dist/src/parser/recursivelyParseGradientsXlink.d.ts +2 -0
- package/dist/src/parser/rotateMatrix.d.ts +2 -0
- package/dist/src/parser/scaleMatrix.d.ts +2 -0
- package/dist/src/parser/selectorMatches.d.ts +2 -0
- package/dist/src/parser/setStrokeFillOpacity.d.ts +6 -0
- package/dist/src/parser/skewMatrix.d.ts +2 -0
- package/dist/src/parser/translateMatrix.d.ts +2 -0
- package/dist/src/shapes/ActiveSelection.d.ts +66 -0
- package/dist/src/shapes/Circle.d.ts +80 -0
- package/dist/src/shapes/Ellipse.d.ts +74 -0
- package/dist/src/shapes/Group.d.ts +381 -0
- package/dist/src/shapes/IText/DraggableTextDelegate.d.ts +78 -0
- package/dist/src/shapes/IText/IText.d.ts +322 -0
- package/dist/src/shapes/IText/ITextBehavior.d.ts +285 -0
- package/dist/src/shapes/IText/ITextClickBehavior.d.ts +81 -0
- package/dist/src/shapes/IText/ITextKeyBehavior.d.ts +193 -0
- package/dist/src/shapes/IText/constants.d.ts +13 -0
- package/dist/src/shapes/Image.d.ts +283 -0
- package/dist/src/shapes/Line.d.ts +117 -0
- package/dist/src/shapes/Object/AnimatableObject.d.ts +33 -0
- package/dist/src/shapes/Object/FabricObject.d.ts +9 -0
- package/dist/src/shapes/Object/FabricObjectSVGExportMixin.d.ts +74 -0
- package/dist/src/shapes/Object/InteractiveObject.d.ts +282 -0
- package/dist/src/shapes/Object/Object.d.ts +906 -0
- package/dist/src/shapes/Object/ObjectGeometry.d.ts +343 -0
- package/dist/src/shapes/Object/ObjectOrigin.d.ts +178 -0
- package/dist/src/shapes/Object/StackedObject.d.ts +62 -0
- package/dist/src/shapes/Object/defaultValues.d.ts +77 -0
- package/dist/src/shapes/Path.d.ts +123 -0
- package/dist/src/shapes/Polygon.d.ts +7 -0
- package/dist/src/shapes/Polyline.d.ts +130 -0
- package/dist/src/shapes/Rect.d.ts +62 -0
- package/dist/src/shapes/Text/StyledText.d.ts +118 -0
- package/dist/src/shapes/Text/Text.d.ts +656 -0
- package/dist/src/shapes/Text/TextSVGExportMixin.d.ts +32 -0
- package/dist/src/shapes/Textbox.d.ts +170 -0
- package/dist/src/shapes/Triangle.d.ts +17 -0
- package/dist/src/typedefs.d.ts +93 -0
- package/dist/src/util/animation/AnimationBase.d.ts +54 -0
- package/dist/src/util/animation/AnimationFrameProvider.d.ts +8 -0
- package/dist/src/util/animation/AnimationRegistry.d.ts +29 -0
- package/dist/src/util/animation/ArrayAnimation.d.ts +10 -0
- package/dist/src/util/animation/ColorAnimation.d.ts +11 -0
- package/dist/src/util/animation/ValueAnimation.d.ts +10 -0
- package/dist/src/util/animation/animate.d.ts +37 -0
- package/dist/src/util/animation/easing.d.ts +130 -0
- package/dist/src/util/animation/types.d.ts +87 -0
- package/dist/src/util/applyMixins.d.ts +8 -0
- package/dist/src/util/class_registry.d.ts +14 -0
- package/dist/src/util/dom_event.d.ts +5 -0
- package/dist/src/util/dom_misc.d.ts +40 -0
- package/dist/src/util/dom_request.d.ts +14 -0
- package/dist/src/util/dom_style.d.ts +7 -0
- package/dist/src/util/fireEvent.d.ts +3 -0
- package/dist/src/util/internals/cloneDeep.d.ts +2 -0
- package/dist/src/util/internals/getRandomInt.d.ts +8 -0
- package/dist/src/util/internals/ifNaN.d.ts +8 -0
- package/dist/src/util/internals/index.d.ts +4 -0
- package/dist/src/util/internals/removeFromArray.d.ts +9 -0
- package/dist/src/util/internals/uid.d.ts +2 -0
- package/dist/src/util/lang_class.d.ts +12 -0
- package/dist/src/util/lang_string.d.ts +22 -0
- package/dist/src/util/misc/boundingBoxFromPoints.d.ts +9 -0
- package/dist/src/util/misc/capValue.d.ts +2 -0
- package/dist/src/util/misc/cos.d.ts +10 -0
- package/dist/src/util/misc/dom.d.ts +28 -0
- package/dist/src/util/misc/findScaleTo.d.ts +29 -0
- package/dist/src/util/misc/groupSVGElements.d.ts +9 -0
- package/dist/src/util/misc/isTransparent.d.ts +11 -0
- package/dist/src/util/misc/matrix.d.ts +92 -0
- package/dist/src/util/misc/mergeClipPaths.d.ts +23 -0
- package/dist/src/util/misc/objectEnlive.d.ts +56 -0
- package/dist/src/util/misc/objectTransforms.d.ts +68 -0
- package/dist/src/util/misc/pick.d.ts +8 -0
- package/dist/src/util/misc/planeChange.d.ts +84 -0
- package/dist/src/util/misc/projectStroke/StrokeLineCapProjections.d.ts +51 -0
- package/dist/src/util/misc/projectStroke/StrokeLineJoinProjections.d.ts +81 -0
- package/dist/src/util/misc/projectStroke/StrokeProjectionsBase.d.ts +25 -0
- package/dist/src/util/misc/projectStroke/index.d.ts +11 -0
- package/dist/src/util/misc/projectStroke/types.d.ts +23 -0
- package/dist/src/util/misc/radiansDegreesConversion.d.ts +14 -0
- package/dist/src/util/misc/resolveOrigin.d.ts +9 -0
- package/dist/src/util/misc/rotatePoint.d.ts +12 -0
- package/dist/src/util/misc/sin.d.ts +10 -0
- package/dist/src/util/misc/svgParsing.d.ts +53 -0
- package/dist/src/util/misc/textStyles.d.ts +32 -0
- package/dist/src/util/misc/toFixed.d.ts +8 -0
- package/dist/src/util/misc/vectors.d.ts +57 -0
- package/dist/src/util/path.d.ts +108 -0
- package/dist/src/util/transform_matrix_removal.d.ts +14 -0
- package/dist/src/util/types.d.ts +19 -0
- package/fabric.ts +427 -0
- package/index.node.ts +43 -0
- package/index.ts +1 -0
- package/package.json +90 -39
- package/publish.js +0 -26
- package/rollup.config.mjs +79 -0
- package/rollup.test.config.js +24 -0
- package/scripts/build.mjs +50 -0
- package/scripts/buildLock.mjs +115 -0
- package/scripts/buildReporter.mjs +15 -0
- package/scripts/buildStats.mjs +139 -0
- package/scripts/dirname.mjs +14 -0
- package/scripts/index.mjs +679 -0
- package/scripts/transform_files.mjs +504 -0
- package/src/Collection.ts +311 -0
- package/src/CommonMethods.ts +63 -0
- package/src/EventTypeDefs.ts +294 -0
- package/src/Intersection.ts +273 -0
- package/src/Observable.ts +175 -0
- package/src/Pattern.ts +211 -0
- package/src/Point.ts +388 -0
- package/src/Shadow.ts +215 -0
- package/src/brushes/{base_brush.class.js → BaseBrush.ts} +65 -42
- package/src/brushes/CircleBrush.ts +145 -0
- package/src/brushes/PatternBrush.ts +70 -0
- package/src/brushes/PencilBrush.ts +300 -0
- package/src/brushes/SprayBrush.ts +219 -0
- package/src/cache.ts +89 -0
- package/src/canvas/Canvas.ts +1672 -0
- package/src/canvas/SelectableCanvas.ts +1636 -0
- package/src/canvas/StaticCanvas.ts +1709 -0
- package/src/canvas/TextEditingManager.ts +48 -0
- package/src/canvas/canvas_gestures.mixin.ts +207 -0
- package/src/color/Color.ts +404 -0
- package/src/color/color_map.ts +154 -0
- package/src/color/constants.ts +26 -0
- package/src/color/util.ts +32 -0
- package/src/config.ts +159 -0
- package/src/constants.ts +19 -0
- package/src/controls/Control.ts +377 -0
- package/src/controls/changeWidth.ts +52 -0
- package/src/controls/controls.render.ts +138 -0
- package/src/controls/default_controls.ts +132 -0
- package/src/controls/drag.ts +31 -0
- package/src/controls/polyControl.ts +135 -0
- package/src/controls/rotate.ts +87 -0
- package/src/controls/scale.ts +277 -0
- package/src/controls/scaleSkew.ts +92 -0
- package/src/controls/skew.ts +242 -0
- package/src/controls/util.ts +154 -0
- package/src/controls/wrapWithFireEvent.ts +25 -0
- package/src/controls/wrapWithFixedAnchor.ts +20 -0
- package/src/env/browser.ts +28 -0
- package/src/env/index.ts +19 -0
- package/src/env/node.ts +52 -0
- package/src/env/types.ts +15 -0
- package/src/filters/{base_filter.class.js → BaseFilter.ts} +201 -149
- package/src/filters/BlendColor.ts +258 -0
- package/src/filters/BlendImage.ts +254 -0
- package/src/filters/Blur.ts +202 -0
- package/src/filters/Boilerplate.ts +91 -0
- package/src/filters/Brightness.ts +93 -0
- package/src/filters/Canvas2dFilterBackend.ts +65 -0
- package/src/filters/ColorMatrix.ts +156 -0
- package/src/filters/ColorMatrixFilters.ts +106 -0
- package/src/filters/Composed.ts +85 -0
- package/src/filters/Contrast.ts +94 -0
- package/src/filters/Convolute.ts +341 -0
- package/src/filters/FilterBackend.ts +32 -0
- package/src/filters/Gamma.ts +127 -0
- package/src/filters/Grayscale.ts +137 -0
- package/src/filters/HueRotation.ts +66 -0
- package/src/filters/Invert.ts +117 -0
- package/src/filters/Noise.ts +109 -0
- package/src/filters/Pixelate.ts +114 -0
- package/src/filters/RemoveColor.ts +148 -0
- package/src/filters/Resize.ts +540 -0
- package/src/filters/Saturation.ts +100 -0
- package/src/filters/Vibrance.ts +103 -0
- package/src/filters/WebGLFilterBackend.ts +430 -0
- package/src/filters/WebGLProbe.ts +62 -0
- package/src/filters/typedefs.ts +65 -0
- package/src/gradient/Gradient.ts +401 -0
- package/src/gradient/constants.ts +12 -0
- package/src/gradient/parser/index.ts +3 -0
- package/src/gradient/parser/misc.ts +13 -0
- package/src/gradient/parser/parseColorStops.ts +55 -0
- package/src/gradient/parser/parseCoords.ts +73 -0
- package/src/gradient/typedefs.ts +104 -0
- package/src/mixins/{eraser_brush.mixin.js → eraser_brush.mixin.ts} +350 -239
- package/src/mixins/stateful.mixin.ts +104 -0
- package/src/parkinglot/canvas_animation.mixin.ts +121 -0
- package/src/parkinglot/straighten.ts +58 -0
- package/src/parser/applyViewboxTransform.ts +162 -0
- package/src/parser/attributes.ts +25 -0
- package/src/parser/constants.ts +118 -0
- package/src/parser/doesSomeParentMatch.ts +19 -0
- package/src/parser/elementById.ts +23 -0
- package/src/parser/elementMatchesRule.ts +19 -0
- package/src/parser/elements_parser.ts +191 -0
- package/src/parser/getCSSRules.ts +62 -0
- package/src/parser/getGlobalStylesForElement.ts +19 -0
- package/src/parser/getGradientDefs.ts +32 -0
- package/src/parser/getMultipleNodes.ts +15 -0
- package/src/parser/getSvgRegex.ts +5 -0
- package/src/parser/hasAncestorWithNodeName.ts +14 -0
- package/src/parser/loadSVGFromString.ts +26 -0
- package/src/parser/loadSVGFromURL.ts +40 -0
- package/src/parser/normalizeAttr.ts +10 -0
- package/src/parser/normalizeValue.ts +63 -0
- package/src/parser/parseAttributes.ts +90 -0
- package/src/parser/parseElements.ts +28 -0
- package/src/parser/parseFontDeclaration.ts +44 -0
- package/src/parser/parsePointsAttribute.ts +36 -0
- package/src/parser/parseSVGDocument.ts +106 -0
- package/src/parser/parseStyleAttribute.ts +27 -0
- package/src/parser/parseStyleObject.ts +15 -0
- package/src/parser/parseStyleString.ts +16 -0
- package/src/parser/parseTransformAttribute.ts +155 -0
- package/src/parser/parseUseDirectives.ts +79 -0
- package/src/parser/percent.ts +27 -0
- package/src/parser/recursivelyParseGradientsXlink.ts +42 -0
- package/src/parser/rotateMatrix.ts +21 -0
- package/src/parser/scaleMatrix.ts +9 -0
- package/src/parser/selectorMatches.ts +25 -0
- package/src/parser/setStrokeFillOpacity.ts +40 -0
- package/src/parser/skewMatrix.ts +6 -0
- package/src/parser/translateMatrix.ts +8 -0
- package/src/shapes/ActiveSelection.ts +157 -0
- package/src/shapes/Circle.ts +205 -0
- package/src/shapes/Ellipse.ts +154 -0
- package/src/shapes/Group.ts +1053 -0
- package/src/shapes/IText/DraggableTextDelegate.ts +394 -0
- package/src/shapes/IText/IText.ts +666 -0
- package/src/shapes/IText/ITextBehavior.ts +1055 -0
- package/src/shapes/IText/ITextClickBehavior.ts +321 -0
- package/src/shapes/IText/ITextKeyBehavior.ts +683 -0
- package/src/shapes/IText/constants.ts +47 -0
- package/src/shapes/Image.ts +789 -0
- package/src/shapes/Line.ts +329 -0
- package/src/shapes/Object/AnimatableObject.ts +106 -0
- package/src/shapes/Object/FabricObject.ts +19 -0
- package/src/shapes/Object/FabricObjectSVGExportMixin.ts +277 -0
- package/src/shapes/Object/InteractiveObject.ts +645 -0
- package/src/shapes/Object/Object.ts +1896 -0
- package/src/shapes/Object/ObjectGeometry.ts +830 -0
- package/src/shapes/Object/ObjectOrigin.ts +354 -0
- package/src/shapes/Object/StackedObject.ts +191 -0
- package/src/shapes/Object/defaultValues.ts +112 -0
- package/src/shapes/Path.ts +395 -0
- package/src/shapes/Polygon.ts +19 -0
- package/src/shapes/Polyline.ts +333 -0
- package/src/shapes/Rect.ts +199 -0
- package/src/shapes/Text/StyledText.ts +319 -0
- package/src/shapes/Text/Text.ts +1948 -0
- package/src/shapes/Text/TextSVGExportMixin.ts +288 -0
- package/src/shapes/Textbox.ts +471 -0
- package/src/shapes/Triangle.ts +45 -0
- package/src/typedefs.ts +119 -0
- package/src/util/animation/AnimationBase.ts +166 -0
- package/src/util/animation/AnimationFrameProvider.ts +28 -0
- package/src/util/animation/AnimationRegistry.ts +58 -0
- package/src/util/animation/ArrayAnimation.ts +27 -0
- package/src/util/animation/ColorAnimation.ts +74 -0
- package/src/util/animation/ValueAnimation.ts +29 -0
- package/src/util/animation/animate.ts +74 -0
- package/src/util/animation/easing.ts +327 -0
- package/src/util/animation/types.ts +136 -0
- package/src/util/applyMixins.ts +22 -0
- package/src/util/class_registry.ts +54 -0
- package/src/util/dom_event.ts +28 -0
- package/src/util/dom_misc.ts +138 -0
- package/src/util/dom_request.ts +64 -0
- package/src/util/dom_style.ts +20 -0
- package/src/util/fireEvent.ts +15 -0
- package/src/util/internals/cloneDeep.ts +2 -0
- package/src/util/internals/getRandomInt.ts +8 -0
- package/src/util/internals/ifNaN.ts +9 -0
- package/src/util/internals/index.ts +3 -0
- package/src/util/internals/removeFromArray.ts +14 -0
- package/src/util/internals/uid.ts +3 -0
- package/src/util/lang_class.ts +90 -0
- package/src/util/lang_string.ts +79 -0
- package/src/util/misc/boundingBoxFromPoints.ts +37 -0
- package/src/util/misc/capValue.ts +2 -0
- package/src/util/misc/cos.ts +24 -0
- package/src/util/misc/dom.ts +50 -0
- package/src/util/misc/findScaleTo.ts +44 -0
- package/src/util/misc/groupSVGElements.ts +15 -0
- package/src/util/misc/isTransparent.ts +51 -0
- package/src/util/misc/matrix.ts +207 -0
- package/src/util/misc/mergeClipPaths.ts +40 -0
- package/src/util/misc/objectEnlive.ts +189 -0
- package/src/util/misc/objectTransforms.ts +129 -0
- package/src/util/misc/pick.ts +17 -0
- package/src/util/misc/planeChange.ts +136 -0
- package/src/util/misc/projectStroke/StrokeLineCapProjections.ts +112 -0
- package/src/util/misc/projectStroke/StrokeLineJoinProjections.ts +231 -0
- package/src/util/misc/projectStroke/StrokeProjectionsBase.ts +75 -0
- package/src/util/misc/projectStroke/index.ts +53 -0
- package/src/util/misc/projectStroke/types.ts +24 -0
- package/src/util/misc/radiansDegreesConversion.ts +18 -0
- package/src/util/misc/resolveOrigin.ts +22 -0
- package/src/util/misc/rotatePoint.ts +15 -0
- package/src/util/misc/sin.ts +26 -0
- package/src/util/misc/svgParsing.ts +181 -0
- package/src/util/misc/textStyles.ts +133 -0
- package/src/util/misc/toFixed.ts +8 -0
- package/src/util/misc/vectors.ts +82 -0
- package/src/util/path.ts +941 -0
- package/src/util/transform_matrix_removal.ts +60 -0
- package/src/util/types.ts +78 -0
- package/tsconfig.json +106 -0
- package/HEADER.js +0 -203
- package/build.js +0 -287
- package/dist/fabric.js +0 -31187
- package/dist/fabric.min.js +0 -1
- package/old-travis-reference.yml +0 -97
- package/src/brushes/circle_brush.class.js +0 -144
- package/src/brushes/pattern_brush.class.js +0 -61
- package/src/brushes/pencil_brush.class.js +0 -310
- package/src/brushes/spray_brush.class.js +0 -219
- package/src/canvas.class.js +0 -1312
- package/src/color.class.js +0 -636
- package/src/control.class.js +0 -339
- package/src/controls.actions.js +0 -740
- package/src/controls.render.js +0 -99
- package/src/elements_parser.js +0 -152
- package/src/filters/2d_backend.class.js +0 -65
- package/src/filters/blendcolor_filter.class.js +0 -251
- package/src/filters/blendimage_filter.class.js +0 -247
- package/src/filters/blur_filter.class.js +0 -217
- package/src/filters/brightness_filter.class.js +0 -113
- package/src/filters/colormatrix_filter.class.js +0 -159
- package/src/filters/composed_filter.class.js +0 -72
- package/src/filters/contrast_filter.class.js +0 -113
- package/src/filters/convolute_filter.class.js +0 -352
- package/src/filters/filter_boilerplate.js +0 -111
- package/src/filters/filter_generator.js +0 -85
- package/src/filters/gamma_filter.class.js +0 -136
- package/src/filters/grayscale_filter.class.js +0 -154
- package/src/filters/hue_rotation.class.js +0 -107
- package/src/filters/invert_filter.class.js +0 -111
- package/src/filters/noise_filter.class.js +0 -134
- package/src/filters/pixelate_filter.class.js +0 -137
- package/src/filters/removecolor_filter.class.js +0 -173
- package/src/filters/resize_filter.class.js +0 -490
- package/src/filters/saturate_filter.class.js +0 -119
- package/src/filters/vibrance_filter.class.js +0 -122
- package/src/filters/webgl_backend.class.js +0 -396
- package/src/globalFabric.js +0 -4
- package/src/gradient.class.js +0 -490
- package/src/intersection.class.js +0 -172
- package/src/log.js +0 -11
- package/src/mixins/animation.mixin.js +0 -231
- package/src/mixins/canvas_dataurl_exporter.mixin.js +0 -97
- package/src/mixins/canvas_events.mixin.js +0 -974
- package/src/mixins/canvas_gestures.mixin.js +0 -149
- package/src/mixins/canvas_grouping.mixin.js +0 -177
- package/src/mixins/canvas_serialization.mixin.js +0 -228
- package/src/mixins/collection.mixin.js +0 -170
- package/src/mixins/default_controls.js +0 -114
- package/src/mixins/itext.svg_export.js +0 -241
- package/src/mixins/itext_behavior.mixin.js +0 -940
- package/src/mixins/itext_click_behavior.mixin.js +0 -278
- package/src/mixins/itext_key_behavior.mixin.js +0 -694
- package/src/mixins/object.svg_export.js +0 -258
- package/src/mixins/object_geometry.mixin.js +0 -683
- package/src/mixins/object_interactivity.mixin.js +0 -314
- package/src/mixins/object_origin.mixin.js +0 -255
- package/src/mixins/object_stacking.mixin.js +0 -80
- package/src/mixins/object_straightening.mixin.js +0 -80
- package/src/mixins/observable.mixin.js +0 -141
- package/src/mixins/shared_methods.mixin.js +0 -94
- package/src/mixins/stateful.mixin.js +0 -107
- package/src/mixins/text_style.mixin.js +0 -324
- package/src/parser.js +0 -1090
- package/src/pattern.class.js +0 -189
- package/src/point.class.js +0 -337
- package/src/shadow.class.js +0 -195
- package/src/shapes/active_selection.class.js +0 -155
- package/src/shapes/circle.class.js +0 -210
- package/src/shapes/ellipse.class.js +0 -181
- package/src/shapes/group.class.js +0 -593
- package/src/shapes/image.class.js +0 -764
- package/src/shapes/itext.class.js +0 -526
- package/src/shapes/line.class.js +0 -324
- package/src/shapes/object.class.js +0 -2008
- package/src/shapes/path.class.js +0 -384
- package/src/shapes/polygon.class.js +0 -81
- package/src/shapes/polyline.class.js +0 -268
- package/src/shapes/rect.class.js +0 -187
- package/src/shapes/text.class.js +0 -1696
- package/src/shapes/textbox.class.js +0 -461
- package/src/shapes/triangle.class.js +0 -93
- package/src/static_canvas.class.js +0 -1881
- package/src/util/anim_ease.js +0 -398
- package/src/util/animate.js +0 -254
- package/src/util/animate_color.js +0 -74
- package/src/util/dom_event.js +0 -50
- package/src/util/dom_misc.js +0 -300
- package/src/util/dom_request.js +0 -54
- package/src/util/dom_style.js +0 -70
- package/src/util/lang_array.js +0 -94
- package/src/util/lang_class.js +0 -115
- package/src/util/lang_object.js +0 -75
- package/src/util/lang_string.js +0 -110
- package/src/util/misc.js +0 -1330
- package/src/util/named_accessors.mixin.js +0 -428
- package/src/util/path.js +0 -829
package/README.md
CHANGED
|
@@ -1,292 +1,241 @@
|
|
|
1
|
-
|
|
1
|
+
# Fabric.js
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
[](http://travis-ci.org/#!/kangax/fabric.js)
|
|
6
|
-
[](https://codeclimate.com/github/kangax/fabric.js)
|
|
7
|
-
[](https://coveralls.io/r/kangax/fabric.js?branch=master)
|
|
8
|
-
[](https://gitpod.io/#https://github.com/fabricjs/fabric.js)
|
|
9
|
-
|
|
10
|
-
<!-- npm, bower, CDNJS versions, downloads -->
|
|
11
|
-
|
|
12
|
-
[](http://badge.fury.io/bo/fabric)
|
|
13
|
-
[](http://badge.fury.io/js/fabric)
|
|
14
|
-
[](https://www.npmjs.org/package/fabric)
|
|
15
|
-
[](https://cdnjs.com/libraries/fabric.js)
|
|
16
|
-
|
|
17
|
-
<!-- bounties, tips -->
|
|
3
|
+
<a href="http://fabricjs.com/kitchensink" target="_blank"><img align="right" src="/lib/screenshot.png" style="width:400px"></a>
|
|
18
4
|
|
|
19
|
-
|
|
20
|
-
[](https://flattr.com/submit/auto?user_id=kangax&url=http://github.com/kangax/fabric.js&title=Fabric.js&language=&tags=github&category=software)
|
|
5
|
+
A **simple and powerful Javascript HTML5 canvas library**.
|
|
21
6
|
|
|
22
|
-
|
|
7
|
+
- [**Website**][website]
|
|
8
|
+
- [**GOTCHAS**][gotchas]
|
|
9
|
+
- [**Contributing, Developing and More**](CONTRIBUTING.md)
|
|
23
10
|
|
|
24
|
-
|
|
11
|
+
---
|
|
25
12
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
### Non-Technical Introduction to Fabric
|
|
29
|
-
|
|
30
|
-
Fabric.js allows you to easily create simple shapes like rectangles, circles, triangles and other polygons or more complex shapes made up of many paths, onto the HTML `<canvas>` element on a webpage using JavaScript. Fabric.js will then allow you to manipulate the size, position and rotation of these objects with a mouse. It’s also possible to change some of the attributes of these objects such as their color, transparency, depth position on the webpage or selecting groups of these objects using the Fabric.js library. Fabric.js will also allow you to convert an SVG image into JavaScript data that can be used for putting it onto the `<canvas>` element.
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
[Contributions](https://github.com/kangax/fabric.js/wiki/Love-Fabric%3F-Help-us-by...) are very much welcome!
|
|
34
|
-
|
|
35
|
-
### Goals
|
|
36
|
-
|
|
37
|
-
- Unit tested (1150+ tests at the moment, 79%+ coverage)
|
|
38
|
-
- Modular (~60 small ["classes", modules, mixins](http://fabricjs.com/docs/))
|
|
39
|
-
- Cross-browser
|
|
40
|
-
- [Fast](https://github.com/kangax/fabric.js/wiki/Focus-on-speed)
|
|
41
|
-
- Encapsulated in one object
|
|
42
|
-
- No browser sniffing for critical functionality
|
|
43
|
-
- Runs under ES5 strict mode
|
|
44
|
-
- Runs on a server under [Node.js](http://nodejs.org/) (active stable releases and latest of current) (see [Node.js limitations](https://github.com/kangax/fabric.js/wiki/Fabric-limitations-in-node.js))
|
|
45
|
-
- Follows [Semantic Versioning](http://semver.org/)
|
|
13
|
+
<!-- build/coverage status, climate -->
|
|
46
14
|
|
|
47
|
-
|
|
15
|
+
[](../../actions/workflows/build.yml)
|
|
16
|
+
[](../../actions/workflows/tests.yml)
|
|
17
|
+
[](../../actions/workflows/codeql-analysis.yml)
|
|
48
18
|
|
|
49
|
-
|
|
50
|
-
- Safari 5+
|
|
51
|
-
- Opera 9.64+
|
|
52
|
-
- Chrome (all versions)
|
|
53
|
-
- Edge (chromium based, all versions)
|
|
54
|
-
- IE11 and Edge legacy, not supported. Fabric up to 5.0 is written with ES5 in mind, but no specific tests are run for those browsers.
|
|
19
|
+
---
|
|
55
20
|
|
|
56
|
-
|
|
21
|
+
<!-- npm, bower, CDNJS versions, downloads -->
|
|
57
22
|
|
|
58
|
-
|
|
23
|
+
[][cdnjs]
|
|
24
|
+
[][jsdelivr]
|
|
25
|
+
[](https://gitpod.io/#https://github.com/fabricjs/fabric.js)
|
|
59
26
|
|
|
60
|
-
|
|
27
|
+
[](http://badge.fury.io/js/fabric)
|
|
28
|
+
[](https://www.npmjs.org/package/fabric)
|
|
29
|
+
[](http://badge.fury.io/bo/fabric)
|
|
61
30
|
|
|
62
|
-
|
|
31
|
+
---
|
|
63
32
|
|
|
64
|
-
|
|
33
|
+
[](https://github.com/sponsors/asturur)
|
|
34
|
+
[](https://github.com/sponsors/melchiar)
|
|
35
|
+
[](https://github.com/sponsors/ShaMan123)
|
|
36
|
+
[](https://www.patreon.com/fabricJS)
|
|
65
37
|
|
|
66
|
-
|
|
38
|
+
---
|
|
67
39
|
|
|
68
|
-
|
|
40
|
+
## Features
|
|
69
41
|
|
|
70
|
-
|
|
71
|
-
|
|
42
|
+
- Out of the box interactions such as scale, move, rotate, skew, group...
|
|
43
|
+
- Built in shapes, controls, animations, image filters, gradients, patterns, brushes...
|
|
44
|
+
- `JPG`, `PNG`, `JSON` and `SVG` i/o
|
|
45
|
+
- Typed and modular
|
|
46
|
+
- [Unit tested](CONTRIBUTING.md#%F0%9F%A7%AA%20testing)
|
|
72
47
|
|
|
48
|
+
#### Supported Browsers/Environments
|
|
73
49
|
|
|
74
|
-
|
|
50
|
+
| Context | Supported Version | Notes |
|
|
51
|
+
| :---------: | :---------------: | ------------------------------- |
|
|
52
|
+
| Firefox | ✔️ | modern version (tbd) |
|
|
53
|
+
| Safari | ✔️ | version >= 10.1 |
|
|
54
|
+
| Opera | ✔️ | chromium based |
|
|
55
|
+
| Chrome | ✔️ | modern version (tbd) |
|
|
56
|
+
| Edge | ✔️ | chromium based |
|
|
57
|
+
| Edge Legacy | ❌ |
|
|
58
|
+
| IE11 | ❌ |
|
|
59
|
+
| Node.js | ✔️ | [Node.js installation](#nodejs) |
|
|
75
60
|
|
|
61
|
+
Fabric.js Does not use transpilation by default, the browser version we support is determined by the level of canvas api we want to use and some js syntax. While JS can be easily transpiled, canvas API can't.
|
|
76
62
|
|
|
77
|
-
|
|
63
|
+
## Installation
|
|
78
64
|
|
|
79
|
-
```
|
|
80
|
-
|
|
65
|
+
```bash
|
|
66
|
+
$ npm install fabric --save
|
|
67
|
+
// or
|
|
68
|
+
$ yarn add fabric
|
|
81
69
|
```
|
|
82
70
|
|
|
83
|
-
|
|
71
|
+
```js
|
|
72
|
+
// es6 imports
|
|
73
|
+
import { fabric } from 'fabric';
|
|
84
74
|
|
|
75
|
+
// or cjs
|
|
76
|
+
const fabric = require('fabric').fabric;
|
|
85
77
|
```
|
|
86
|
-
import { fabric } from "fabric";
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
NOTE: es6 imports won't work in browser or with bundlers which expect es6 module like vite. Use commonjs syntax instead.
|
|
90
|
-
|
|
91
|
-
See [the example section](#examples-of-use) for usage examples.
|
|
92
|
-
|
|
93
|
-
<h3 id="fabric-building">Building</h3>
|
|
94
|
-
|
|
95
|
-
1. [Install Node.js](https://github.com/joyent/node/wiki/Installation)
|
|
96
|
-
|
|
97
|
-
2. Build distribution file **[~77K minified, ~20K gzipped]**
|
|
98
|
-
|
|
99
|
-
$ node build.js
|
|
100
|
-
|
|
101
|
-
2.1 Or build a custom distribution file, by passing (comma separated) module names to be included.
|
|
102
|
-
|
|
103
|
-
$ node build.js modules=text,serialization,parser
|
|
104
|
-
// or
|
|
105
|
-
$ node build.js modules=text
|
|
106
|
-
// or
|
|
107
|
-
$ node build.js modules=parser,text
|
|
108
|
-
// etc.
|
|
109
|
-
|
|
110
|
-
By default (when none of the modules are specified) only basic functionality is included.
|
|
111
|
-
See the list of modules below for more information on each one of them.
|
|
112
|
-
Note that default distribution has support for **static canvases** only.
|
|
113
|
-
|
|
114
|
-
To get minimal distribution with interactivity, make sure to include corresponding module:
|
|
115
|
-
|
|
116
|
-
$ node build.js modules=interaction
|
|
117
|
-
|
|
118
|
-
2.2 You can also include all modules like so:
|
|
119
78
|
|
|
120
|
-
|
|
79
|
+
#### Browser
|
|
121
80
|
|
|
122
|
-
|
|
81
|
+
[][cdnjs]
|
|
82
|
+
[][jsdelivr]
|
|
123
83
|
|
|
124
|
-
|
|
84
|
+
See [browser modules][mdn_es6] for using es6 imports in the browser or use a dedicated bundler.
|
|
125
85
|
|
|
126
|
-
|
|
86
|
+
#### Node.js
|
|
127
87
|
|
|
128
|
-
|
|
129
|
-
|
|
88
|
+
Fabric.js depends on [node-canvas][node_canvas] for a canvas implementation (`HTMLCanvasElement` replacement) and [jsdom][jsdom] for a `window` implementation on node.
|
|
89
|
+
This means that you may encounter `node-canvas` limitations and [bugs][node_canvas_issues].
|
|
130
90
|
|
|
131
|
-
|
|
132
|
-
$ node build.js modules=... minifier=closure
|
|
91
|
+
Follow these [instructions][node_canvas_install] to get `node-canvas` up and running.
|
|
133
92
|
|
|
134
|
-
|
|
93
|
+
## Quick Start
|
|
135
94
|
|
|
136
|
-
|
|
95
|
+
<details><summary><b>Plain HTML</b></summary>
|
|
137
96
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
2. [Install NPM, if necessary](https://github.com/npm/npm#super-easy-install)
|
|
155
|
-
|
|
156
|
-
3. Install NPM packages
|
|
157
|
-
|
|
158
|
-
$ npm install
|
|
159
|
-
|
|
160
|
-
4. Run test suite
|
|
161
|
-
|
|
162
|
-
Make sure testem is installed
|
|
163
|
-
|
|
164
|
-
$ npm install -g testem
|
|
165
|
-
|
|
166
|
-
Run tests Chrome and Node (by default):
|
|
167
|
-
|
|
168
|
-
$ testem
|
|
169
|
-
|
|
170
|
-
See testem docs for more info: https://github.com/testem/testem
|
|
171
|
-
|
|
172
|
-
### Demos
|
|
173
|
-
|
|
174
|
-
- [Demos](http://fabricjs.com/demos/)
|
|
175
|
-
- [Kitchensink demo](http://fabricjs.com/kitchensink)
|
|
176
|
-
- [Benchmarks](http://fabricjs.com/benchmarks/)
|
|
177
|
-
|
|
178
|
-
[Who's using Fabric?](http://trends.builtwith.com/javascript/FabricJS)
|
|
179
|
-
|
|
180
|
-
### Documentation
|
|
181
|
-
|
|
182
|
-
Documentation is always available at [http://fabricjs.com/docs/](http://fabricjs.com/docs/).
|
|
183
|
-
|
|
184
|
-
Also see [official 4-part intro series](http://fabricjs.com/articles), [presentation from BK.js](http://www.slideshare.net/kangax/fabricjs-building-acanvaslibrarybk) and [presentation from Falsy Values](http://www.slideshare.net/kangax/fabric-falsy-values-8067834) for an overview of fabric.js, how it works, and its features.
|
|
185
|
-
|
|
186
|
-
### Optional modules
|
|
187
|
-
|
|
188
|
-
These are the optional modules that could be specified for inclusion, when building custom version of fabric:
|
|
189
|
-
|
|
190
|
-
- **text** — Adds support for static text (`fabric.Text`)
|
|
191
|
-
- **itext** — Adds support for interactive text (`fabric.IText`, `fabric.Textbox`)
|
|
192
|
-
- **serialization** — Adds support for `loadFromJSON`, `loadFromDatalessJSON`, and `clone` methods on `fabric.Canvas`
|
|
193
|
-
- **interaction** — Adds support for interactive features of fabric — selecting/transforming objects/groups via mouse/touch devices.
|
|
194
|
-
- **parser** — Adds support for `fabric.parseSVGDocument`, `fabric.loadSVGFromURL`, and `fabric.loadSVGFromString`
|
|
195
|
-
- **image_filters** — Adds support for image filters, such as grayscale of white removal.
|
|
196
|
-
- **easing** — Adds support for animation easing functions
|
|
197
|
-
- **node** — Adds support for running fabric under node.js, with help of [jsdom](https://github.com/tmpvar/jsdom) and [node-canvas](https://github.com/learnboost/node-canvas) libraries.
|
|
198
|
-
- **freedrawing** — Adds support for free drawing
|
|
199
|
-
- **erasing** — Adds support for object erasing using an eraser brush
|
|
200
|
-
- **gestures** — Adds support for multitouch gestures with help of [Event.js](https://github.com/mudcube/Event.js)
|
|
201
|
-
- **object_straightening** — Adds support for rotating an object to one of 0, 90, 180, 270, etc. depending on which is angle is closer.
|
|
202
|
-
- **animation** — Adds support for animation (`fabric.util.animate`, `fabric.util.requestAnimFrame`, `fabric.Object#animate`, `fabric.Canvas#fxCenterObjectH/#fxCenterObjectV/#fxRemove`)
|
|
203
|
-
|
|
204
|
-
Additional flags for build script are:
|
|
97
|
+
```html
|
|
98
|
+
<canvas id="canvas" width="300" height="300"></canvas>
|
|
99
|
+
|
|
100
|
+
<script src="https://cdn.jsdelivr.net/npm/fabric"></script>
|
|
101
|
+
<script>
|
|
102
|
+
const canvas = new fabric.Canvas('canvas');
|
|
103
|
+
const rect = new fabric.Rect({
|
|
104
|
+
top: 100,
|
|
105
|
+
left: 100,
|
|
106
|
+
width: 60,
|
|
107
|
+
height: 70,
|
|
108
|
+
fill: 'red',
|
|
109
|
+
});
|
|
110
|
+
canvas.add(rect);
|
|
111
|
+
</script>
|
|
112
|
+
```
|
|
205
113
|
|
|
206
|
-
|
|
207
|
-
- **no-strict** — Strips "use strict" directives from source
|
|
208
|
-
- **no-svg-export** — Removes svg exporting functionality
|
|
209
|
-
- **sourcemap** - Generates a sourceMap file and adds the `sourceMappingURL` (only if uglifyjs is used) to `dist/fabric.min.js`
|
|
114
|
+
</details>
|
|
210
115
|
|
|
211
|
-
|
|
116
|
+
<details><summary><b>ReactJS</b></summary>
|
|
212
117
|
|
|
213
|
-
|
|
118
|
+
```tsx
|
|
119
|
+
import React, { useEffect, useRef } from 'react';
|
|
120
|
+
import { fabric } from 'fabric';
|
|
214
121
|
|
|
215
|
-
|
|
122
|
+
export const FabricJSCanvas = () => {
|
|
123
|
+
const canvasEl = useRef(null);
|
|
124
|
+
useEffect(() => {
|
|
125
|
+
const options = { ... };
|
|
126
|
+
const canvas = new fabric.Canvas(canvasEl.current, options);
|
|
127
|
+
// make the fabric.Canvas instance available to your app
|
|
128
|
+
updateCanvasContext(canvas);
|
|
129
|
+
return () => {
|
|
130
|
+
updateCanvasContext(null);
|
|
131
|
+
canvas.dispose();
|
|
132
|
+
}
|
|
133
|
+
}, []);
|
|
216
134
|
|
|
217
|
-
|
|
135
|
+
return (<canvas width="300" height="300" ref={canvasEl}/>)
|
|
136
|
+
});
|
|
218
137
|
|
|
219
|
-
```html
|
|
220
|
-
<!DOCTYPE html>
|
|
221
|
-
<html>
|
|
222
|
-
<head>
|
|
223
|
-
</head>
|
|
224
|
-
<body>
|
|
225
|
-
<canvas id="canvas" width="300" height="300"></canvas>
|
|
226
|
-
|
|
227
|
-
<script src="lib/fabric.js"></script>
|
|
228
|
-
<script>
|
|
229
|
-
var canvas = new fabric.Canvas('canvas');
|
|
230
|
-
|
|
231
|
-
var rect = new fabric.Rect({
|
|
232
|
-
top : 100,
|
|
233
|
-
left : 100,
|
|
234
|
-
width : 60,
|
|
235
|
-
height : 70,
|
|
236
|
-
fill : 'red'
|
|
237
|
-
});
|
|
238
|
-
|
|
239
|
-
canvas.add(rect);
|
|
240
|
-
</script>
|
|
241
|
-
</body>
|
|
242
|
-
</html>
|
|
243
138
|
```
|
|
244
139
|
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
140
|
+
</details>
|
|
141
|
+
|
|
142
|
+
<details><summary><b>Node.js</b></summary>
|
|
143
|
+
|
|
144
|
+
```js
|
|
145
|
+
const http = require('http');
|
|
146
|
+
const { fabric } = require('fabric');
|
|
147
|
+
|
|
148
|
+
const port = 8080;
|
|
149
|
+
|
|
150
|
+
http
|
|
151
|
+
.createServer((req, res) => {
|
|
152
|
+
const canvas = new fabric.Canvas(null, { width: 100, height: 100 });
|
|
153
|
+
const rect = new fabric.Rect({ width: 20, height: 50, fill: '#ff0000' });
|
|
154
|
+
const text = new fabric.Text('fabric.js', { fill: 'blue', fontSize: 24 });
|
|
155
|
+
canvas.add(rect, text);
|
|
156
|
+
canvas.renderAll();
|
|
157
|
+
if (req.url === '/download') {
|
|
158
|
+
res.setHeader('Content-Type', 'image/png');
|
|
159
|
+
res.setHeader('Content-Disposition', 'attachment; filename="fabric.png"');
|
|
160
|
+
canvas.createPNGStream().pipe(res);
|
|
161
|
+
} else if (req.url === '/view') {
|
|
162
|
+
canvas.createPNGStream().pipe(res);
|
|
163
|
+
} else {
|
|
164
|
+
const imageData = canvas.toDataURL();
|
|
165
|
+
res.writeHead(200, '', { 'Content-Type': 'text/html' });
|
|
166
|
+
res.write(`<img src="${imageData}" />`);
|
|
167
|
+
res.end();
|
|
168
|
+
}
|
|
169
|
+
})
|
|
170
|
+
.listen(port, (err) => {
|
|
171
|
+
if (err) throw err;
|
|
172
|
+
console.log(
|
|
173
|
+
`> Ready on http://localhost:${port}, http://localhost:${port}/view, http://localhost:${port}/download`
|
|
174
|
+
);
|
|
175
|
+
});
|
|
176
|
+
```
|
|
250
177
|
|
|
251
|
-
|
|
178
|
+
</details>
|
|
252
179
|
|
|
253
|
-
|
|
180
|
+
---
|
|
254
181
|
|
|
255
|
-
|
|
182
|
+
## Other Solutions
|
|
256
183
|
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
184
|
+
| Project | Description | Demo |
|
|
185
|
+
| ------------------------------ | -------------------- | :--: |
|
|
186
|
+
| [Three.js][three.js] | 3D graphics |
|
|
187
|
+
| [PixiJS][pixijs] | WebGL renderer |
|
|
188
|
+
| [Konva][konva] | Similar features | ❌ |
|
|
189
|
+
| [Canvas2PDF][canvas2pdf] | PDF renderer |
|
|
190
|
+
| [html-to-image][html-to-image] | HTML to image/canvas |
|
|
260
191
|
|
|
261
|
-
|
|
192
|
+
## More Resources
|
|
262
193
|
|
|
263
|
-
|
|
194
|
+
- [Demos on `fabricjs.com`][demos]
|
|
195
|
+
- [Fabric.js on `Twitter`][twitter]
|
|
196
|
+
- [Fabric.js on `CodeTriage`][code_triage]
|
|
197
|
+
- [Fabric.js on `Stack Overflow`][so]
|
|
198
|
+
- [Fabric.js on `jsfiddle`][jsfiddles]
|
|
199
|
+
- [Fabric.js on `Codepen.io`][codepens]
|
|
264
200
|
|
|
265
|
-
|
|
201
|
+
## Credits [](https://www.patreon.com/fabricJS)
|
|
266
202
|
|
|
267
|
-
- [
|
|
203
|
+
- [kangax][kagnax]
|
|
204
|
+
- [asturur][asturur] on [`Twitter`][asturur_twitter]
|
|
205
|
+
[](https://github.com/sponsors/asturur)
|
|
206
|
+
- [melchiar][melchiar] [](https://github.com/sponsors/melchiar)
|
|
207
|
+
- [ShaMan123][shaman123] [](https://github.com/sponsors/ShaMan123)
|
|
268
208
|
- Ernest Delgado for the original idea of [manipulating images on canvas](http://www.ernestdelgado.com/archive/canvas/)
|
|
269
209
|
- [Maxim "hakunin" Chernyak](http://twitter.com/hakunin) for ideas, and help with various parts of the library throughout its life
|
|
270
210
|
- [Sergey Nisnevich](http://nisnya.com) for help with geometry logic
|
|
271
211
|
- [Stefan Kienzle](https://twitter.com/kienzle_s) for help with bugs, features, documentation, GitHub issues
|
|
272
|
-
- [Shutterstock](http://www.shutterstock.com/jobs) for the time and resources invested in using and improving
|
|
273
|
-
- [
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
212
|
+
- [Shutterstock](http://www.shutterstock.com/jobs) for the time and resources invested in using and improving Fabric.js
|
|
213
|
+
- [and all the other contributors][contributors]
|
|
214
|
+
|
|
215
|
+
[asturur]: https://github.com/asturur
|
|
216
|
+
[asturur_twitter]: https://twitter.com/AndreaBogazzi
|
|
217
|
+
[canvas2pdf]: https://github.com/joshua-gould/canvas2pdf
|
|
218
|
+
[cdnjs]: https://cdnjs.com/libraries/fabric.js
|
|
219
|
+
[code_triage]: https://www.codetriage.com/kangax/fabric.js
|
|
220
|
+
[codepens]: https://codepen.io/tag/fabricjs
|
|
221
|
+
[contributors]: https://github.com/fabricjs/fabric.js/graphs/contributors
|
|
222
|
+
[demos]: http://fabricjs.com/demos/
|
|
223
|
+
[gotchas]: http://fabricjs.com/fabric-gotchas
|
|
224
|
+
[html-to-image]: https://github.com/bubkoo/html-to-image
|
|
225
|
+
[jsdelivr]: https://www.jsdelivr.com/package/npm/fabric
|
|
226
|
+
[jsdom]: https://github.com/jsdom/jsdom
|
|
227
|
+
[jsfiddles]: https://jsfiddle.net/user/fabricjs/fiddles/
|
|
228
|
+
[kagnax]: https://twitter.com/kangax
|
|
229
|
+
[konva]: https://github.com/konvajs/konva
|
|
230
|
+
[mdn_es6]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
|
|
231
|
+
[melchiar]: https://github.com/melchiar
|
|
232
|
+
[node_canvas]: https://github.com/Automattic/node-canvas
|
|
233
|
+
[node_canvas_install]: https://github.com/Automattic/node-canvas#compiling
|
|
234
|
+
[node_canvas_issues]: https://github.com/Automattic/node-canvas/issues
|
|
235
|
+
[patreon_badge]: https://img.shields.io/static/v1?label=Patreon&message=%F0%9F%91%8D&logo=Patreon&color=blueviolet
|
|
236
|
+
[pixijs]: https://github.com/pixijs/pixijs
|
|
237
|
+
[shaman123]: https://github.com/ShaMan123
|
|
238
|
+
[so]: https://stackoverflow.com/questions/tagged/fabricjs
|
|
239
|
+
[three.js]: https://github.com/mrdoob/three.js/
|
|
240
|
+
[twitter]: https://twitter.com/fabricjs
|
|
241
|
+
[website]: http://fabricjs.com/
|
package/bower.json
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fabric.js",
|
|
3
3
|
"homepage": "http://fabricjs.com",
|
|
4
|
-
"authors": [
|
|
5
|
-
"kangax", "Kienz", "asturur"
|
|
6
|
-
],
|
|
4
|
+
"authors": ["kangax", "Kienz", "asturur"],
|
|
7
5
|
"description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
|
|
8
6
|
"main": "./dist/fabric.min.js",
|
|
9
7
|
"ignore": [
|