Qmaze2D How To/en

Naar de Nederlandse versie: Qmaze2D_How_To/nl

Qmaze 2D product configurator user manual -- Engels / English

1. Getting started

Before getting started with creating the configurator you have to add some code to the outputscript.
This code does not only make sure that the canvas works like intented, but it also makes sure that it fits your wishes and requirements.
Below are a few examples (templates) of the code that you could use.

Templates

Template: The canvas uses the surrounding container for it's size.

Template: You choose the sizing yourself.

Template: You add a container yourself where you define the sizing. (With bootstrap)

Template: You add a container yourself where you define the sizing. (Without bootstrap)

Template: (OPTION) Loader

2. Adding objects / images to the canvas.

Adding objects, images and text can easily be done with the help of a few functions.
You can use these functions in the rules and/or the outputscript.

2a. Filling the canvas using the rules.

Function structure:
x3d(id).function = value

Function structure complete:
x3d(object).functionname = value

In this example we will add an image and an text object to the canvas, which we are going to alter using different functions.

Do you have multiple canvasses? To add objects / images and text objects you must declare to which canvas these will be added beforehand, if you do not do this the latest added canvas will be used.

You can do that using this function:
x3d(id).setactivecanvas;

An example of this:
x3d(c).setactivecanvas;

• Attention! We don't use ' ' and/or " " in the rules!*
  

Adding our first objects to the canvas

Adding a text object:
x3d(welcometext).settext = Hello World!

First of we will change the location of the text object, because this is placed in the top left by default.
We can achieve this using the setx and sety functions:

x3d(welcometext).setx = 100
x3d(welcometext).sety = 50

The image is now placed 100 pixels to the right and 50 pixels to the bottom (from the topleft)

Multiple functions work 2 ways around; they can not only add, but also alter objects.
When settext is run on an object that already exists but with a different value, the existent text is replaced with the new value.

x3d(welcometext).settext = How are you?

The text is replaced from 'Hello World!' to 'How are you?'.

Adding a image is not much different from adding a text object:

x3d(welcomeimg).setimage = /Images/pug.png

Changing the sizing (in this case of an image) can be done like this:

x3d(welcomeimg).setheight = 100
x3d(welcomeimg).setwidth= 100

The image is now 100 pixels in height and 100 pixels in width.

We can also change the sizing of the image using scale:

x3d(welcomeimg).setscale= 0.5

Through the setscale function we made the image 0.5x of its current size.

Besides the setx and sety functions theres also a function called setz.
This function changes the objects' layering:

x3d(welcomeimg).setz = 0

The given value in this example is 0, this is all the way in the back.
This means that all objects will be placed above this image.

The object that was on layer 0 is now placed into layer 1 and is therefore now above the image.

2b. Filling the canvas using the outputscript.

Function structure:
x3d(id).function = value

Function structure complete:
x3d(object).functionname = value

In this example we will add an image and an text object to the canvas, which we are going to alter using different functions.

Do you have multiple canvasses? To add objects / images and text objects you must declare to which canvas these will be added beforehand, if you do not do this the latest added canvas will be used.

You can do that using this function:
setactivecanvas('id');

An example of this:
setactivecanvas('c');

Adding our first objects to the canvas

Adding a text object:
settext('welcometext','Hello World!');

First of we will change the location of the text object, because this is placed in the top left by default.
We can achieve this using the setx and sety functions:

setx('welcometext',100);
sety('welcometext',50);

The image is now placed 100 pixels to the right and 50 pixels to the bottom (from the topleft)

Multiple functions work 2 ways around; they can not only add, but also alter objects.
When settext is run on an object that already exists but with a different value, the existent text is replaced with the new value.

settext('welcometext','How are you?');

The text is replaced from 'Hello World!' to 'How are you?'.

Adding a image is not much different from adding a text object:

setimage('welcomeimg','/Images/pug.png');

Changing the sizing (in this case of an image) can be done like this:

setheight('welcomeimg',100);
setwidth('welcomeimg',100);

The image is now 100 pixels in height and 100 pixels in width.

We can also change the sizing of the image using scale:

setscale('welcomeimg',0.5);

Through the setscale function we made the image 0.5x of its current size.

Besides the setx and sety functions theres also a function called setz.
This function changes the objects' layering:

setz('welcomeimg',0);

The given value in this example is 0, this is all the way in the back.
This means that all objects will be placed above this image.

The object that was on layer 0 is now placed into layer 1 and is therefore now above the image.

3a. Explanation per individual function (Rules)

Adding / Altering (existing) objects / images:

Function name:
setcanvas

Function description:
Changes the default canvas to a fabric canvas.

Function structure:
x3d(object).setcanvas;

Example:
x3d(c).setcanvas;

Function name:
settext

