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

---