[FRAGE] suche spezielles Beispiel zu Canvas (Bild/Zeichnung manipulieren und Werte in db )

[selfmade01]

Hallo,

ich schreibe gerade an einer Webanwendung in der ein Benutzer an einem Panel bestimmte Steck-Kontakte verbinden kann.
Man muss sich das einfach wie die Rückseite einer Stereoanlage vorstellen an der man Lautsprecher anschliesst.

Ich möchte nun ein Basisbild zeichnen mit diesen Steckkontakten.
Der User soll nun die Möglichkeit haben den lautsprecher-1 auf die Lautsprecherbuchse-1 zu verbinden.
- Er bekommt dabei die möglichen Lautsprecher in einer Tabelle aufgelistet.
- Er wählt nun einen aus
- dann wählt er auf dem Bild eine Buchse aus
- und klickt auf verbinden
- auf dem Bild soll nun die Steckbuchse z.B. in der Farbe Grün erscheinen.

Das ganze muss so in eine DB abgespeichert werden, damit wenn später wieder ein Lautsprecher hinzugefügt werden soll, dem User gezeigt wird, welche Buchsen schon belegt sind.

Ich dachte dabei an Canvas und suche nun ein Beispiel wo dieses Zusammenspiel zwischen Daten in DB speichern, dann mit Canvas diese Daten benutzen um das Basisbild entsprechend anzupassen.

Ich weiss gar nicht ob das möglich ist.

Wäre super wenn mir jemand sagen könnte wie man sowas am einfachsten implementieren kann.

Ich könnte das ganze auch mit zig verschiedenen Bildern machen aber das halte ich für etwas umständlich zumal dann das Auswählen einer Buchse auf dem Bild nicht funktionieren würde und man diese manuell eingeben muss.

Hat jemand eine Idee oder einen Link zu einem Beispiel?

Grüße Jürgen

 

[xorg1990]

Du möchtest sowas wie das Propellorhead Reason Rack darstellen nehme ich an.

Dann würde ich so vor gehen:
Du zeichnest das Rack wie du schon gesagt hast und die Dazugehörigen Lautsprecher.
Die Lautsprecher würde ich als separates Objekt auf das Canvas rendren, damit du am ende abspeichern kannst welcher Lautsprecher mit was für ein "jack" verbunden ist.
Da Du ja nicht weißt welche Pixelkoordinaten deine jacks haben empfehle ich das an zu sehen:
HTML5 Canvas Mouse Coordinates Tutorial

Da du ja Die Lautsprecher separat renderst weißt du schon wo Die Pixelkordnetan für diese sind , Du muss nur abspeichern welcher Speaker den angeklinkt wurde und beim 2 klick auf das jack nimmst du die Koordinaten aus den mouseevent. Dann lässt du ctx.moveTo, lineTo los und hast eine Luftlinien artige Verbindung (kürzester weg).

Soll es so aussehen wie in Reason, dann ist das eine Bézierkurve.


Zum abspeichern empfiehlt sich ein json Object. Da ergibt sich folgendes:

{
 "speaker1": {
    "lineTo" : [125, 350],// array x, y coords, da wo dein jack ist
     "verbuden" : true
 },

 "speaker2" : {
      "lineTo" : [125, 350],// array x, y coords, da wo dein jack ist
     "verbuden" : true
 }
}

So weiß am ende jede Speaker wo er hingehört.

Ein Komplettes Tutorial dazu fällt mir jetzt nicht ein aber vielleicht hilft dir das:
CANGO Canvas Graphics
oder
JSXGraph | Dynamic Mathematics with JavaScript

asso hatte ich vergessen xD
Jack == Buchse, klinken Stecker etc.

VG xorg1990