Function description:
Adds a text object to a canvas or changes the text of an already existent text object.

Function structure:
x3d(object).settext = value

Example:
x3d(welcometext).settext = Hello World!
In case a text object already exists; When the id matches that of an already existent text object, the text of this object is then replaced by the given value.
If you wish to split a sentence (enter), you can use \n.
An example of this: x3d('welcomeimg').settext = Hello \n World!

Function name:
setimage

Function description:
Adds a image to a canvas or changes the source/url or data string of an already existent image.

Function structure:
x3d(object).setimage = source/url/data-string

Example:
x3d(object).setimage = /Images/pug.png
In case a image already exists; When the id matches that of an already existent image, the source/url or datastring of this image will be replaced by the given value.

Function name:
setbgimg

Function description:
Adds a background image to a canvas or changes the current background image, the image fills the entire canvas.

Function structure:
x3d(object).setbgimg = source/url/data-string

Example:
x3d(object).setbgimg = /Images/pineapples.png
In case a background image already exists; When the id matches that of an already existing background image, the source/url or data string of this background image will be replaced by the given value.
When you add a background image with another id whilst a background image is already active on that canvas, the lastest added background image will be the one shown because of the layering structure. (see setz)

Function name:
setrectangle

Function description:
Adds a rectangle to a canvas or changes an already existent rectangle. ( position, height and width )

Function structure:
x3d(object).setrectangle = x1,y1,x2,y2

Example:
x3d(newrect).setrectangle = 50,50,100,100
The rectangle in this example starts ( starting top left (0,0)) 50 pixels to the right and 50 pixels to the bottom.
In case a rectangle with this id is already existent, the locations ( and the width,height ) are changed.

Function name:
setcircle

Function description:
Adds a circle to a canvas or changes an already existent circle. ( position and radius )

Function structure:
x3d(object).setcircle = x,y,radius

Example:
x3d(newcircle).setcircle = 50,50,25
The circle in this example starts ( starting top left (0,0)) 50 pixels to the right and 50 pixels to the bottom and gets a 25 pixel radius.
In case a circle with this id is already existent, the location and radius is changed.

Function name:
settriangle

Function description:
Adds a triangle to a canvas or changes an already existent circle. ( position, height and width )

Function structure:
x3d(object).settriangle = x,y,width,height

Example:
x3d(newtriangle).settriangle = 50,50,75,75
The triangle in this example starts ( starting top left (0,0)) 50 pixels to the right and 50 pixels to the bottom and get a 75 pixels height and a 75 pixels width.
In case a triangle with this id is already existent, the location, height and width are changed.

Function name:
setpolygon

Function description:
Adds a polygon to a canvas or changes an already existent polygon, the begin and endpoint always connect. ( positions)

Function structure:
x3d(object).setpolygon = x1,y1,x2,y2 etc.

Example:
x3d(newpoly).setpolygon = 20,0,40,50,60,80,40,70,20,60
The polygon in this example starts ( starting top left (0,0)) 20 pixels to the right and 0 pixels to the bottom, the second point is 40 pixels to the right and 50 pixels to the bottom etc.
The end of the polygon always connects with the beginpoint.
In case a triangle with this id is already existent, the points get changed.

Function name:
setarrows

Function description:
Adds a line to the canvas with 2 arrowpoints or replaces an already existing arrow/line.

Function structure:
x3d(object).setarrows = x1,y1,x2,y2

Example:
x3d(newarrow).setarrows = 100,100,300,300
The arrow in this example starts ( starting top left (0,0)) 100 pixels to the right and 100 pixels to the bottom and stops 300 pixels to the right and 300 pixels to the bottom.
In case a arrow with this id is already existent (setline,setarrow,setarrows), the positions are replaced with the given value and if required arrowpoints are added/removed.

Function name:
setarrow

Function description:
Adds a line to a canvas with 1 arrowpoint or replaces an already existing arrow/line.

Function structure:
x3d(object).setarrow = x1,y1,x2,y2

Example:
x3d(object).setarrows = 100,100,300,300
The arrow in this example starts ( starting top left (0,0)) 100 pixels to the right and 100 pixels to the bottom and stops 300 pixels to the right and 300 pixels to the bottom.
In case a arrow with this id is already existent (setline,setarrow,setarrows), the positions are replaced with the given value and if required arrowpoints are added/removed.

Function name:
setline

Function description:
Adds a line to a canvas or replaces an already existing arrow/line.

Function structure:
x3d(object).setline = x1,y1,x2,y2

Example:
x3d(object).setline = 100,100,300,300
The arrow in this example starts ( starting top left (0,0)) 100 pixels to the right and 100 pixels to the bottom and stops 300 pixels to the right and 300 pixels to the bottom.
In case a arrow with this id is already existent (setline,setarrow,setarrows), the positions are replaced with the given value and if required arrowpoints are added/removed.

