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:
Changes the color of an 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:
Changes the object to be static or dynamic ( user interaction )

Function structure:
x3d(object).setdraggable = value

Example:
x3d(welcomeimg).setdraggable = 1
The value can either be 1 or 0, where 0 makes the object static and 1 makes the object draggable.

Function name:
setanimationduration

Function description:
Changes the duration of animations.

Function structure:
x3d(object).setanimationduration = duration

Example:
x3d(object).setanimationduration = 1000
In this example the animation duration is set to 1000ms (1 second).
The animation duration counts for all animations untill it is altered again.

Function name:
setanimationtype

Function description:
Changes which animation is played when positions change.

Function structure:
x3d(object).setanimationtype = value

Example:
x3d(object).setanimationtype = easeInOutBounce
In this example the animation type is set to InOutBounce, this makes the object 'bounce' at the end of an position change.
The animation type counts for all animations untill it is altered again.

Function name:
sethandles

Function description:
Changes the handles of an object depended on the value.

Function structure:
x3d(object).sethandles = value

Example:
x3d(newrect).sethandles = newrect
Changes which lines and or user interactive corners are visible.

Function name:
sethandlecolor

Function description:
Changes the color of the handles.

Function structure:
x3d(object).sethandlecolor = value

Example:
x3d(newrect).sethandlecolor = red

Function name:
setheight

Function description:
Changes the height of an object in pixels.

Function structure:
x3d(object).setheight = value

Example:
x3d(welcomeimg).setheight = 150

Function name:
setwidth

Function description:
Changes the width of an object in pixels.

Function structure:
x3d(object).setwidth = value

Example:
x3d(welcomeimg).setwidth = 250

Function name:
setscale

Function description:
Changes the width and height of an object or image by scale.

Function structure:
x3d(object).setscale = value

Example:
x3d(welcomeimg).setscale = 0.8
The value represents the scale on which the object / image is scaled. ( x and y axle )
The value 1 is the original value.

Function name:
setid

Function description:
Changes the id of an already existent object / image.

Function structure:
x3d(object).setid = value

Example:
x3d(welcomeimg).setid = goodbyeimg
The object is the id of an object that is to be changed, the value is to become the new id. The new id must not be existent on the canvas.

Function name:
setlineheight

Function description:
Changes how much height is between text lines.

Function structure:
x3d(object).setlineheight = value

Example: x3d(welcometext).setlineheight = 10

Function name:
setrotation

Function description:
Changes the rotation of an object / image.

Function structure:
x3d(object).setrotation = value

Example:
x3d(welcomeimg).setrotation = 90
The value is the rotation starting from the original rotationpoint (0) in degrees. (celcius)

Function name:
setx

Function description:
Changes the position of an object / image on the x-axle. (in pixels where the left is 0)

Function structure:
x3d(object).setx = value

Example:
x3d(welcomeimg).setx = 500
The image in this example will now be placed 500 pixels to the right.

Function name:
sety

Function description:
Changes the position of an object / image on the y-axle. (in pixels where the top is 0)

Function structure:
x3d(object).sety = value

Example:
x3d(welcomeimg).sety = 200
The image in this example will now be placed 200 pixels to the bottom.

Function name:
setz

Function description:
Changes on which layer the object / image resides. ( where 0 is in the back )

Function structure:
x3d(object).setz = value

Example:
x3d(welcomeimg).setz = 10
The value is the layer on which the object / image is placed, where the layer 0 is in the back.
The object / image that is already active on the chosen layer will be placed 1 place higher into the layers.

Function name:
setstroke

Function description:
Changes the stroke of an object.

Function structure:
x3d(object).setstroke = value

Example:
x3d(newrect).setstroke = 20
The object gets a line around the object with the size of the value in pixels.

Function name:
setstrokecolor

Function description:
Changes the color of the objects' stroke.

Function structure:
x3d(object).setstrokecolor = value

Example:
x3d(newrect).setstrokecolor = blue

Function name:
settextfont

Function description:
Changes the text font of an text object.

