einfaches (? :-) Grafik-Projekt

[tafnac]

Hallo zusammen,

ich bin Neuling, habe aber schon in die eine oder andere Programmiersprache hineingeschnuppert - js noch kaum.
Trotzdem möchte ich folgende Idee umsetzen:

Ein Nutzer meiner Website kann sich am Ende eine Seite ausdrucken, die so aussieht:



oberer Teil: Ein Text, den der Nutzer vorher in ein Feld eingetippt hat
unterer Teil:
1. Ein wunderschön gemalter Kreis (ein Bild von so etwas wie einem Kreis - jedenfals kein erzeugter - das ist essenziell für das Projekt)
2. (blau) Linien, die den Kreis in eine Anzahl von x Kuchenstücken unterteilen, wobei x die zweite Eingabe ist, die der Nutzer zuvor gemacht hat.

schwarz: immer gleich
blau: benutzerabhängig

Ich freu mich über alle Ideen und Ratschläge.
Lücken habe ich vor allem bei:

- Der Sache mit Blatt - Wie kann ich das so definieren, dass die Elemente am Ende als eine Einheit leicht auszudrucken sind?
- Die Frage mit dem gleichmäßigen Unterteilen - ist da auch etwas "Polarkoordinaten" möglich, also mit Grad-Zahlen?

Danke Für Eure Hilfe!

Liebe Grüße!
Thorsten

 

[rico2009]

Stichwort: Canvas.

Ich habe mal ein wenig gesucht und bin auf zwei JS Frameworks gestoßen, welche mit Hilfe von Canvas Elemente zeichnen.
- Beautiful HTML5 JavaScript Charts | CanvasJS
- KineticJS HTML5 Canvas Framework

 

[tafnac]

Farbverläufe legen Drucker und danach auch Browser lahm

Hallo zusammen,

zunächst mal danke rico,
Ich habe das Projekt mittlerweile fast fertig. Benutzt habe ich dann "Raphael JS".
Das Blatt zum Ausdrucken erzeuge ich indem ich eine seperate HTML-Datei erzeugen lassen, in die nochmal der gesamte Inhalt des <div>-Bereichs geschrieben wird. Die HTML-Seite wird auch gleich mit win.print() ausgedruckt und wieder geschlossen.

Alles hat sehr gut funktioniert,
bis ich angefangen habe mehrere Rahmenlinien der "Uhr" mit sich verdeckenden Vollkreisen darzustellen, die (wg. Schatten-Effekts für den 3D-Effekt) vertikale Farbverläufe aufwiesen.

Jetzt mit ca. 5 dieser Kreise dauert es ewig bis die Seite in der Druckvorschau erscheint und gedruckt werden könnte...
...dann dauert es entweder ewig bis der Druck losgeht, oder es passiert gar nichts, oder die Seite stürzt ab.

Sind 5 Farbverlaufs-Flächen zu viel verlangt?

Der Quellcode iss ziemlich lang und unübersichtlich, sorry...
hier der Link der Seite:
Uhr-MotivatiOMeter @ chartflipper.de - Softskills in Tipps, Tricks und Trainings


Danke für Eure Antworten!

LG!

Thorsten

 

[tafnac]

Hallo zusammen,

hab mittlerweile eine Lösung mit weniger Farbverläufen und über eine mit Inkscape erstellte PNG-Datei für die "Uhr"-Version:
#XXX - TickTack - Softskills in Tipps, Tricks und Trainings
und eine (bisher) ganz ohne Farbverläufe für die "Tacho"-Version gefunden:
#XXX - Sichtbarer Fortschritt - Softskills in Tipps, Tricks und Trainings

Danke!

LG!

Thorsten