Canvas
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.
Getting Started
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.
Example Usage
First add the component to a form by dragging it into the form using the Palette Wizard. It should be under Canvas (Canvas).
API Documentation
Event Handlers
onClick
Returns the item ID and object selected.
Params
| Type | Name | Summary | Required |
|---|---|---|---|
String | id | ID of selected object if it has one. | Optional |
Object | object | returns object selected. | Required |
onLongPress
Returns the item ID and object selected.
Params
| Type | Name | Summary | Required |
|---|---|---|---|
String | id | ID of selected object if it has one. | Optional |
Object | object | returns object selected. | Required |
onModified
When canvas is modified execute this handler.
onReady
Fires when canvas has completed initial rendering
API Methods
addObject
Add an object to canvas
copySelectedObject
Copies selected object on canvas
updateObject
Update an object
removeObject
Remove an object
clearCanvas
Clear the canvas
startAnimate
Start animations
stopAnimate
Stop animations
getSelectedObject
Return selected object
setSelectedObject
Select an object on the canvas
saveCanvas
Return current canvas as JSON String
loadCanvas
Draw a canvas using JSON String
saveAsImage
Return current canvas as an Image
bringToFront
Bring selected element to top of canvas
rotate
Rotate the entire canvas and it's objects
ZoomOnPoint
Zoom on a particular point.
Params
| Type | Name | Summary | Required |
|---|---|---|---|
Number | x | X coordinate | Required |
Number | y | Y coordinate | Required |
Number | zoomLevel | How far to zoom (0+) | Required |
Component Properties
| Type | Name | Summary | 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 |
canvasOptions
| Type | Name | Summary | Required |
|---|---|---|---|
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 |
canvasObject
| Type | Name | Summary | Required |
|---|---|---|---|
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 |
Last updated