Interaktives Amsler-Gitter

Struktur/Aufbau:

Das Amsler-Gitter besteht aus horizontalen und vertikalen Linien, die an ihren Überkreuzungen mit einander verbunden sind. Jede horizontale und vertikale Linie besteht aus vielen in Reihe verbundene Bézierkurven. Jede dieser (quadratischen) Bézierkurve besteht aus einem Start- und einem Endpunkt, sowie einem Mittelpunkt. Mit Hilfe dieser Punkte lässt sich die Krümmung der Kurve verändern. An einer Kreuzung befindet sich ein Knoten, mit dem die Position der Kreuzung verändert werden kann. Ein weiterer Knoten befindet sich auf dem Mittelpunkt jeder Bézierkurve, womit sich diese noch feiner justieren lassen.

Sonstige Hinweise stehen im Quellcode!

Besonderheit:

Größe der Canvases kann beliebig sein

    <canvas id="grid" width="720" height="450"></canvas>
    <canvas id="from" width="960" height="540" ></canvas>

Anzahl der horizontalen und vertikalen Linien kann beliebig sein

    let amountOfVerticalLines = 16;
    let amountOfHorizontalLines = 9;

Anpassung vom Aussehen über globale Variablen

    /** Breite der Linien */
    let linewidth = 3.5;
    /** Groesse der Knoten-Farbe */
    let noderadius = 5;
    /** Groesse der Knoten (fuer Touch/Mouse-Controlls) */
    let nodepadding = 5;
    /** Knoten-Farbe */
    let nodecolor = "black"; // oder '#000'

Man kann Rechtecke und Kreise auf das Amsler-Gitter aufbringen und ihre Größe und Form anpassen (dazu über den Button "Switch Layers" in die andere Ebene wechseln und loslegen. Um wieder das Grid anzupassen, Button nochmal drücken)
Ausgewächlte Flächen können auch wieder entfernt werden
Horizontale und vertikale Linien können über die zwei Tick-Boxen separat unsichtbar gemacht werden
Mit Hilfe einer Zeichenfunktion können Formen per Hand auf das Grid gemalt werden.

Schnittstellen:

returnAmslerGrid() Gibt ein Array mit allen Veränderten Knoten zurück.
(POST zum Server muss implementiert werden!)

    let array = returnAmslerGrid();
    array[0];       //Liste aller vertikalen Nodes die bewegt wurden
    array[1];       //Liste aller horizontalen Nodes die bewegt wurden
    array[2];       //Liste aller kreuzungs-Knoten/nodes die bewegt wurden     
    array[3][0];    // Canvas-Grid-Breite
    array[3][1];    // Canvas-Grid-Hoehe
    array[3][2];    // Anzahl der verticalen Linien
    array[3][3];    // Anzahl der horizontalen Linien

exportCanvasAsPNG() Exportiert die aktuelle Canvas ohne die Knoten als .png.
(POST zum Server muss implementiert werden! ~~Momentan direkter Download des Bildes.~~)
toggleVertical() und toggleHorizontal() sind zwei Methoden die mit Hilfe von Check-Boxen die vertikalen oder horizontalen Linien unsichtbar machen.
recreateAmslerGrid() Stellt ein Amsler-Gitter mit Hilfe der Daten aus returnAmslerGrid() wieder her.

Verwendete Frameworks:

Fabric.js ist im Repository schon drin: fabric.min.js

Weitere Entwicklung:

Amsler-Gitter aus gespeicherten Daten wiederherstellen
Malen
Kästchen in Amsler-Gitter markieren
Knoten beim Export des Bildes ausschalten
Formen sichern und wieder herstellen
Gezeichnetes sichern und wieder herstellen
Sicherheits-Mechanismen einbauen
Auf Tablets testen
Touch-Events für Tablet

Getestete Browser:

Chrome/Chromium
Firefox
Safari
Edge

SteinerHannes / amsler-grid