Altering existent objects / images

Function name:
setcolor

Function description:
Wijzigt de kleur van een object.

Function structure:
x3d(object).setcolor = value

Example:
x3d(welcometext).setcolor = red
When the object is a canvas the background color is changed to the given value.

Function name:
setdraggable

Function description:
Veranderd het object tot statisch of dynamisch. ( Gebruiker interactie )

Function structure:
x3d(object).setdraggable = waarde

Example:
x3d(welcomeimg).setdraggable = 1
De waarde kan 1 of 0 zijn waarin 0 het object statisch maakt en 1 het object sleepbaar maakt.

Function name:
setanimationduration

Function description:
Wijzigt de duratie van animaties.

Function structure:
x3d(object).setanimationduration = duratie

Example:
x3d(object).setanimationduration = 1000
In dit voorbeeld is de animatie duratie op 1000ms (1 seconde) gezet.
De animatieduratie geldt voor alle animaties tot het weer aangepast word.

Function name:
setanimationtype

Function description:
Wijzigt welke animatie uitgevoerd word bij positie wijzigingen. (setx,sety en setrotation)

Function structure:
x3d(object).setanimationtype = waarde

Example:
x3d(object).setanimationtype = easeInOutBounce
In dit voorbeeld is het animatie type op InOutBounce gezet, dit zorgt ervoor dat het object 'stuitert' aan het einde van de positie wijziging.
Het animatie type geldt hierna voor alle animaties tot het weer aangepast word.

Function name:
sethandles

Function description:
Wijzigt de handles van een object gebaseerd op de waarde.

Function structure:
x3d(object).sethandles = waarde

Example:
x3d(newrect).sethandles = newrect
Wijzigt welke uitlijning en/of gebruiker interactieve blokjes aanwezig zijn.

Function name:
sethandlecolor

Function description:
Wijzigt de kleur van de handlers.

Function structure:
x3d(object).sethandlecolor = waarde

Example:
x3d(newrect).sethandlecolor = red

Function name:
setheight

Function description:
Wijzigt de hoogte van een object in pixels.

Function structure:
x3d(object).setheight = waarde

Example:
x3d(welcomeimg).setheight = 150

Function name:
setwidth

Function description:
Wijzigt de breedte van een object in pixels.

Function structure:
x3d(object).setwidth = waarde

Example:
x3d(welcomeimg).setwidth = 250

Function name:
setscale

Function description:
Wijzigt de hoogte en breedte van een object of afbeelding d.m.v. een schaal.

Function structure:
x3d(object).setscale = waarde

Example:
x3d(welcomeimg).setscale = 0.8
De waarde representeerd de schaal waarop het object / de afbeelding word omhoog geschaald in zowel de x als de y as.
De waarde 1 is de originele waarde.

Function name:
setid

Function description:
Wijzigt het id van een al bestaande object / afbeelding.

Function structure:
x3d(object).setid = waarde

Example:
x3d(welcomeimg).setid = goodbyeimg
Het object is het id van het object dat gewijzigd word, de waarde is het nieuwe id, het nieuwe id mag nog niet in gebruik zijn.

Function name:
setlineheight

Function description:
Wijzigt hoeveel verschil er tussen text regels zit.

Function structure:
x3d(object).setlineheight = waarde

Example: x3d(welcometext).setlineheight = 10

Function name:
setrotation

Function description:
Wijzigt de rotatie van een object / afbeelding.

Function structure:
x3d(object).setrotation = waarde

Example:
x3d(welcomeimg).setrotation = 90
De waarde is de rotatie vanaf het originele rotatiepunt (0) in graden.

Function name:
setx

Function description:
Wijzigt de positie van een object / afbeelding op de x-as. ( in pixels waarin links 0 is )

Function structure:
x3d(object).setx = waarde

Example:
x3d(welcomeimg).setx = 500
De afbeelding word nu 500 pixels vanaf de linkerkant verschoven naar rechts.

Function name:
sety

Function description:
Wijzigt de positie van een object / afbeelding op de y-as. ( in pixels waarin bovenin 0 is )

Function structure:
x3d(object).sety = waarde

Example:
x3d(welcomeimg).sety = 200
De afbeelding word nu 200 pixels vanaf de bovenkant verschoven naar onderen toe.

Function name:
setz

Function description:
Wijzigt op welke laag een object / afbeelding zich bevind. ( waarin 0 achterin is )

Function structure:
x3d(object).setz = waarde

Example:
x3d(welcomeimg).setz = 10
De waarde is de laag waarop het object / de afbeelding geplaatst wordt, waarbij de laag 0 helemaal achterin is.
Het object / de afbeelding die al actief is op de gekozen waarde wordt 1 plek omhoog geplaatst.

