Link to plugin page: https://zeroqode.com/plugin/1689632933443x381803906545788800
Demo to preview the plugin:
Live Demo: https://ezcodedemo2.bubbleapps.io/fabric_js
Introduction
Introducing Fabric.js - JavaScript library that turns working with HTML5 canvas into a breeze! This library provides a comprehensive object model for canvas, an SVG parser, and more!With this Plugin, you can effortlessly:
- Draw using Custom Brushes (Crayon, Fur, Ink, Longfur, Ribbon, Sketchy, Spray, Web). The Plugin also triggers an event when the drawing is completed, enabling customization of subsequent actions.
- Modify existing elements on the canvas. You can easily change properties such as Color, Angle, Color Shadow, Opacity, Stroke Width, Stroke Color, Font Style, Font Family, and Font Weight.
- Create Regular Figures (Rectangle, Triangle, Circle, Ellipse) and manage their Width, Height, Radius, Angle, Stroke Width, Stroke Color, and Opacity.
- Add Text to the canvas with various options like Font Size, Font Family, Font Weight, Font Style, Text Align, Font Color, Angle, Opacity, Line Height (adjusts vertical spacing between lines), Text Background Color, Decoration Text (underline, overline, strike-through), Text Stroke Color, Shadow Text, Shadow Blur, Shadow Color, and a choice of 19 Fonts.
- Upload Images to the canvas and manipulate them by adjusting Image Width, Height, Rotation, Flip Horizontal, Flip Vertical, and setting them as a Background.
- Delete Selected Elements or Erase All elements from the canvas.
- Lock elements as Background Image.
- Obtain the final Image by saving it with customizable settings such as Image Quality and Image Format (webp, png, jpeg, bmp).
Plugin Element Properties
The plugin contains a Fabrics Canvas visual element that should be used on a page.
Title | Description | Type |
Border Color | Color of the border of canvas elements. | color |
Corner Color | Color of the corners of canvas elements. | color |
Corner Style | Style of the corners of canvas elements. | Dropdown |
Transparent Corners | Boolean indicating whether canvas element corners should be transparent. | yes/no |
Corner Size | Size of the corners of canvas elements. | number |
Events:
Title | Description |
Draw End | Triggered when the mouse button is released after drawing on the canvas in drawing mode. |
Element Selected | Triggered when a single element on the canvas is double-clicked. |
Element Actions
1. Upload Image - handles adding an image to the canvas. The image can be set either as the background of the canvas or as a standard object within the canvas. The action includes features like scaling, rotating, and flipping the image.
Title | Description | Type |
Image | The URL of the image to be added to the canvas. | image |
Image Width | The desired width to which the image should be scaled. | number |
Image Height | The desired height to which the image should be scaled. | number |
Rotate Image | The angle in degrees to rotate the image. | number |
Flip Image Horizontaly | Flip the Image by X( mirror reflection). | yes/no |
Flip Image Verticaly | Flip the Image by Y(Upside down). | yes/no |
Set As Background | A boolean indicating whether the image should be set as the canvas background. | yes/no |
- Delete image - Delete a selected element
- Get Image - converts the entire canvas or its specific elements into an image URL. The action allows for specifying the image format and quality
Fields:
Title | Description | Type |
Image Quality | The quality of the output image, typically a value between 0 and 1, where 1 is the highest quality. | number |
Image Formats | The desired format of the output image (e.g., 'png', 'jpeg'). | dropdown |
Exposed states:
Title | Description | Type |
Image to Save | The state where the generated image URL is stored. | file |
Events:
Title | Description |
Image Ready to be Saved | Triggered when the image URL is successfully generated and ready for use. |
- Lock as background Image - allows users to designate an active (currently selected) canvas object as a non-selectable background element. This is useful in scenarios where certain elements on the canvas should remain static or uneditable while others are manipulated.
- Erase Canvas - Delete background and all elements from Canvas
- Draw Rectangle - allows users to add a customizable rectangle object to the canvas. The rectangle can be configured with various properties like fill color, size, rotation angle, opacity, and border styling.
Fields:
Title | Description | Type |
Width | The width of the rectangle. | number |
Height | The height of the rectangle. | number |
Rotate Rectangle | The rotation angle of the rectangle in degrees. | number |
Fill Rectangle | The color used to fill the rectangle. | color |
Rectangle Opacity | The opacity of the rectangle, typically a value between 0 (completely transparent) and 1 (completely opaque). | number |
Rectangle Stroke Width | The width of the rectangle's border stroke. | number |
Fill Stroke | The color of the rectangle's border stroke. | color |
- Draw Triangle - allows users to add a customizable triangle object to the canvas. The rectangle can be configured with various properties like fill color, size, rotation angle, opacity, and border styling.
- Draw Circle - allows users to add a customizable circle object to the canvas. The rectangle can be configured with various properties like fill color, size, rotation angle, opacity, and border styling.
- Draw Ellipse - allows users to add a customizable ellipse object to the canvas. The rectangle can be configured with various properties like fill color, size, rotation angle, opacity, and border styling.
- Add Text - Choose specs For Text
- Edit Element - Make changes to an Selected Element(Element can be selected only by DOUBLE CLICK)
- Free Drawing - Enables Free Drawing
- Disable Free Drawing - Disables Free Drawing
Workflow example
- Place the Fabrics Canvas visual element on the page
- Set events to trigger different plugin actions with necessary settings
