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: canvasObject[]

---

canvasOptions

Type: canvasOptions

---

gridSize

Type: int Default Value: 10

---

imagesLoader

Type: media[]

---

showGrid

Type: int Default Value: 0

---

snapToGrid

Type: int Default Value: 0

---

styleClass

Type: styleclass

---

Events

afterRender

---

onClick

---

onLongPress

---

onModified

---

onReady

---

API

ZoomOnPoint

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

@param {Number} x @param {Number} y @param {Number} zoom

Parameters:

x int y int zoom int

---

addObject

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.

@param {Array<Object>} objs @param {Boolean} setActive

Parameters:

object object setActive boolean (optional)

---

bringToFront

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

@param {string} idx

Parameters:

id string

---

clearCanvas

Clear the canvas and remove all objects

---

copySelectedObject

clones the currently selected element.

---

getSelectedObject

Get the selected object

@param {Function} cb

Parameters:

saveCB function

---

loadCanvas

Loads the canvas from a JSON object

@param {Object} data

Parameters:

data string

---

printCanvas

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

@param {Number} resolutionWidth

Parameters:

resolutionWidth int

---

removeObject

Remove an canvas object given it's ID.

@param {String} idx

Parameters:

id string

---

rotate

Rotate the canvas at a specific angle

@param {Number} angle

Parameters:

angle int

---

saveAsImage

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

@param {Function} imgCB

Parameters:

imgCB function

---

saveCanvas

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.

@param {Function} saveCB

Parameters:

saveCB function

---

setSelectedObject

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

@param {Array<String>} ids

Parameters:

ids object

---

startAnimate

Start animating sprites

---

stopAnimate

Stop animating sprites

---

updateObject

Update a specific canvas object and optionally select it

@param {Object} obj @param {Boolean} setItemActive

Parameters:

object object selectActiveItems boolean

---

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

---