Qmaze2D How To/nl
Contents
Qmaze 2D product configurator handleiding -- Nederlands / Dutch
1. Het begin.
Om gebruik te maken van de configurator dient u enkele regels code toe te voegen aan het outputscript.
Deze code zorgt ervoor dat de canvas niet alleen goed werkt, maar ook aan uw wensen voldoet.
Hieronder staan enkele voorbeelden van code die u kunt gebruiken.
Templates
Template: Canvas vult container.
<!-- GET FabricJS Script Minified-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>
<!-- GET 2D Lib Script -->
<script src="Scripts/Qmaze2dlib.js"></script>
<canvas id="vul hier uw canvas naam in"></canvas>
<script>
$(document).ready(function()
{
// Deze functie dient per canvas uitgevoerd te worden
setcanvas('uw canvas naam');
// Uw functies kunt u hier plaatsen
});
</script>
Template: U bepaalt de hoogte/breedte.
<!-- GET FabricJS Script Minified-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>
<!-- GET 2D Lib Script -->
<script src="Scripts/Qmaze2dlib.js"></script>
<canvas id="vul hier uw canvas naam in" style="height: hoogte px; width: breedte px"></canvas>
<script>
$(document).ready(function()
{
// Deze functie dient per canvas uitgevoerd te worden
setcanvas('uw canvas naam';
// Uw functies kunt u hier plaatsen
});
</script>
Template: U voegt een container toe met formaten. (Zonder Bootstrap)
<!-- GET FabricJS Script Minified-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>
<!-- GET 2D Lib Script -->
<script src="Scripts/Qmaze2dlib.js"></script>
<div style="height: nummer px; width: nummer px ">
<canvas id="vul hier uw canvas naam in"></canvas>
</div>
<script>
$(document).ready(function()
{
// Deze functie dient per canvas uitgevoerd te worden
setcanvas('uw canvas naam');
// Uw functies kunt u hier plaatsen
});
</script>
Template: U voegt een container toe met formaten. (Met Bootstrap)
<!-- GET FabricJS Script Minified-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>
<!-- GET 2D Lib Script -->
<script src="Scripts/Qmaze2dlib.js"></script>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<canvas id="vul hier uw canvas naam in"></canvas>
</div>
<script>
$(document).ready(function()
{
// Deze functie dient per canvas uitgevoerd te worden
setcanvas('uw canvas naam');
// Uw functies kunt u hier plaatsen
});
</script>
Template: (OPTIONEEL) Laadbalk
<!-- GET Preloader CSS --> <link rel="stylesheet" href="Styles/preloader.css"/> <div class="preloader"> <span class="line line-1"></span> <span class="line line-2"></span> <span class="line line-3"></span> <span class="line line-4"></span> <span class="line line-5"></span> <span class="line line-6"></span> <span class="line line-7"></span> <span class="line line-8"></span> <span class="line line-9"></span> <div>Loading</div> </div>
2. Het toevoegen van objecten / afbeeldingen en tekst objecten.
Het toevoegen van objecten, afbeeldingen en tekst gebeurt gemakkelijk via een enkele functies.
Deze functies kunt u uitvoeren via de rules of het outputscript.
2a. Het vullen van de canvas via de rules
Opbouw functie aanvraag:
x3d(object).functie = waarde
Opbouw functie aanvraag volledig:
x3d(id).functienaam = waarde
In dit voorbeeld voegen we een afbeelding en een tekst object toe die we op verschillende manieren gaan aanpassen.
Heeft u meerdere canvassen?, Voor het toevoegen van objecten / afbeeldingen en tekst dient u van te voren te vermelden op welk canvas het toegevoegd moet worden,
anders neemt het het laatst toegevoegde canvas.
Dit kunt u doen met de functie:
x3d(id).setactivecanvas;
Een voorbeeld hiervan is:
x3d(c).setactivecanvas;
*Let op! We gebruiken we geen ' ' en/of " " in de rules!*
Eerste objecten toevoegen aan het canvas
Toevoegen van een tekst object:
x3d(welcometext).settext = Hello World!
Nu gaan we de locaties aanpassen van het tekst object, deze word namelijk standaard links bovenin uw canvas geplaatst.
Dit doen we via de setx en sety functies:
x3d(welcometext).setx = 100
x3d(welcometext).sety = 50
De afbeelding staat nu 100 pixels naar rechts en 50 pixels naar benden. (vanaf linksboven)
Meerdere functies waaronder de settext functie werken 2 kanten op; het kan (text) toevoegen maar ook aanpassen.
Wanneer u de settext op hetzelfde tekst object uitvoerd maar met een andere waarde, word de al bestaande text vervangen:
x3d(welcometext).settext = How are you?
De tekst word vervangen van 'Hello World!' naar 'How are you?'.
Het toevoegen van een afbeelding verschilt niet veel met het toevoegen van een text object:
x3d(welcomeimg).setimage = /Images/pug.png
Het veranderen van de grootte (in dit geval van een afbeelding) kunt u zo doen;
x3d(welcomeimg).setheight = 100
x3d(welcomeimg).setwidth= 100
De afbeelding is nu 100x100 pixels in hoogte en breedte
We kunnen de afbeelding ook aanpassen in formaat gebaseerd op schaal:
x3d(welcomeimg).setscale= 0.5
Via de setscale functie is de image nu 0.5x de originele waarde.
Naast de setx en sety is er namelijk ook een setz functie.
Deze functie zorgt ervoor dat objecten in een bepaalde laag worden geplaatst:
x3d(welcomeimg).setz = 0
De opgegeven waarde in dit voorbeeld is 0, dit is helemaal achterin het canvas.
Dit betekend dat alle andere objecten bovenop de afbeeldingen komen.
Het object wat op de zojuist vervangen locatie stond is nu verschoven naar laag 1 en komt dus bovenop de afbeelding.
2b. Het vullen van de canvas via het outputscript
Opbouw functie aanvraag:
functie(object,waarde);
Opbouw functie aanvraag volledig:
functie(id,waarde);
In dit voorbeeld voegen we een afbeelding en een tekst object toe die we op verschillende manieren gaan aanpassen.
Heeft u meerdere canvassen?, Voor het toevoegen van objecten / afbeeldingen en tekst dient u van te voren te vermelden op welk canvas het toegevoegd moet worden,
anders neemt het het laatst toegevoegde canvas.
Dit kunt u doen met de functie:
setactivecanvas('id');
Een voorbeeld hiervan is:
setactivecanvas('c');
Eerste objecten toevoegen aan het canvas
Toevoegen van een tekst object:
settext('welcometext','Hello World!');
Nu gaan we de locaties aanpassen van het tekst object, deze word namelijk standaard links bovenin uw canvas geplaatst.
Dit doen we via de setx en sety functies:
setx('welcometext',100);
sety('welcometext',50);
De afbeelding staat nu 100 pixels naar rechts en 50 pixels naar benden. (vanaf linksboven)
Meerdere functies waaronder de settext functie werken 2 kanten op; het kan (text) toevoegen maar ook aanpassen.
Wanneer u de settext op hetzelfde tekst object uitvoerd maar met een andere waarde, word de al bestaande text vervangen:
settext('welcometext','How are you?');
De tekst word vervangen van 'Hello World!' naar 'How are you?'.
Het toevoegen van een afbeelding verschilt niet veel met het toevoegen van een text object:
setimage('welcomeimg','/Images/pug.png');
Het veranderen van de grootte (in dit geval van een afbeelding) kunt u zo doen;
setheight('welcomeimg',100);
setwidth('welcomeimg',100);
De afbeelding is nu 100x100 pixels in hoogte en breedte
We kunnen de afbeelding ook aanpassen in formaat gebaseerd op schaal:
setscale('welcomeimg',0.5);
Via de setscale functie is de image nu 0.5x de originele waarde.
Naast de setx en sety is er namelijk ook een setz functie.
Deze functie zorgt ervoor dat objecten in een bepaalde laag worden geplaatst:
setz('welcomeimg',0);
De opgegeven waarde in dit voorbeeld is 0, dit is helemaal achterin het canvas.
Dit betekend dat alle andere objecten bovenop de afbeeldingen komen.
Het object wat op de zojuist vervangen locatie stond is nu verschoven naar laag 1 en komt dus bovenop de afbeelding.
3a. Uitleg per individuele functie (Rules)
Toevoegen / Aanpasen van (bestaande) objecten / afbeeldingen:
Functienaam:
setcanvas
Functie beschrijving:
Veranderd een standaard canvas tot een fabric canvas.
Functie opbouw:
x3d(object).setcanvas;
Voorbeeld:
x3d(c).setcanvas;
Functienaam:
settext
Functie beschrijving:
Voegt een tekst object toe of vervangt de tekst van een al bestaande tekst object.
Functie opbouw:
x3d(object).settext = waarde
Voorbeeld:
x3d(welcometext).settext = 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:
x3d(object).setimage = source/url/data-string
Voorbeeld:
x3d(object).setimage = /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:
x3d(object).setbgimg = source/url/data-string
Voorbeeld:
x3d(object).setbgimg = /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:
x3d(object).setrectangle = x1,y1,x2,y2
Voorbeeld:
x3d(newrect).setrectangle = 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:
x3d(object).setcircle = x,y,radius
Voorbeeld:
x3d(newcircle).setcircle = 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:
x3d(object).settriangle = x,y,width,height
Voorbeeld:
x3d(newtriangle).settriangle = 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:
x3d(object).setpolygon = x1,y1,x2,y2 etc.
Voorbeeld:
x3d(newpoly).setpolygon = 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:
x3d(object).setarrows = x1,y1,x2,y2
Voorbeeld:
x3d(newarrow).setarrows = 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:
x3d(object).setarrow = x1,y1,x2,y2
Voorbeeld:
x3d(object).setarrows = 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:
x3d(object).setline = x1,y1,x2,y2
Voorbeeld:
x3d(object).setline = 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.
Aanpassen van een al bestaand object / afbeelding
Functienaam:
setcolor
Functie beschrijving:
Wijzigt de kleur van een object.
Functie opbouw:
x3d(object).setcolor = waarde
Voorbeeld:
x3d(welcometext).setcolor = 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:
x3d(object).setdraggable = waarde
Voorbeeld:
x3d(welcomeimg).setdraggable = 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:
x3d(object).setanimationduration = duratie
Voorbeeld:
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.
Functienaam:
setanimationtype
Functie beschrijving:
Wijzigt welke animatie uitgevoerd word bij positie wijzigingen. (setx,sety en setrotation)
Functie opbouw:
x3d(object).setanimationtype = waarde
Voorbeeld:
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.
Functienaam:
sethandles
Functie beschrijving:
Wijzigt de handles van een object gebaseerd op de waarde.
Functie opbouw:
x3d(object).sethandles = waarde
Voorbeeld:
x3d(newrect).sethandles = newrect
Wijzigt welke uitlijning en/of gebruiker interactieve blokjes aanwezig zijn.
Functienaam:
sethandlecolor
Functie beschrijving:
Wijzigt de kleur van de handlers.
Functie opbouw:
x3d(object).sethandlecolor = waarde
Voorbeeld:
x3d(newrect).sethandlecolor = red
Functienaam:
setheight
Functie beschrijving:
Wijzigt de hoogte van een object in pixels.
Functie opbouw:
x3d(object).setheight = waarde
Voorbeeld:
x3d(welcomeimg).setheight = 150
Functienaam:
setwidth
Functie beschrijving:
Wijzigt de breedte van een object in pixels.
Functie opbouw:
x3d(object).setwidth = waarde
Voorbeeld:
x3d(welcomeimg).setwidth = 250
Functienaam:
setscale
Functie beschrijving:
Wijzigt de hoogte en breedte van een object of afbeelding d.m.v. een schaal.
Functie opbouw:
x3d(object).setscale = waarde
Voorbeeld:
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.
Functienaam:
setid
Functie beschrijving:
Wijzigt het id van een al bestaande object / afbeelding.
Functie opbouw:
x3d(object).setid = waarde
Voorbeeld:
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.
Functienaam:
setlineheight
Functie beschrijving:
Wijzigt hoeveel verschil er tussen text regels zit.
Functie opbouw:
x3d(object).setlineheight = waarde
Voorbeeld: x3d(welcometext).setlineheight = 10
Functienaam:
setrotation
Functie beschrijving:
Wijzigt de rotatie van een object / afbeelding.
Functie opbouw:
x3d(object).setrotation = waarde
Voorbeeld:
x3d(welcomeimg).setrotation = 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:
x3d(object).setx = waarde
Voorbeeld:
x3d(welcomeimg).setx = 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:
x3d(object).sety = waarde
Voorbeeld:
x3d(welcomeimg).sety = 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:
x3d(object).setz = waarde
Voorbeeld:
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.
Functienaam:
setstroke
Functie beschrijving:
Wijzigt de 'stroke' (/omhulsel) van een object.
Functie opbouw:
x3d(object).setstroke = waarde
Voorbeeld:
x3d(newrect).setstroke = 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:
x3d(object).setstrokecolor = waarde
Voorbeeld:
x3d(newrect).setstrokecolor = blue
Functienaam:
settextfont
Functie beschrijving:
Wijzigt het lettertype van een tekst object.
Functie opbouw:
x3d(object).settextfont = waarde
Voorbeeld:
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
Functienaam:
settextsize
Functie beschrijving:
Wijzigt de grootte van een tekst object.
Functie opbouw:
x3d(object).settextsize = waarde
Voorbeeld:
x3d(welcometext).settextsize = 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:
x3d(object).settextweight = waarde
Voorbeeld:
x3d(welcometext).settextweight = 400
Mogelijke waarden: 'light', 'normal', 'bold', nummer.
Functienaam:
setvisible
Functie beschrijving:
Wijzigt de zichtbaarheid van een object / afbeelding of canvas.
Functie opbouw:
x3d(object).setvisible = waarde
Voorbeeld:
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.
Functienaam:
setflipx
Functie beschrijving:
Draait het object / de afbeelding om. (Horizontaal)
Functie opbouw:
x3d(object).setflipx = waarde
Voorbeeld:
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.
Functienaam:
setflipy
Functie beschrijving:
draait het object / de afbeelding om . (Verticaal)
Functie opbouw:
x3d(object).setflipy = waarde
Voorbeeld:
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.
Functienaam:
setdefault
Functie beschrijving:
Wijzigt de standaard waarde waarmee objecten/afbeeldingen ingeladen worden.
Functie opbouw:
x3d(object).setdefault = property,propertyvalue
Voorbeeld:
x3d(text).setdefault = fill,red
Het ophalen van object / afbeelding eigenschappen.
Functienaam:
getproperty
Functie beschrijving:
Haalt de gekozen eigenschap (waarde) op van het object / de afbeelding.
Functie opbouw:
x3d(object).getproperty = waarde
Voorbeeld:
x3d(welcomeimg).getproperty = 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:
x3d(object).getx
Voorbeeld:
x3d(welcomeimg).getx
Functienaam:
gety
Functie beschrijving:
Haalde de y-waarde op van het object.
Functie opbouw:
x3d(object).gety
Voorbeeld:
x3d(welcomeimg).gety
Functienaam:
getz
Functie beschrijving:
Haalde de laag op waarin het object zich bevind.
Functie opbouw:
x3d(object).getz
Voorbeeld:
x3d(welcomeimg).getz
Functienaam:
getscale
Functie beschrijving:
Haalt de schaal op van het object.
Functie opbouw:
x3d(object).getscale
Voorbeeld:
x3d(welcomeimg).getscale
Functienaam:
getscalex
Functie beschrijving:
Haalt de x-schaal op van het object.
Functie opbouw:
x3d(object).getscalex
Voorbeeld:
x3d(welcomeimg).getscalex
Functienaam:
getscaley
Functie beschrijving:
Haalt de y-schaal op van het object.
Functie opbouw:
x3d(object).getscalex
Voorbeeld:
x3d(welcomeimg).getscalex
Overige functies
Functienaam:
copy
Functie beschrijving:
Kopieert het gekozen object / afbeelding en geeft deze een nieuw id.
Functie opbouw:
x3d(object).copy = waarde
Voorbeeld:
x3d(welcomeimg).copy = newimage
Het nieuwe id (waarde) moet uniek zijn.
Functienaam:
delete
Functie beschrijving:
Verwijderd het gekozen object / afbeelding van het canvas.
Functie opbouw:
x3d(object).delete
Voorbeeld:
x3d(newimage).delete
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:
x3d(object).clearcanvas
Voorbeeld:
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.
Functienaam:
screenshot
Functie beschrijving:
Maakt een scherm afdruk van een canvas.
Functie opbouw:
x3d(object).screenshot
Voorbeeld:
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. Uitleg per individuele functie (Outputscript)
Toevoegen / Aanpasen van (bestaande) objecten / afbeeldingen:
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.
Aanpassen van een al bestaand object / afbeelding
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';
Het ophalen van object / afbeelding eigenschappen.
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');
Overige functies
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.
