Anlegen wiederholbarer Renderbilder

1. Da sich das Renderbild bei der Größenänderung des Nutzers ändern soll, werden die Renderbilder im Element angelegt, welches für die Größe des Bildes verantwortlich ist. Dies ist meist das Element mit dem Höhe-Breite oder dem Flächen Plugin.
2. In diesem Element wechseln Sie in den Reiter „Renderbild“.
3. Um die Übersicht über die Renderbilder zu behalten, empfehlen wir, den Eintrag „Name“ mit einem aussagekräftigen Namen zu versehen.
4. Als Erstes legen wir ein Bild zur Zeichnung der Maße an.
5. Vergeben Sie im Reiter „Bild“ einen aussagekräftigen Namen.
6. In der Selectbox bei „Statisch / Wiederholbar“ wählen Sie „Wiederholbar“ aus.
7. Weisen Sie das zu wiederholende Bild aus der Medienbibliothek zu.
8. Wählen Sie die Perspektive, für welche das Renderbild angelegt wird.
9. Bestimmen Sie einen „Layer“. Für das unterste Bild ist „Layer 0“ zu empfehlen, da es das unterste Layerbild ist und alle anderen Bilder darüber liegen werden.
10. Die Formeln füllen Sie erst zum Schluss aus. 
11. Wählen Sie in den Selectboxen das Element aus, bei dem der Frontendanwender die Größe des Produktes ändern kann und für welches sich das Renderbild anpassen soll. In unserem Beispiel ist dies ein Höhe Breite Element welches „Masse“ heißt und in der Sektion „Masse“ hinterlegt ist.
12. In der Selectbox „Selectable/Computable“ wählen Sie „Selectable“.
13. Wählen Sie dann das Feld, welches den gewünschten Wert enthält. Bei der Breite ist dies im „width“ Feld. Bei der Höhe ist der Wert im „height“ Feld.
14. Wenn Sie mit dem Flächen Element arbeiten, stehen die Feldnamen „field_0“, „field_1“ etc zur Verfügung. Je nachdem wie viele Felder angelegt wurden.
15. „Variablennamen“ ist der Name, mit dem dieser Eintrag in der Formel angesprochen wird. Wählen Sie hier aus der Selectbox einen Buchstaben aus. 
16. In diesem Beispiel wird dem Feld „height“ immer die Variable „h“ zugewiesen. Das Feld „width“ bekommt den Variablennamen „w“ zugewiesen. 
17. Der Name der Variable ist nur in diesem Renderbild Eintrag verfügbar. Daher kann in jedem Renderbild der gleiche Variablenbuchstabe vergeben werden.
18. Fügen Sie den Wert durch den „Hinzufügen“ Button hinzu, so dass er in der Liste erscheint.
19. Zum Zeichnen des gesamten Bildes muss sowohl das Feld für Breite wie auch das Feld für Höhe in der Tabelle stehen.
20. Jetzt folgt der Eintrag ins Formelfeld. Tragen Sie dort die Formel ein, welche für die Berechnung der Wiederholung des Bildes genutzt wird. Tun Sie dies in diesem Fall für horizontal und vertikal, da beide Werte für die Zeichnung des dynamischen Bildes gebraucht werden. 
21. In unserem Fall möchten wir, dass das Bild solange vertikal gezeichnet wird, wie es im Feld „width“ eingetragen wurde. Daher tragen wir nur die Variable „w“ in der Formel ein.
22. Horizontal soll solange gezeichnet werden, bis der Wert im Feld „height“ erreicht ist. Also tragen wir bei „Formel Vertikal“ die für „height“ vergebene Variable „h“ ein.
23. Zuletzt fügen wir dieses Renderbild über den „Hinzufügen“ Button hinzu.
24. Die Einstellungen für dieses Renderbild sollten dann wie folgt aussehen.

1. Um das Bild nur noch mit einem Verlauf zu füllen, beispielsweise um eine Scheibe zu zeichnen, muss nur ein statisches Renderbild zugewiesen werden. Dann wird dieses einfach über die Größe des bisher gezeichneten Renderbildes gezeichnet.
2. Vergeben Sie einen Namen.
3. Wählen in der Selectbox „Statisch/Wiederholbar“ - „Statisch“ aus.
4. Wählen Sie das Bild aus.
5. Wählen Sie die Perspektive.
6. Wählen Sie einen Layer. Da dieses Bild über dem bereits gezeichneten Bild liegen soll, empfiehlt sich hier ein Wert über 0. Um auf evtl. Änderungen der Reihenfolge der Renderbilder reagieren zu können, sollte der Wert nicht zu hoch und nicht zu niedrig sein. Daher arbeiten wir in Zehner-Schritten. Dann können noch Bilder davor und danach eingeschoben werden. Für das Beispiel wählen wir 10.
7. Fügen Sie den neuen Eintrag über den „Hinzufügen“ Button hinzu.

Im Frontend haben wir nun ein Bild, welches dynamisch das Renderbild anzeigt und sofort auf die Änderungen des Nutzers reagiert.

Wenn jetzt beispielsweise ein Rahmen hinzugefügt werden soll, kann dies ebenfalls umgesetzt werden.

Es empfiehlt sich, die Seiten des Rahmens einzeln zu zeichnen. In dieser Doku erklären wir die einzelnen Schritte für jede Seite ausführlich.