Function structure:
x3d(object).settextfont = value

Example:
x3d(welcometext).settextfont = Arial
The text font must exist, if this is not the case the text font will remain the same. Attention: Case sensitive!
You can download text fonts directly from fonts.google.com or through a url link.

Function name:
settextsize

Function description:
Changes the text size of a text object.

Function structure:
x3d(object).settextsize = value

Example:
x3d(welcometext).settextsize = 20
The value is the text size in pixels.

Function name:
settextweight

Function description:
Changes the boldness of an text object.

Function structure:
x3d(object).settextweight = value

Example:
x3d(welcometext).settextweight = 400
Possible values: light, normal, bold, number.

Function name:
setvisible

Function description:
Changes the visibility of an object / image / canvas.

Function structure:
x3d(object).setvisible = value

Example:
x3d(welcometext).setvisible = 0.7
To make the canvas visible or invisible the value must be either 1 or 0 where 0 makes it invisible and 1 makes it visible.
To make an object / image visible or invisible the value must be between 0 and 1, where 1 is visible and 0 is invisible, decimals may be used.

Function name:
setflipx

Function description:
Flips the object / image around. (Horizontally)

Function structure:
x3d(object).setflipx = value

Example:
x3d(welcomeimg).setflipx = true
The 'value' true flips the object / image around from it original stance, the value 'false' changes it back to it's original stance.
The value 'flip' makes the object / image flip around no matter which stance it currently is.

Function name:
setflipy

Function description:
Flips the object / image around. (Vertically)

Function structure:
x3d(object).setflipy = value

Example:
x3d(welcomeimg).setflipy = flip
The 'value' true flips the object / image around from it original stance, the value 'false' changes it back to it's original stance.
The value 'flip' makes the object / image flip around no matter which stance it currently is.

Function name:
setdefault

Function description:
Changes the default properties of which an object / image is loaded in with.

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

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

Retrieving object / imag properties

Function name:
getproperty

Function description:
Gets the chosen property (value) of the object / image.

Function structure:
x3d(object).getproperty = value

Example:
x3d(welcomeimg).getproperty = top
The value is the property you wish to retrieve.

Function name:
getx

Function description:
Gets the x-axle value from the object / image.

Function structure:
x3d(object).getx

Example:
x3d(welcomeimg).getx

Function name:
gety

Function description:
Gets the y-axle value from the object / image.

Function structure:
x3d(object).gety

Example:
x3d(welcomeimg).gety

Function name:
getz

Function description:
Gets the layer on which the object / images resides.

Function structure:
x3d(object).getz

Example:
x3d(welcomeimg).getz

Function name:
getscale

Function description:
Gets the objects scale (X&Y combined)

Function structure:
x3d(object).getscale

Example:
x3d(welcomeimg).getscale

Function name:
getscalex

Function description:
Gets the objects x-axle scale.

Function structure:
x3d(object).getscalex

Example:
x3d(welcomeimg).getscalex

Function name:
getscaley

Function description:
Gets the objects y-axle scale.

Function structure:
x3d(object).getscalex

Example:
x3d(welcomeimg).getscalex

Other functions

Function name:
copy

Function description:
Copies the chosen object / image and gives it a new id.

Function structure:
x3d(object).copy = value

Example:
x3d(welcomeimg).copy = newimage
The new id (value) must be unique. (can't already exist)

Function name:
delete

Function description:
Deletes the chosen object / image from the canvas.

Function structure:
x3d(object).delete

Example:
x3d(newimage).delete
To use this function, you only need to enter a object(id).

Function name:
clearcanvas

Function description:
Removes all objects and images from the canvas.

Function structure:
x3d(object).clearcanvas

Example:
x3d(c).clearcanvas
To use this function, you only need to enter a object(id).
The object(id) in this case is that of the canvas.

Function name:
screenshot

Function description:
Makes a screenshot of the chosen canvas.

Function structure:
x3d(object).screenshot

Example:
x3d(c).screenshot
To use this function, you only need to enter a object(id).
The object(id) in this case is that of the 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.