Ergebnis 1 bis 2 von 2
  1. #1
    selfmade01 ist offline Jungspund
    registriert
    17-12-2014
    Beiträge
    11

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

    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

  2. #2
    Avatar von xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    866

    AW: suche spezielles Beispiel zu Canvas (Bild/Zeichnung manipulieren und Werte in db

    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:
    Code:
    {
     "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
    Geändert von xorg1990 (14-02-2015 um 21:56 Uhr)

Ähnliche Themen

  1. HTML5 canvas Zeichnung "gezoomt"
    Von bassman4 im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 17-05-2013, 18:04
  2. Antworten: 1
    Letzter Beitrag: 07-08-2010, 17:01
  3. Suche spezielles Votescript
    Von Schnitzer im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 16-02-2009, 00:39
  4. Suche spezielles Programm wegen Desktop Screenie
    Von Michael B. im Forum Allgemeines
    Antworten: 23
    Letzter Beitrag: 01-07-2007, 03:19
  5. Suche spezielles JS
    Von Schiri69(Gast) im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 25-11-2000, 23:49

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •