Qmaze2D How To/nl

To the English version: Qmaze2D_How_To/en

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.

Template: U bepaalt de hoogte/breedte.

Template: U voegt een container toe met formaten. (Incl. Bootstrap)

Template: U voegt een container toe met formaten. (Excl. Bootstrap)

Template: (OPTIONEEL) Laadbalk

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!