Function name:
setstroke

Function description:
Wijzigt de 'stroke' (/omhulsel) van een object.

Function structure:
x3d(object).setstroke = waarde

Example:
x3d(newrect).setstroke = 20
Het object krijgt een omranding van de waarde in pixels.

Function name:
setstrokecolor

Function description:
Wijzigt de kleur van de 'stroke' (/omhulsel) van een object.

Function structure:
x3d(object).setstrokecolor = waarde

Example:
x3d(newrect).setstrokecolor = blue

Function name:
settextfont

Function description:
Wijzigt het lettertype van een tekst object.

Function structure:
x3d(object).settextfont = waarde

Example:
x3d(welcometext).settextfont = Arial
Het lettertype moet reeds bestaan, als dit niet het geval is behoud het de originele waarde. Let op: Hoofdletter gevoelig!
Lettertypen kunnen direct gedownload worden of via url link gebruikt worden via: fonts.google.com

Function name:
settextsize

Function description:
Wijzigt de grootte van een tekst object.

Function structure:
x3d(object).settextsize = waarde

Example:
x3d(welcometext).settextsize = 20
De waarde is het text formaat in pixels, waarbij 16 pixels de standaard is.

Function name:
settextweight

Function description:
Wijzigt de 'dikte' van een tekst object. (Bold)

Function structure:
x3d(object).settextweight = waarde

Example:
x3d(welcometext).settextweight = 400
Mogelijke waarden: 'light', 'normal', 'bold', nummer.

Function name:
setvisible

Function description:
Wijzigt de zichtbaarheid van een object / afbeelding of canvas.

Function structure:
x3d(object).setvisible = waarde

Example:
x3d(welcometext).setvisible = 0.7
Voor het zichtbaar of onzichtbaar maken van het canvas dient de waarde 1 of 0 te zijn, waarbij 0 onzichtbaar is en 1 zichtbaar.
Voor het zichtbaar of onzichtbaar maken van objecten / afbeeldingen dient de waarde tussen de 0 en de 1 te liggen, waarbij 0 onzichtbaar is en 1 zichtbaar, hierbij mogen decimalen gebruikt worden.

Function name:
setflipx

Function description:
Draait het object / de afbeelding om. (Horizontaal)

Function structure:
x3d(object).setflipx = waarde

Example:
x3d(welcomeimg).setflipx = true
De waarde 'true' draait het object / de afbeelding om van de originele waarde, de waarde 'false' zet het object / de afbeelding terug naar originele waarde.
De waarde 'flip' zorgt er altijd voor dat het object / de afbeelding omdraait, ongeacht de staat / rotatie etc.

Function name:
setflipy

Function description:
draait het object / de afbeelding om . (Verticaal)

Function structure:
x3d(object).setflipy = waarde

Example:
x3d(welcomeimg).setflipy = flip
De waarde 'true' draait het object / de afbeelding om van de originele waarde, de waarde 'false' zet het object / de afbeelding terug naar originele waarde.
De waarde 'flip' zorgt er altijd voor dat het object / de afbeelding omdraait, ongeacht de staat / rotatie etc.

Function name:
setdefault

Function description:
Wijzigt de standaard waarde waarmee objecten/afbeeldingen ingeladen worden.

Function structure:
x3d(object).setdefault = property,propertyvalue

Example:
x3d(text).setdefault = fill,red

Retrieving object / imag properties

Function name:
getproperty

Function description:
Haalt de gekozen eigenschap (waarde) op van het object / de afbeelding.

Function structure:
x3d(object).getproperty = waarde

Example:
x3d(welcomeimg).getproperty = top
De waarde is de eigenschap die u op wilt halen.

Function name:
getx

Function description:
Haalde de x-waarde op van het object.

Function structure:
x3d(object).getx

Example:
x3d(welcomeimg).getx

Function name:
gety

Function description:
Haalde de y-waarde op van het object.

Function structure:
x3d(object).gety

Example:
x3d(welcomeimg).gety

Function name:
getz

Function description:
Haalde de laag op waarin het object zich bevind.

Function structure:
x3d(object).getz

Example:
x3d(welcomeimg).getz

Function name:
getscale

Function description:
Haalt de schaal op van het object.

Function structure:
x3d(object).getscale

Example:
x3d(welcomeimg).getscale

Function name:
getscalex

Function description:
Haalt de x-schaal op van het object.

Function structure:
x3d(object).getscalex

Example:
x3d(welcomeimg).getscalex

Function name:
getscaley

Function description:
Haalt de y-schaal op van het object.

Function structure:
x3d(object).getscalex

Example:
x3d(welcomeimg).getscalex

Other functions

Function name:
copy

