Canvas
Last updated
Last updated
Welcome to the svycanvas wiki!
This wiki provides comprehensive documentation for using the svycanvas web-component, which allows you to create and display an interactive canvas within Servoy's NGClient.
First import the component using one of the release binaries or via Servoy's Web Package Manager.
If you would like to see the component in an example install the included solution svyCanvasExample.servoy.
First add the component to a form by dragging it into the form using the Palette Wizard. It should be under Canvas (Canvas).
Returns the item ID and object selected.
Params
Type | Name | Summary | Required |
---|---|---|---|
Returns the item ID and object selected.
Params
When canvas is modified execute this handler.
Fires when canvas has completed initial rendering
Add an object to canvas
Copies selected object on canvas
Update an object
Remove an object
Clear the canvas
Start animations
Stop animations
Return selected object
Select an object on the canvas
Return current canvas as JSON String
Draw a canvas using JSON String
Return current canvas as an Image
Bring selected element to top of canvas
Rotate the entire canvas and it's objects
Zoom on a particular point.
Params
Type | Name | Summary | Required |
---|---|---|---|
Type | Name | Summary | Required |
---|---|---|---|
Type | Name | Summary | Required |
---|---|---|---|
Type | Name | Summary | Required |
---|---|---|---|
Type | Name | Summary | Required |
---|---|---|---|
String
id
ID of selected object if it has one.
Optional
Object
object
returns object selected.
Required
String
id
ID of selected object if it has one.
Optional
Object
object
returns object selected.
Required
Number
x
X coordinate
Required
Number
y
Y coordinate
Required
Number
zoomLevel
How far to zoom (0+)
Required
Array
canvasObjects
An array of canvas objects to be display
Optional
Object
canvasOptions
Options for the canvas
Optional
Number
gridSize
The grid size to use
Required if you are showing the grid.
String
showGrid
Whether or not to show a grid on the canvas.
Optional
String
snapToGrid
Whether or not to try and snap objects to a grid.
Optional
Boolean
selectable
Allow objects to be selected
optional
Boolean
skipTargetFind
disable selection of all objects
optional
Boolean
hasRotatingPoint
disable rotation for objects
optional
Boolean
renderOnAddRemove
Performance setting
optional
Boolean
skipOffscreen
Hide drawing elements off-screen
optional
Boolean
animationSpeed
Speed to run animations
optional
String
objectType
Type of object (Circle,Rectangle,Triangle,Image,Text,Group)
required
array
objects
An array of objects, used if objectType is 'Group
optional
Color
fill
Color fill (default none)
optional
String
opacity
Opacity of object (default 1.0)
optional
Number
width
Width of object (default 0)
optional
Number
height
Height of object (default 0)
optional
Number
radius
Radius of object (default 0)
optional
Number
left
Left position of object from x-axis
optional
Number
top
Top position of object from y-axis
optional
Number
rx
rx position of object from x-axis
optional
Number
ry
ry position of object from y-axis
optional
Color
stroke
Stroke color of an object
optional
String
id
Identifier for object ( if not filled the object cannot be used with handler events)
optional
Number
scaleX
Scale of object for width (default 1.0)
optional
Number
scaleY
Scale of object for height (default 1.0)
optional
String
text
Text of object, only applies if objectType is 'Text'
optional
String
textAlign
Alignment of text object, only applies if objectType is 'Text' (default left)
optional
String
fontSize
Font size of text, only applies if objectType is 'Text'
optional
String
fontFamily
Font family, only applies if objectType is 'Text'
optional
Number
angle
Angle of object
optional
String
mediaName
Use an image or media with object, only applies if objectType is 'Image'
optional
String
spriteName
Use an sprite with object, only applies if objectType is 'Image'
optional
Number
spriteWidth
Sprite width, only applies if objectType is 'Image'
optional
Number
spriteHeight
Sprite height, only applies if objectType is 'Image'
optional
Number
spriteIndex
Sprite index, only applies if objectType is 'Image'
optional
Number
frameTime
Sprite frametime, only applies if objectType is 'Image'
optional
Boolean
selectable
Allows an element to be selected and manipulated (default true)
optional
Boolean
custom_data
Add additional data to an object
optional