{lang=EN}JSXGraph Book{/lang}{lang=SI}Knjiga o JSXGraphu{/lang}{lang=CZ}Příručka JSXGraph{/lang}{lang=DE}JSXGraph-Buch{/lang}

{lang=EN}

Adding attributes to the objects

Objects in JSXGraph have attributes, which describe them. Some of them are common (like color, name, etc.) and some are more specific. Points have properties for e.g. shape, where lines have other attributes like size, fullness, type of beggining and ending, etc. (more here). We can always look at the JSXGraph API documentation, which describes all the objects and their attributes.

Let us look now at the example. {/lang}

{lang=SI}

Dodajanje atributov k objektom

Objekti v JSXGraphu lahko imajo atribute, ki jih opisujejo. Nekateri so pogosti (npr. barva, ime, velikost), drugi bolj specifični. Različni objekti imajo lahko različne atribute. Vedno si lahko pomagamo z JSXGraph API dokumentacijo, ki opisuje vse objekte in vse njihove atribute.

Poglejmo primer. {/lang}

{lang=CZ}

Nastavení vlastností objektů

Objekty v JSXGraphu mají atributy, které je charakterizují. Některé z nich jsou společné všem (jako barva, jméno apod.), některé jsou typické pro objekty konkrétního druhu. Body mají například různé tvary, u přímky pak lze např. stanovit, zda bude končit v druhém ze svých určujících bodů (atribut straightLast) a jak v něm bude končit (více zde).

Popisy všech atributů objektů JSXGraphu jsou uvedeny v dokumentaci JSXGraph Reference.

Podívejme se na následující příklad: {/lang}

{lang=DE}

Attribute zu Objekten hinzufügen

JSXGraph-Objekte besitzen Attribute, durch die sie beschrieben werden. Einige dieser Attribute stehen in allen Objekte zur Verfügung (z.B. color, name, etc.), andere Attribute gibt es nur bei speziellen Objekten. Zum Beispiel besitzen Punkte das Attribut shape, Geraden dagegen besitzen u.a. Attribute, die festlegen, ob die Gerade über die definierenden Punkte hinausgezeichnet wird oder nicht (Attribute straightFirstund straightLast). Siehe hierzu auch die Dokumentation zu Geraden.

In der umfangreichen JSXGraph API Dokumentation werden alle Objekte und ihre Attribute detailliert beschrieben.

Betrachten wir folgendes Beispiel. {/lang}

<div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div>
<script>
 var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});

 var p = board.create('point',[-2,-1],{name:"first", size:5, color:"FF0000"});
 var q = board.create('point',[3,1],{name:"last",fixed:true, face:"[]"});

 var line2 = board.create("line",[p,q],{straightLast:false, dash:"4" });
</script>

{lang=EN} Result: {/lang}

{lang=SI} Rezultat: {/lang}

{lang=CZ} Výsledek: {/lang}

{lang=DE} Resultat: {/lang}

{lang=EN} In this example we added some attributes to both the points and to the line. In all three examples we defined attributes as a list written between { }. For each attribute we must write its name and a value. As we mentioned earlier, objects can have specific attributes and also more general borrowed (inherited) from other objects.

In var p = board.create('point',[-2,-1],{name:"first", size:5, color:"FF0000"}); the first attribute is name which is borrowed from GeometryElement, attribute color is also borrowed, where attribute size is not borrowed but belongs to object Point. We can read from the documentation: Size of a point, either in pixel or user coordinates. It means the radius resp. half the width of a point (depending on the face).

Second point has some interesting attributes var q = board.create('point',[3,1],{name:"last",fixed:true, face:"[]"}); First is the attribute fixed which defines whether objects can be moved (dragged) on the board. the default value for this attribute is false, which means we can move all objects on the board if they are not explicitly fixed. Now we first mentioned default value, which is used when do not explicitly set another value for some attribute. In the documentation for each attribute default value is also presented. The second new attribute is face where we used one of the possible shapes of a point.

When we defined var line2 = board.create("line",[p,q],{straightLast:false, dash:"4" });, we used two attributes, first defining how line will end at second point (straightLast) and second defining how the line will be drawn (dash). Again, dash can have different values, documentation for dash attribute tells us which are possible values.