1. Da das Bild nur entlang der Breite des Bildes gezeichnet werde soll, brauchen Sie nur den Wert der Breite aus der Nutzereingabe. Bei unserem Beispiel ist dies „width“.
2. In der „Formel Horizontal“ geben Sie den Variablennamen der Breite ein.
3. Bei „Formel Vertikal“ geben Sie die Pixelgröße des Bildes, für den oberen Rahmen ein. In unserem Beispiel ist das Bild 1x60px daher müssen bei uns 60 in der „Formel Vertikal“ stehen. Somit wird das Bild in der Größe gezeichnet welche es tatsächlich hat. Wenn Ihr Bild andere Abmessungen hat, dann muss an dieser Stelle ein anderer Wert eingetragen werden.
4. Fügt den Wert hinzu.
5. Nun wird ein oberer Rahmen am Rande des Bildes gezeichnet, welcher auch seine Breite, je nach Nutzereingabe ändert.

1. Legen Sie ein neues „statisches“ Renderbild an.
2. Der Layer muss über dem Layer des wiederholbaren top Rahmens sein.
3. Hinzufügen, fertig.

1. Legen Sie ein neues „statisches“ Renderbild an.
2. Der Layer muss über dem Layer des wiederholbaren top Rahmens sein, am besten gleich dem Layer der linken Ecke.
3. Wechselt nun in den Reiter „Versatz“.
4. „Versatz“ gibt an, wenn ein Bild verschoben werden soll, statt in der oberen linken Ecke gezeichnet zu werden.
5. Um den „Versatz“ in der rechten Ecke des dynamischen Renderbildes zu zeichnen wählt bei „Statisch / Berechnend“ den Eintrag „Berechnend“.
6. Die rechte obere Ecke soll sich auch an der Breite des Bildes orientieren und immer nur in der oberen rechten Ecke sein. Daher benötigen wir die Breite des Bildes.
7. Wählen Sie das „width“ Element, vergeben eine Variable und fügen diese hinzu. 
8. In „Formel Versatz X“ tragen Sie den Variablennamen Minus die Breite des Bildes ein. Somit wird es genau in der rechten oberen Ecke positioniert. In unserem Beispiel ist dies 60.
9. In „Formel Versatz Y“ tragen Sie 0 ein. Da das Bild genau in der oberen Ecke positioniert werden soll.

1. Legen Sie ein neues Wiederholbares Renderbild an.
2. Wählen Sie das Element indem die Größe des Bildes bestimmt wird und vergeben die Variablennamen für Höhe und Breite. 
3. Formel Horizontal: Variablenname der Höhe
4. Formel Vertikal: Variablenname der Breite
5. Da es am unteren Rand des Bildes gezeichnet werden soll, muss ein „Versatz“ eingetragen werden. Wechseln Sie in den Reiter „Versatz“.
6. Wählen Sie „Berechnend“.
7. Wählen Sie das Element aus, das die Höhe des Bildes vorgibt und vergeben Sie einen Variablennamen.
8. In „Formel Versatz X“ tragen Sie 0 ein. Da keine Verschiebung von links vorgenommen werden soll.
9. In „Formel Versatz Y“ tragen Sie die Variable der Höhe ein Minus der Höhe des Bildes. Somit wird das Bild genau an die untere Kante gezeichnet. Würde die Bildhöhe nicht von der Höhe abgezogen werden, würde das Bild erst ab dem Höhenwert gezeichnet werden und wäre somit nicht sichtbar.

1. Legen Sie ein Statisches Renderbild an.
2. Layer muss über dem unteren Rahmen liegen.
3. Versatz: Berechnend
4. Wählen Sie das Höhe Element aus und vergeben einen Variablennamen.
5. „Formel Versatz X“ ist 0
6. „Formel Versatz Y“ ist Variable der Höhe Minus der Höhe des Bildes.

1. Legen Sie ein statisches Renderbild an.
2. Layer muss über dem des unteren Rahmen liegen.
3. Versatz: Berechnend
4. Wählen Sie das Breite Element aus und vergeben Sie einen Variablennamen.
5. Wählen Sie das Höhen Element aus und vergeben Sie einen Variablennamen.
6. „Formel Versatz X“ ist Variable der Breite Minus der Breite des Bildes.
7. „Formel Versatz Y“ ist Variable der Höhe Minus der Höhe des Bildes.

1. Anlegen eines Wiederholbaren Renderbildes.
2. Festlegen des Variablennamens für das Höhen Element.
3. „Formel Horizontal“ tragen Sie die Pixelbreite des Bildes ein.
4. „Formel Vertikal“ tragen Sie die Variable für die Höhe ein.
5. Hinzufügen, fertig.

1. Anlegen eines Wiederholbaren Renderbildes.
2. Festlegen des Variablennamens für das Höhen Element.
3. „Formel Horizontal“ tragen Sie die Pixelbreite des Bildes ein.
4. „Formel Vertikal“ tragen Sie die Variable für die Höhe ein.
5. Hinzufügen.
6. Versatz ist „Berechnend“.
7. Festlegen des Variablennamens für das Breite Element.
8. „Formel Versatz X“ tragen Sie die Variable der Breite Minus der Breite Bildes ein.
9. „Formel Versatz Y“ muss die 0 eingetragen werden.
10. Hinzufügen, fertig.