Template Canvas
The Template Canvas component provides an interactive canvas interface for creating and manipulating visual templates with objects and controls.Component Usage
The Template Canvas component provides a flexible canvas interface for building visual templates. You can customize its controls, background, markers, dimensions, and add objects to the canvas.Basic Template Canvas
Render a basic template canvas with default settings.
The dimensions configuration is essential for proper canvas rendering. It defines the canvas size in pixels, ensuring accurate object positioning and scaling.
Alternatively, you can specify dimensions in millimeters by providing DPI settings for automatic pixel conversion.
Canvas with Controls
Enables or disables zoom and ruler controls.
Canvas with Chess board Background
Apply a chess board pattern background to the canvas for better visual reference.
Canvas without Markers
Enables or disables object markers for a cleaner canvas appearance. Click on image to select it the markers will not be displayed.
Canvas with Objects
Add initial objects to be rendered on the canvas.
You can hide the object controls by setting property controls to false.
History and Backend Integration
To enable history functionality (undo/redo), configure the canvas with a cbq endpoint using the withHistory method.
When history is enabled, the canvas will show undo and redo buttons in the control panel and will communicate with the backend to save canvas states.
API
The Template Canvas component exposes several methods for configuration and object manipulation.API PHP
API JS
Events
You can listen to events on the Template Canvas component using the bouion() method. All events data contains
{ element: HTMLElement, name: string, id: string } besides the specific event data.Types
These are the JavaScript types used on the client-side for the Template Canvas component.CanvasObject
The CanvasObject class wraps Fabric.js objects and provides additional functionality for canvas manipulation.
DimensionsConverter
The DimensionsConverter class provides utilities for converting between different measurement units and handling DPI-based calculations for canvas dimensions.