All objects have attributes, that includes the Board object. One of the attributes is boundingbox, which we used from first example, but didn't talk about until now. E.g. if you don't like the navigation (bottom right), then you can add attribute showNavigation and set it to false. Try it!

We can see that we can use attributes to fine tune how our construction will behave and look.

Documentation is a great resource for discovering attributes and also has some examples of their usage. {/lang}

{lang=SI} V primeru smo dodali nekaj atributov k točkama in premici. V vseh situacijah smo morali atribute našteti med oklepaje { }. Za vsak atribut je potrebno zapisati njegovo ime in vednost. Kot smo že povedali imajo lahko objekti specifične atribute, lahko pa imajo sposojene (podedovane) od drugih objektov.

V vrstici var p = board.create('point',[-2,-1],{name:"first", size:5, color:"FF0000"}); je prvi atribut name, ki je sposojen iz GeometryElement. Atribut color je tudi sposojen, med tem ko size pripada objektu Point.

Za drugo točko uporabimo nekaj zanimivih lastnosti var q = board.create('point',[3,1],{name:"last",fixed:true, face:"[]"}); Prvi atribut je fixed, ki pove, če lahko objekt premikamo po risalni površini. Če tega atributa ne zapišemo sami, je vedno privzeta vrednost false, torej lahko objekt premikamo. Privzeta vrednost je vrednost, ki jo atribut zavzame, če ga sami ne zapišemo. V dokumentaciji objektov so zapisane tudi vse privzete vrednosti atributov. Naslednja nova lastnost je face, s katero določimo obliko objekta.

Pri definicij premice var line2 = board.create("line",[p,q],{straightLast:false, dash:"4" });, smo uporabili dva atributa. Prvi nam pove, na kak način se zaključi črta pri drugi točki (straightLast), drugi pa nam pove, kako bo črta narisana (dash). Ta atribut ima spet lahko več vrednosti, kar si lahko pogledamo v dokumentaciji za dash .

Vsi objekti imajo atribute, tudi objekt Board. Eden izmed teh je boundingbox, ki smo ga uporabili v prvem primeru. Če ne želimo imeti navigacije v spodnjem desnem kotu platna, lahko to storimo z atributom showNavigation, ki mu določimo vrednost false.

Dokumentacija je odličen vir za preučevanje atributov in njihovih vrednosti, ki nam pokaže tudi kakšen primer njihove uporabe. {/lang}

{lang=CZ} V tomto příkladu jsme přidali některé atributy jak k bodům, tak i k přímce. Ve všech třech případech jsme definovali vlastnosti objektů pomocí seznamu atributů uvedených v závorkách { }. Pro každý atribut musíme napsat jeho jméno a hodnotu. Jak již bylo uvedeno dříve, objekty mohou mít jak specifické atributy, tak i atributy obecné, sdílené s více objekty.

V kódu var p = board.create('point',[-2,-1],{name:"first", size:5, color:"FF0000"}); je prvním atributem jméno objektu name, které je společné třídě GeometryElement, atribut barvy color je také společný, zatímco atribut velikosti size není obecný, ale je typický pro objekt Point (bod). V dokumentaci se dočteme: Velikost bodu, buď v pixelech nebo v jednotkách určených uživatelem. Znamená poloměr nebo polovinu šířky bodu (v závislosti na jeho vzhledu).

Kód var q = board.create('point',[3,1],{name:"last",fixed:true, face:"[]"}); definující druhý bod obsahuje další zajímavé atributy. První z nich je atribut fixed, který určuje, zda může být objekt přemisťován (tažen) po nákresně. Nastavená (Default) hodnota pro tento atribut je false, což znamená, že pokud objekty nejsou explicitně fixovány, můžeme s nimi hýbat po nákresně. Nastavená hodnota (default value) je použita vždy, když není pro daný atribut explicitně zadána jiná hodnota. V dokumentaci jsou uvedeny nastavené hodnoty pro všechny atributy. Druhým novým atributem v uvedeném kódu je face, kterým nastavíme jeden z možných tvarů bodu.

