ServoyCloudSupportSamplesOpen SourceCommunity

Canvas

(part of package 'Canvas') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

This is a reference page; many components have detailed usage guides here.

Properties

canvasObjects

Array of canvas objects to be rendered on the canvas. Type: Array<CustomType<svycanvas-Canvas.canvasObject>>

canvasOptions

Configuration options for the canvas rendering engine. Type: CustomType<svycanvas-Canvas.canvasOptions>

gridSize

The size, in pixels, of each grid cell used for drawing and snapping. Type: Number Default Value: 10

imagesLoader

Array of media references for images that are preloaded for use in canvas objects. Type: Array<Media>

showGrid

Flag to indicate whether the grid background should be displayed. Type: Number Default Value: 0

snapToGrid

Flag to enable snapping canvas objects to the grid when moved or resized. Type: Number Default Value: 0

styleClass

CSS class applied to the canvas container for custom styling. Type: Styleclass

Events

afterRender()

Called after the canvas has finished rendering all objects.

onClick()

Called when a canvas object is clicked.

onLongPress()

Called when a canvas object is long-pressed (touch event).

onModified()

Called when a canvas object is modified (e.g., moved, scaled, or rotated).

onReady()

Called when the canvas is fully initialized and ready for interaction.

API

ZoomOnPoint(x,y,zoom)

Zooms into the canvas given the x/y coords and a zoom level.

Parameters:

  • {Number} x The x-coordinate to center the zoom on.

  • {Number} y The y-coordinate to center the zoom on.

  • {Number} zoom The zoom level to apply to the canvas.

addObject(objs,setActive)

Add one or more canvas objects and optionally select it. If given more than one item in the objs array, the elements will be grouped as a single entity.

Parameters:

  • {Object} objs An array of canvas objects to be added.

  • {Boolean} [setActive] If true, the added object(s) will be selected as the active item.

bringToFront(id)

Brings a specific element given it's ID, to the front layer of the canvas

Parameters:

  • {String} id The ID of the element to bring to the front layer of the canvas.

clearCanvas()

Clear the canvas and remove all objects

copySelectedObject()

clones the currently selected element.

getSelectedObject(saveCB)

Get the selected object

Parameters:

  • {Function} saveCB A callback function that receives the selected canvas object.

loadCanvas(data)

Loads the canvas from a JSON object

Parameters:

  • {String} data The JSON string containing the canvas structure and properties to be loaded.

printCanvas(resolutionWidth)

Print the current canvas view (TING only). Can use an optional DPI resolution for higher quality prints.

Parameters:

  • {Number} resolutionWidth The optional DPI resolution width for higher quality prints.

removeObject(id)

Remove an canvas object given it's ID.

Parameters:

  • {String} id The ID of the canvas object to be removed.

rotate(angle)

Rotate the canvas at a specific angle

Parameters:

  • {Number} angle The angle, in degrees, to rotate the canvas.

saveAsImage(imgCB)

Save the canvas as an image. The callback has a single parameter which contains the base64 data of the canvas.

Parameters:

  • {Function} imgCB A callback function that receives the base64-encoded image data of the canvas.

saveCanvas(saveCB)

Save the canvas as a JSON object. The callback has a single parameter which contains the JSON object. This JSON object can be used with the loadCanvas method.

Parameters:

  • {Function} saveCB A callback function that receives the serialized JSON object representing the canvas.

setSelectedObject(ids)

Select one or more objects in the canvas given it's ID.

Parameters:

  • {Array<String>} ids An array of object IDs to be selected on the canvas.

startAnimate()

Start animating sprites

stopAnimate()

Stop animating sprites

updateObject(obj,selectActiveItems)

Update a specific canvas object and optionally select it

Parameters:

  • {Object} obj The canvas object to update with new properties or modifications.

  • {Boolean} selectActiveItems If true, the updated object will be selected as the active item.

Types

canvasObject

