- Registriert
- 3 Aug. 2014
- Beiträge
- 28.573
Hallo, der Titel ist vielleicht etwas konfus gewählt, aber ich versuche einen Desktop auf eiinem Canvas zu realisieren.
Sorry für den "Brainfuck" am Morgen, aber ich komme nicht wirklich weiter mit meinem Ansatz. bzw. kommt es mir zu komplex vor
Ich habe dabei ein Problem wie man die Daten in Javascript strukturiert so das man Design von den aktuellen gezeichneten Elementen isoliert bzw. diese so anlegt das man mit dynamischen Größen arbeiten kann und wie diese grundlegend Beschrieben werden sollen (hier als design.templateItem definiert).
Momentan sieht das Design Template in Javascript in etwa so aus:
Zum Einstieg die Beschreibung der gezeichneten Maus:
[src=javascript]design.defaultMouse = ["#fff", "#000", "round", [0, 0, 1, 0, 12, 10, 12, 15, 5, 15]];[/src]
Die Felder sind zum Beispiel hier:
Vordergrundfarbe (fillStyle), Strich (strokeStyle) Farbe, Linien-Kanten-Typ (lineMiter), die Koordinaten für einen Line-Befehl in "x, y"-Paaren.
Komplexer nun aber bei einem Fenster-Prototype:
Ich habe mal darüber nachgedacht das Fenster als ganzes zu beschreiben, breche es aber nun auf einzelne Elemente herunter wie Titel-Leiste, und Fenster Inhalt da es sonst (für mich) zu komplex war.
[src=javascript] // Window prototype
design.windowTitleBar = [[100, 10], ["#fff", "#aeaeae"], ["rect"], ["gradient_tb"], [["#4a0000", "#4a0000", "#000"]], [[0, 0, 100, 10]]];
design.windowContent = [[100, 150], ["#fff", "#aeaeae"], ["rect"], ["solid"], [["#2a0000"]], [[0, 10, 100, 150]]];[/src]
Vielleicht liegt hier schon der Fehler das überhaupt als Array anzulegen, aber kurz zum Aufbau:
1) Standardgröße des Elements in Breite und Höhe
(wenn das Fenster skaliert wird sollten diese beiden Werte innerhalb einer Begrenzung von x und y liegen)
2) Aktive Farben für den Inhalt (aktiv/inaktiv)
3) Zeichnungsmethode des Canvas was für die Zeichnung genutzt wird (Array von Befehlen ("rect" oder "line")
4) Array des FillStyle - also hier Verlauf_obenunten (topbottom)
5) Array mit Farben für jeden FillStyle-Typ (Verlauf/solid)
6) Array der Zeichnungs-Koordinaten für den in 3 gesetzten Befehl
Das ganze ist daher noch sonderlich komplex weil ich mir nicht sicher bin wie ich dynamisch auf die Veränderungen der Größe reagieren könnte, ich würde hier die Koordinaten in X und Y einschränken die im ersten Array des Design-Elements liegen, aber beispielsweise die Titel-Leiste soll immer 10 Pixel hoch sein und Standardmäßig 100 weit, wobei das Fenster mit 100 und 150 (hoch/breit) wäre in der Design-Definition, aber sowohl x als auch y dynamisch sind, ganz im Gegensatz zur Titelleiste wo eigentlich nur die weite dynamisch sein soll.
Denke ich hier unnötig komplex oder müsste man die Elemente sogar noch komplexer beschreiben?
Wie wird das in anderen GUI-Kits realisiert, hat jemand damit konkrete Erfahrungen?
Sorry für den "Brainfuck" am Morgen, aber ich komme nicht wirklich weiter mit meinem Ansatz. bzw. kommt es mir zu komplex vor
Ich habe dabei ein Problem wie man die Daten in Javascript strukturiert so das man Design von den aktuellen gezeichneten Elementen isoliert bzw. diese so anlegt das man mit dynamischen Größen arbeiten kann und wie diese grundlegend Beschrieben werden sollen (hier als design.templateItem definiert).
Momentan sieht das Design Template in Javascript in etwa so aus:
Zum Einstieg die Beschreibung der gezeichneten Maus:
[src=javascript]design.defaultMouse = ["#fff", "#000", "round", [0, 0, 1, 0, 12, 10, 12, 15, 5, 15]];[/src]
Die Felder sind zum Beispiel hier:
Vordergrundfarbe (fillStyle), Strich (strokeStyle) Farbe, Linien-Kanten-Typ (lineMiter), die Koordinaten für einen Line-Befehl in "x, y"-Paaren.
Komplexer nun aber bei einem Fenster-Prototype:
Ich habe mal darüber nachgedacht das Fenster als ganzes zu beschreiben, breche es aber nun auf einzelne Elemente herunter wie Titel-Leiste, und Fenster Inhalt da es sonst (für mich) zu komplex war.
[src=javascript] // Window prototype
design.windowTitleBar = [[100, 10], ["#fff", "#aeaeae"], ["rect"], ["gradient_tb"], [["#4a0000", "#4a0000", "#000"]], [[0, 0, 100, 10]]];
design.windowContent = [[100, 150], ["#fff", "#aeaeae"], ["rect"], ["solid"], [["#2a0000"]], [[0, 10, 100, 150]]];[/src]
Vielleicht liegt hier schon der Fehler das überhaupt als Array anzulegen, aber kurz zum Aufbau:
1) Standardgröße des Elements in Breite und Höhe
(wenn das Fenster skaliert wird sollten diese beiden Werte innerhalb einer Begrenzung von x und y liegen)
2) Aktive Farben für den Inhalt (aktiv/inaktiv)
3) Zeichnungsmethode des Canvas was für die Zeichnung genutzt wird (Array von Befehlen ("rect" oder "line")
4) Array des FillStyle - also hier Verlauf_obenunten (topbottom)
5) Array mit Farben für jeden FillStyle-Typ (Verlauf/solid)
6) Array der Zeichnungs-Koordinaten für den in 3 gesetzten Befehl
Das ganze ist daher noch sonderlich komplex weil ich mir nicht sicher bin wie ich dynamisch auf die Veränderungen der Größe reagieren könnte, ich würde hier die Koordinaten in X und Y einschränken die im ersten Array des Design-Elements liegen, aber beispielsweise die Titel-Leiste soll immer 10 Pixel hoch sein und Standardmäßig 100 weit, wobei das Fenster mit 100 und 150 (hoch/breit) wäre in der Design-Definition, aber sowohl x als auch y dynamisch sind, ganz im Gegensatz zur Titelleiste wo eigentlich nur die weite dynamisch sein soll.
Denke ich hier unnötig komplex oder müsste man die Elemente sogar noch komplexer beschreiben?
Wie wird das in anderen GUI-Kits realisiert, hat jemand damit konkrete Erfahrungen?