V kódu var line2 = board.create("line",[p,q],{straightLast:false, dash:"4" }); definice přímky byly použity dva atributy, první z nich straightLast určuje, že přímka skončí ve druhém z určujících bodů, druhý dash potom určuje, jak bude čára nakreslena. Parametr dash může nabývat různých hodnot, jejich přehled viz dokumentace pro atribut "dash".

Tak jako všechny objekty i nákresna (Board) má své atributy. Jedním z nich je boundingbox, který používáme již od první ukázky kódu nákresny, ale ještě jsme ho nekomentovali. Dalším atributem nákresny je showNavigation, který nám dovoluje skrýt navigační tlačítka v pravém dolním rohu nákresny, pokud mu nastavíme hodnotu false. Vyzkoušejte to!

Vidíme, že pomocí nastavení hodnot atributů můžeme vyladit chování i vzhled naší konstrukce.

Dokumentace je velkým zdrojem pro poznání všech atributů, které můžeme použít. Obsahuje také konkrétní příklady jejich použití. {/lang}

{lang=DE} In diesem Beispiel werden verschiedene Attribute zu den beiden Punkten und der Geraden hinzugefügt. In allen drei Beispielen legen wir die Attribute durch eine Liste, die durch geschweifte Klammern { } eingeschlossen ist, fest. Für jedes Attribut wird sein Name und ein Wert angegeben. Wie bereits erwähnt, haben Objekte sowohl spezifische Attribute als auch allgemeinere Objekte, die von anderen Objekten vererbt sind.

In var p = board.create('point',[-2,-1],{name:"first", size:5, color:"FF0000"}); ist das erste Attribut name, das vom Element GeometryElement abgeleitet ist. Das Attribut color ist ebenfalls von diesem Element abgeleitet und daher in nahezu allen Elementen verfügbar. Das Attribut size hingegen ist ausschließlich im Objekt Punkt verfügbar.

Aus der Dokumentation zum Attribute size: Size of a point, either in pixel or user coordinates. Means radius resp. half the width of a point (depending on the face).

Dem zweiten Punkt im obigen Beispiel werden die interessanten Attribute var q = board.create('point',[3,1],{name:"last",fixed:true, face:"[]"}); zugewiesen. Das Attribut fixed legt fest, ob das Objekt vom Betrachter bewegt (gezogen) werden kann. Der Standardwert für dieses Attribut ist false, was heißt, dass wir alle Objekte über die Zeichenfläche ziehen können, für die dies nicht explizit mit fixed:true unterbunden ist.

Wir habe gerade erstmals den Standardwert (default value) eines Attributs erwähnt. Dieser wird verwendet, wenn nicht explizit ein anderer Wert gesetzt wird. In der Dokumentation wird für jedes Attribut der zugehörige default value aufgelistet.

Das zweite neue Attribut ist face, mit dem wir eine der möglichen Punktformen gewählt hatten.

Bei der Angabe var line2 = board.create("line",[p,q],{straightLast:false, dash:"4" }); setzen wir zwei Attribute. Mit dem ersten Attribut wird bestimmt, dass die "Gerade" am zweiten Punkt endet (straightLast). Also wird eine Halbgerade zu sehen sein. Das zweite Attribut legt die Linienform der Geraden fest (dash): durchgezogen, gestrichelt, etc. Wie zuvor kann dash verschiedene Werte annehmen, in der Dokumentation für das dash-Attribut sind die möglichen Werte aufgelistet.

Alle Objekte haben Attribute, auch das board-Objekt hat Attribute. Eines dieser Attribute ist boundingbox, das bereits im ersten Beispiel verwendet wurde, aber über das noch nichts weiter gesagt wurde.

Wenn zum Beispiel die Navigations-Icons unten rechts ausgeblendet werden sollen, so kann das Board-Attribut showNavigation auf false gesetzt werden. Versuchen wir es!

Wir sehen, dass wir mit Attributen Feineinstellungen zum Verhalten und Aussehen unserer Konstruktion vornehmen können.

Die Dokumentation ist eine hervorragende Quelle um Attribute zu entdecken. Zudem enthält sie viele Beispiele, wie Attribute verwendet werden. {/lang}