Definition of a canvas object. scripting type: CustomType<svycanvas-Canvas.canvasObject>

  • angle

    • The rotation angle of the canvas object in degrees.

    • Type: float

  • ctrl

    • Holds control data for the object.

    • Type: object

  • custom_data

    • A generic property to store custom data related to the canvas object.

    • Type: object

  • fill

    • The fill color of the canvas object.

    • Type: color

  • flipX

    • If true, the object is flipped horizontally.

    • Type: boolean

  • flipY

    • If true, the object is flipped vertically.

    • Type: boolean

  • fontFamily

    • For text objects, the font family.

    • Type: string

  • fontSize

    • For text objects, the font size.

    • Type: float

  • frameTime

    • The time (in milliseconds) for each frame in sprite animation.

    • Type: float

  • height

    • The height of the canvas object.

    • Type: float

  • id

    • A unique identifier for the canvas object.

    • Type: string

  • left

    • The x-coordinate position of the canvas object.

    • Type: float

  • mediaName

    • For image objects, the name of the media resource.

    • Type: string

  • objectType

    • The type of canvas object (e.g., 'Circle', 'Rect', 'Triangle', etc.).

    • Type: string

    • Default Value: "Rect"

  • objects

    • For grouped objects, holds an array of child objects.

    • Type: object

  • opacity

    • The opacity level of the canvas object.

    • Type: float

  • path

    • The path data for path-based objects.

    • Type: object

  • points

    • Array of points defining a polygon or polyline.

    • Type: object

  • radius

    • For circular objects, the radius.

    • Type: float

  • rx

    • The horizontal corner radius for rounded rectangles.

    • Type: float

  • ry

    • The vertical corner radius for rounded rectangles.

    • Type: float

  • scaleX

    • The horizontal scaling factor for the object.

    • Type: float

  • scaleY

    • The vertical scaling factor for the object.

    • Type: float

  • selectable

    • Determines if the object is selectable.

    • Type: boolean

  • spriteHeight

    • The height of the sprite frame.

    • Type: float

  • spriteIndex

    • The current index of the sprite frame.

    • Type: float

  • spriteName

    • For sprite objects, the name of the sprite sheet.

    • Type: string

  • spriteWidth

    • The width of the sprite frame.

    • Type: float

  • state

    • Contains state information for the canvas object.

    • Type: object

  • stateHolder

    • An auxiliary property for state management.

    • Type: object

  • stroke

    • The stroke color of the canvas object.

    • Type: color

  • strokeLineJoin

    • The style of the line join for the stroke (e.g., miter, round, bevel).

    • Type: string

  • strokeWidth

    • The width of the stroke (outline) of the canvas object.

    • Type: float

  • text

    • For text objects, the text content.

    • Type: string

    • Default Value: "Text"

  • textAlign

    • For text objects, the text alignment (e.g., left, center, right).

    • Type: string

    • Default Value: "left"

  • top

    • The y-coordinate position of the canvas object.

    • Type: float

  • width

    • The width of the canvas object.

    • Type: float

canvasOptions

Configuration options for the canvas. scripting type: CustomType<svycanvas-Canvas.canvasOptions>

  • ZoomOnMouseScroll

    • Enables zooming via mouse scroll when true.

    • Type: int

    • Default Value: 0

  • animationSpeed

    • Sets the speed of canvas animations in milliseconds.

    • Type: float

    • Default Value: 50

  • hasRotatingPoint

    • Indicates whether canvas objects display a rotation control handle.

    • Type: int

    • Default Value: 1

  • renderOnAddRemove

    • Specifies if the canvas should automatically re-render when objects are added or removed.

    • Type: int

    • Default Value: 0

  • selectable

    • Determines if canvas objects are selectable.

    • Type: int

    • Default Value: 1

  • skipOffscreen

    • If true, objects outside the visible canvas area are not rendered.

    • Type: int

    • Default Value: 1

  • skipTargetFind

    • If true, disables target finding for canvas objects to improve performance.

    • Type: int

    • Default Value: 0

PreviousVisualizationNextChart

Last updated

Was this helpful?