canvas-fabricjs
Reactive icon

Canvas (FabricJS)

Stable version 1.0.2 (Compatible with OutSystems 11)
Uploaded
 on 19 Dec (7 days ago)
 by 
5.0
 (1 rating)
canvas-fabricjs

Canvas (FabricJS)

Details
A reusable component that provides a fully interactive canvas using FabricJS, allowing users to: move, resize, and add/delete shapes (rectangles, circles, lines, text). Customize objects (colors, stroke width, opacity, rotation). Upload SVG files and render them on the canvas. Export the canvas as SVG. Contains actions to allow copy and paste of objects. Zoom & Pan functionality for large designs.
Read more

Provides a webblock to manage a canvas inside OutSystems using FabricJS library to manage the canvas.

Components comes with base functions to add/remove certain objects from the canvas as desired and able to upload/save SVG files into the canvas.

Allows for additional custom components to be used from FabricJS, more information available here:

https://fabricjs.com/demos/

Library: https://fabricjs.com/

Release notes (1.0.2)

Improvements to:

AddCircle - Addition of new attributes and return object name

AddLine - Addition of new attributes and return object name

AddRectangle - Addition of new attributes and return object name

AddTextBox - Addition of new attributes and return object name

LoadCanvasJSON - Include custom name attribute

ClearCanvas - Remove background color change

DeleteCurrentObject - Reallocation into the Operations folder

LoadSVGFile - Return object name

LoadSVGURL - Return object name


New client actions:

AddRectangleTextGroup

LoadImageFile

ApplySettingsOnActiveElements

BringToFrontActiveElement

CopyActiveElement

EditElementName

GetElementsNameList

GroupElements

LockElement

PasteActiveElement

RemoveSelectedElements

SelectElement

SendToBackActiveElement

UnlockElement

ResetZoom


Features added:

Bring to Front and Back elements.

Copy selected item to the clipboard.

Paste copied element.

Load image file.

Apply settings to a selected element.

Edit Element name.

Get Element list.

Select Element.

Lock and Unlock element.

Zoom in and Zoom out with the Mouse Wheel + Ctrl key pressed.

Reset zoom.


License (1.0.2)
Reviews (0)
Team
Other assets in this category