Function description:
Kopieert het gekozen object / afbeelding en geeft deze een nieuw id.

Function structure:
x3d(object).copy = waarde

Example:
x3d(welcomeimg).copy = newimage
Het nieuwe id (waarde) moet uniek zijn.

Function name:
delete

Function description:
Verwijderd het gekozen object / afbeelding van het canvas.

Function structure:
x3d(object).delete

Example:
x3d(newimage).delete
Bij deze functie dient enkel een object(id) meegegeven te worden.

Function name:
clearcanvas

Function description:
Verwijderd alle objecten en afbeeldingen uit het gekozen canvas.

Function structure:
x3d(object).clearcanvas

Example:
x3d(c).clearcanvas
Bij deze functie dient enkel een object(id) meegegeven te worden.
Het object(id) is in dit geval dat van een canvas.

Function name:
screenshot

Function description:
Maakt een scherm afdruk van een canvas.

Function structure:
x3d(object).screenshot

Example:
x3d(c).screenshot
Bij deze functie dient enkel een object(id) meegegeven te worden.
Het object(id) is in dit geval dat van een canvas.

3b. Explanation per individual function (Outputscript)

Adding / Altering (existing) objects / images

Functienaam:
setcanvas

Functie beschrijving:
Veranderd een standaard canvas tot een fabric canvas.

Functie opbouw:
setcanvas('object');

Voorbeeld:
setcanvas('c');

Functienaam:
settext

Functie beschrijving:
Voegt een tekst object toe of vervangt de tekst van een al bestaande tekst object.

Functie opbouw:
settext ('object','waarde');

Voorbeeld:
settext('welcometext','Hello World!');
Indien een tekst object al bestaat; Wanneer het id overeenkomt met dat van een al bestaand tekst object, word de tekst hiervan vervangen door de door uw opgegeven waarde.
Indien u een zin wil splitsen (enter), kunt u gebruik maken van \n.
Een voorbeeld hiervan: x3d(welcomeimg).settext = Hello \n World!

Functienaam:
setimage

Functie beschrijving:
Voegt een afbeelding toe of vervangt de source/url of data string van een al bestaande afbeelding

Functie opbouw:
setimage('object ','source/url/data-string');

Voorbeeld:
setimage('welcomeimg','/Images/pug.png');
Indien een afbeelding al bestaat; Wanneer het id overeenkomt met dat van een al bestaande afbeelding, Word de source/url of datastring vervangen door de door uw opgegeven waarde.

Functienaam:
setbgimg

Functie beschrijving:
Voegt een achtergrond afbeelding toe of vervangt de huidige achtergrond afbeelding, de afbeelding vult het hele canvas.

Functie opbouw:
setbgimg('object','source/url/data-string');

Voorbeeld:
setbgimg('bgimg','/Images/pineapples.png');
Indien een achtergrond afbeelding al bestaat; Wanneer het id overeenkomt met dat van een al bestaande achtergrond afbeelding, word de source/url of data string vervangen door de door uw opgegeven waarde.
Indien u een achtergrond afbeelding toe voegt met een ander id terwijl er al een actief is word de laatst aangeroepen achtergrond afbeelding, de achtergrondafbeelding die u zult zien i.v.m. de lagen structuur. ( zie setz )

Functienaam:
setrectangle

Functie beschrijving:
Voegt een vierkant/rechthoek toe of past een al bestaande vierkant/rechthoek aan. ( positie , grootte en hoogte )

Functie opbouw:
setrectangle('object','x1,y1,x2,y2');

Voorbeeld:
setrectangle('newrect' , '50,50,100,100');
De rectangle begint in dit voorbeeld (vanaf linksboven (0,0)) 50 pixels naar rechts en 50 pixels naar beneden.
Indien er al een rectangle is met dit id worden de locaties ( en dus ook de grootte en hoogte ) vervangen.

Functienaam:
setcircle

Functie beschrijving:
Voegt een cirkel toe of past een al bestaande cirkel aan. ( positie en radius )

Functie opbouw:
setcircle('object','x,y,radius');

Voorbeeld:
setcircle('newcircle','50,50,25');
De cirkel begint in dit geval (vanaf linksboven (0,0)) 50 pixels naar rechts en 50 pixels naar beneden en krijgt een radius van 25 pixels.
Indien er al een cirkel is met dit id worden de locaties en de radius vervangen.

Functienaam:
settriangle

Functie beschrijving:
Voegt een driehoek toe of past een al bestaande driehoek aan. ( positie , grootte en hoogte )

Functie opbouw:
settriangle ('object','x,y,width,height');

