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

Type: Array<CustomType<svycanvas-Canvas.canvasObject>>

---

canvasOptions

Type: CustomType<svycanvas-Canvas.canvasOptions>

---

gridSize

Type: Number Default Value: 10

---

imagesLoader

Type: Array<Media>

---

showGrid

Type: Number Default Value: 0

---

snapToGrid

Type: Number Default Value: 0

---

styleClass

Type: Styleclass

---

Events

afterRender()

---

onClick()

---

onLongPress()

---

onModified()

---

onReady()

---

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:

• {Array<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

scripting type: CustomType<svycanvas-Canvas.canvasObject>

• angle

  • Type: float

• ctrl

  • Type: object

• custom_data

  • Type: object

• fill

  • Type: color

• flipX

  • Type: boolean

• flipY

  • Type: boolean

• fontFamily

  • Type: string

• fontSize

  • Type: float

• frameTime

  • Type: float

• height

  • Type: float

• id

  • Type: string

• left

  • Type: float

• mediaName

  • Type: string

• objectType

  • Type: string

  • Default Value: "Rect"

• objects

  • Type: object

• opacity

  • Type: float

• path

  • Type: object

• points

  • Type: object

• radius

  • Type: float

• rx

  • Type: float

• ry

  • Type: float

• scaleX

  • Type: float

• scaleY

  • Type: float

• selectable

  • Type: boolean

• spriteHeight

  • Type: float

• spriteIndex

  • Type: float

• spriteName

  • Type: string

• spriteWidth

  • Type: float

• state

  • Type: object

• stateHolder

  • Type: object

• stroke

  • Type: color

• strokeLineJoin

  • Type: string

• strokeWidth

  • Type: float

• text

  • Type: string

  • Default Value: "Text"

• textAlign

  • Type: string

  • Default Value: "left"

• top

  • Type: float

• width

  • Type: float

canvasOptions

scripting type: CustomType<svycanvas-Canvas.canvasOptions>

• ZoomOnMouseScroll

  • Type: int

  • Default Value: 0

• animationSpeed

  • Type: float

  • Default Value: 50

• hasRotatingPoint

  • Type: int

  • Default Value: 1

• renderOnAddRemove

  • Type: int

  • Default Value: 0

• selectable

  • Type: int

  • Default Value: 1

• skipOffscreen

  • Type: int

  • Default Value: 1

• skipTargetFind

  • Type: int

  • Default Value: 0

---