Voorbeeld:
settriangle('newtriangle',50,50,75,75');
De driehoek begint in dit geval (vanaf linksboven (0,0)) 50 pixels naar rechts en 50 pixels naar beneden en krijgt een hoogte van 75 pixels en een breedte van 75 pixels.
Indien er al een driehoek is met dit id worden de locaties, de hoogte en de breedte vervangen.

Functienaam:
setpolygon

Functie beschrijving:
Voegt een polygon toe of past een al bestaande cirkel aan, het eindpunt verbind altijd met het beginpunt. ( posities )

Functie opbouw:
setpolygon('object','x1,y1,x2,y2 etc.');

Voorbeeld:
setpolygon('newpoly','20,0,40,50,60,80,40,70,20,60');
De polygon begint in dit geval (vanaf linksboven (0,0)) 20 pixels naar rechts en 0 pixels naar beneden, het 2e punt is 40 pixels naar rechts en 50 pixels naar beneden etc.
Het einde van de polygon verbind automatisch met het beginpunt.
Indien er al een polygon is met dit id worden de punten vervangen.

Functienaam:
setarrows

Functie beschrijving:
Voegt een lijn toe met 2 pijlpunten of vervangt een al bestaande pijl/lijn.

Functie opbouw:
setarrows('object','x1,y1,x2,y2');

Voorbeeld:
setarrows('newarrow','100,100,300,300');
De pijl begint in dit geval (vanaf linksboven (0,0)) 100 pixels naar rechts en 100 pixels naar beneden, en eindigt 300 pixels naar rechts en 300 pixels naar beneden.
Indien er al een pijl/lijn bestaat met dit id ( via setarrows,setarrow of setline) worden de posities hiervan vervangen, en indien van toepassing verdwijnen er pijlen of worden er pijlen toegevoegd.

Functienaam:
setarrow

Functie beschrijving:
Voegt een lijn toe met 1 pijlpunt of vervangt een al bestaande pijl/lijn.

Functie opbouw:
setarrow('object','x1,y1,x2,y2');

Voorbeeld:
setarrows('newdbarrow','100,100,300,300');
De pijl begint in dit geval (vanaf linksboven (0,0)) 100 pixels naar rechts en 100 pixels naar beneden, en eindigt 300 pixels naar rechts en 300 pixels naar beneden.
Indien er al een pijl/lijn bestaat met dit id ( via setarrows,setarrow of setline) worden de posities hiervan vervangen, en indien van toepassing verdwijnen er pijlen of worden er pijlen toegevoegd.

Functienaam:
setline

Functie beschrijving:
Voegt een lijn toe of vervangt een al bestaande pijl/lijn.

Functie opbouw:
setline('object','x1,y1,x2,y2');

Voorbeeld:
setline('newline','100,100,300,300');
De lijn begint in dit geval (vanaf linksboven (0,0)) 100 pixels naar rechts en 100 pixels naar beneden, en eindigt 300 pixels naar rechts en 300 pixels naar beneden.
Indien er al een pijl/lijn bestaat met dit id ( via setarrows,setarrow of setline) worden de posities hiervan vervangen, en indien van toepassing verdwijnen er pijlen of worden er pijlen toegevoegd.

Altering existent objects / images

Functienaam:
setcolor

Functie beschrijving:
Wijzigt de kleur van een object.

Functie opbouw:
setcolor('object','waarde');

Voorbeeld:
setcolor('welcometext','red');
Wanneer het object een canvas is word de achtergrond kleur veranderd naar de waarde.

Functienaam:
setdraggable

Functie beschrijving:
Veranderd het object tot statisch of dynamisch. ( Gebruiker interactie )

Functie opbouw:
setdraggable('object',waarde);

Voorbeeld:
setdraggable('object',1);
De waarde kan 1 of 0 zijn waarin 0 het object statisch maakt en 1 het object sleepbaar maakt.

Functienaam:
setanimationduration

Functie beschrijving:
Wijzigt de duratie van animaties.

Functie opbouw:
setanimationduration(duratie);

Voorbeeld:
setanimationduration(1000);
In dit voorbeeld is de animatie duratie op 1000ms (1 seconde) gezet.
De animatieduratie geldt voor alle animaties tot het weer aangepast word.

Functienaam:
setanimationtype

Functie beschrijving:
Wijzigt welke animatie uitgevoerd word bij positie wijzigingen. (setx,sety en setrotation)

Functie opbouw:
setanimationtype('waarde');

Voorbeeld:
setanimationtype('easeInOutBounce');
In dit voorbeeld is het animatie type op InOutBounce gezet, dit zorgt ervoor dat het object 'stuitert' aan het einde van de positie wijziging.
Het animatie type geldt hierna voor alle animaties tot het weer aangepast word.

Functienaam:
sethandles

Functie beschrijving:
Wijzigt de handles van een object gebaseerd op de waarde.

Functie opbouw:
sethandles('object',waarde);

Voorbeeld:
sethandles('newrect',1);
Wijzigt welke uitlijning en/of gebruiker interactieve blokjes aanwezig zijn.

Functienaam:
sethandlecolor

Functie beschrijving:
Wijzigt de kleur van de handlers.

Functie opbouw:
sethandlecolor('object','waarde');

Voorbeeld:
sethandlecolor('newrect','red');

Functienaam:
setheight

Functie beschrijving:
Wijzigt de hoogte van een object in pixels.

Functie opbouw:
setheight('object',waarde);

Voorbeeld:
setheight('welcomeimg',150);

Functienaam:
setwidth

Functie beschrijving:
Wijzigt de breedte van een object in pixels.

Functie opbouw:
setwidth('object',waarde);

Voorbeeld:
setwidth('welcomeimg',250);

Functienaam:
setscale

Functie beschrijving:
Wijzigt de hoogte en breedte van een object of afbeelding d.m.v. een schaal.

Functie opbouw:
setscale('object',waarde);

Voorbeeld:
setscale('welcomeimg',0.8);
De waarde representeerd de schaal waarop het object / de afbeelding word omhoog geschaald in zowel de x als de y as.
De waarde 1 is de originele waarde.

Functienaam:
setid

Functie beschrijving:
Wijzigt het id van een al bestaande object / afbeelding.

Functie opbouw:
setid('object','waarde');

Voorbeeld:
setid('welcomeimg','goodbyeimg');
Het object is het id van het object dat gewijzigd word, de waarde is het nieuwe id, het nieuwe id mag nog niet in gebruik zijn.

Functienaam:
setlineheight

Functie beschrijving:
Wijzigt hoeveel verschil er tussen text regels zit.

Functie opbouw:
setlineheight('object',waarde);

Voorbeeld:
setlineheight('welcometext',10);

Functienaam:
setrotation

Functie beschrijving:
Wijzigt de rotatie van een object / afbeelding.

Functie opbouw:
setrotation('object',waarde);

Voorbeeld:
setrotation('welcomeimg',90);
De waarde is de rotatie vanaf het originele rotatiepunt (0) in graden.

Functienaam:
setx

Functie beschrijving:
Wijzigt de positie van een object / afbeelding op de x-as. ( in pixels waarin links 0 is )

Functie opbouw:
setx('object',waarde);

Voorbeeld:
setx('welcomeimg',500);
De afbeelding word nu 500 pixels vanaf de linkerkant verschoven naar rechts.

Functienaam:
sety

Functie beschrijving:
Wijzigt de positie van een object / afbeelding op de y-as. ( in pixels waarin bovenin 0 is )

Functie opbouw:
sety('object',waarde);

Voorbeeld:
sety('welcomeimg',200);
De afbeelding word nu 200 pixels vanaf de bovenkant verschoven naar onderen toe.

Functienaam:
setz

Functie beschrijving:
Wijzigt op welke laag een object / afbeelding zich bevind. ( waarin 0 achterin is )

Functie opbouw:
setz('object',waarde);

Voorbeeld:
setz('welcomeimg',10);
De waarde is de laag waarop het object / de afbeelding geplaatst wordt, waarbij de laag 0 helemaal achterin is.
Het object / de afbeelding die al actief is op de gekozen waarde wordt 1 plek omhoog geplaatst.

Functienaam:
setstroke

Functie beschrijving:
Wijzigt de 'stroke' (/omhulsel) van een object.

Functie opbouw:
setstroke('object',waarde);

Voorbeeld:
setstroke('newrect',20);
Het object krijgt een omranding van de waarde in pixels.

Functienaam:
setstrokecolor

Functie beschrijving:
Wijzigt de kleur van de 'stroke' (/omhulsel) van een object.

Functie opbouw:
setstrokecolor('object','waarde');

Voorbeeld:
setstrokecolor('newrect','blue');

Functienaam:
settextfont

Functie beschrijving:
Wijzigt het lettertype van een tekst object.

Functie opbouw:
settextfont('object','waarde');

Voorbeeld:
settextfont('welcometext','Arial');
Het lettertype moet reeds bestaan, als dit niet het geval is behoud het de originele waarde. Let op: Hoofdletter gevoelig!
Lettertypen kunnen direct gedownload worden of via url link gebruikt worden via: fonts.google.com

Functienaam:
settextsize

Functie beschrijving:
Wijzigt de grootte van een tekst object.

Functie opbouw:
settextsize('object',waarde);

Voorbeeld:
settextsize('welcometext',20);
De waarde is het text formaat in pixels, waarbij 16 pixels de standaard is.

Functienaam:
settextweight

Functie beschrijving:
Wijzigt de 'dikte' van een tekst object. (Bold)

Functie opbouw:
settextweight('object',waarde);

Voorbeeld:
settextweight('welcometext',400);
Mogelijke waarden: 'light', 'normal', 'bold', nummer.

Functienaam:
setvisible

Functie beschrijving:
Wijzigt de zichtbaarheid van een object / afbeelding of canvas.

Functie opbouw:
setvisible('object',waarde);

Voorbeeld:
setvisible('welcometext',0.7);
Voor het zichtbaar of onzichtbaar maken van het canvas dient de waarde 1 of 0 te zijn, waarbij 0 onzichtbaar is en 1 zichtbaar.
Voor het zichtbaar of onzichtbaar maken van objecten / afbeeldingen dient de waarde tussen de 0 en de 1 te liggen, waarbij 0 onzichtbaar is en 1 zichtbaar, hierbij mogen decimalen gebruikt worden.

Functienaam:
setflipx

Functie beschrijving:
Draait het object / de afbeelding om. (Horizontaal)

Functie opbouw:
setflipx('object',waarde);

Voorbeeld:
setflipx('welcomeimg','true');
De waarde 'true' draait het object / de afbeelding om van de originele waarde, de waarde 'false' zet het object / de afbeelding terug naar originele waarde.
De waarde 'flip' zorgt er altijd voor dat het object / de afbeelding omdraait, ongeacht de staat / rotatie etc.

Functienaam:
setflipy

Functie beschrijving:
draait het object / de afbeelding om . (Verticaal)

Functie opbouw:
setflipy('object',waarde);

Voorbeeld:
setflipy('welcomeimg','true');
De waarde 'true' draait het object / de afbeelding om van de originele waarde, de waarde 'false' zet het object / de afbeelding terug naar originele waarde.
De waarde 'flip' zorgt er altijd voor dat het object / de afbeelding omdraait, ongeacht de staat / rotatie etc.

Functienaam:
setdefault

Functie beschrijving:
Wijzigt de standaard waarde waarmee objecten/afbeeldingen ingeladen worden.

Functie opbouw:
setdefault('object','property,propertyvalue');

Voorbeeld:
setdefault('text','fill,red';

Retrieving object / imag properties

Functienaam:
getproperty

Functie beschrijving:
Haalt de gekozen eigenschap (waarde) op van het object / de afbeelding.

Functie opbouw:
getproperty('object','value');

Voorbeeld:
getproperty('welcomeimg','top');
De waarde is de eigenschap die u op wilt halen.

Functienaam:
getx

Functie beschrijving:
Haalde de x-waarde op van het object.

Functie opbouw:
getx('object');

Voorbeeld:
getx('welcomeimg');

Functienaam:
gety

Functie beschrijving:
Haalde de y-waarde op van het object.

Functie opbouw:
gety('object');

Voorbeeld:
gety('welcomeimg');

Functienaam:
getz

Functie beschrijving:
Haalde de laag op waarin het object zich bevind.

Functie opbouw:
getz('object');

Voorbeeld:
getz('welcomeimg');

Functienaam:
getscale

Functie beschrijving:
Haalt de schaal op van het object.

Functie opbouw:
getscale('object');

Voorbeeld:
getscale('welcomeimg');

Functienaam:
getscalex

Functie beschrijving:
Haalt de x-schaal op van het object.

Functie opbouw:
getscalex('object');x

Voorbeeld:
getscalex('welcomeimg');

Functienaam:
getscaley

Functie beschrijving:
Haalt de y-schaal op van het object.

Functie opbouw:
getscaley('object');

Voorbeeld:
getscaley('welcomeimg');

Other functions

Functienaam:
copy

Functie beschrijving:
Kopieert het gekozen object / afbeelding en geeft deze een nieuw id.

Functie opbouw:
copy('object','waarde');

Voorbeeld:
copy('welcomeimg','newimage');
Het nieuwe id (waarde) moet uniek zijn.

Functienaam:
delete

Functie beschrijving:
Verwijderd het gekozen object / afbeelding van het canvas.

Functie opbouw:
deletethis('object');

Voorbeeld:
deletethis('newimage');
Bij deze functie dient enkel een object(id) meegegeven te worden.

Functienaam:
clearcanvas

Functie beschrijving:
Verwijderd alle objecten en afbeeldingen uit het gekozen canvas.

Functie opbouw:
clearcanvas('object');

Voorbeeld:
clearcanvas('c');
Bij deze functie dient enkel een object(id) meegegeven te worden.
Het object(id) is in dit geval dat van een canvas.

Functienaam:
screenshot

Functie beschrijving:
Maakt een scherm afdruk van een canvas.

Functie opbouw:
screenshot('object');

Voorbeeld:
screenshot('c');
Bij deze functie dient enkel een object(id) meegegeven te worden.
Het object(id) is in dit geval dat van een canvas.