Probleme bei Drag-Funktion von jCanvas

  • Hallo zusammen,


    ich habe mich in letzter Zeit ein wenig mit HTML5 Canvas und jCanvas auseinandergesetzt.


    Mein Ziel: Eine kleine "Drawing-App", mit der man sich verschiedene Formen zusammenklicken und anschließend mit der Maus verschieben kann.


    Im Großen und Ganzen funktioniert das auch schon, nur bei manchen Formen treten noch ein paar merkwürdige Fehler auf, die ich auch aufgrund meiner eher noch eingeschränkten JS-Kenntnisse nicht behoben bekomme. Habe aber allgemein auch nicht wirklich eine Ahnung, worin der Fehler liegen könnte und bräuchte dementsprechend jemanden, der mich auf den richtigen Pfad bringt.


    1. Das Dreieck (Triangle) und der Drache (Kite) befinden sich trotz den Koordinaten (0,0) nicht ganz oben links in der Ecke.

    2. Die Raute (Rhombus) wird beim Verschieben mit der Maus anschließend immer ein bisschen weiter nach unten gesetzt als eigentlich erwünscht.

    3. Der Drachen (Kite) ist nach dem Verschieben mit der Maus nicht mehr vollständig, der eine Layer fehlt, ist nicht zu sehen bzw. nicht mehr im Bild, oder was auch immer...


    Hier ist der zugehörige Pen: https://codepen.io/jr-cologne/pen/NYXBvp


    Schon mal vielen Dank für jeglichen Hilfestellungen.


    Gerne könnt ihr auch auf andere Dinge eingehen, die euch negativ auffallen. :)


    Gruß

    JR Cologne


    Edit: Mir fällt auch gerade auf, dass ich irgendwie im Code was durcheinander gebracht habe, was die jeweiligen Formen Raute und Drache angeht. Muss da jetzt erstmal den Überblick zurückgewinnen... :/ :D

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von JR Cologne ()

  • Drache und Raute habe ich jetzt erstmal rausgeschmissen und werde die heute Abend nochmal komplett neu aufrollen.

    War mir gerade schlicht zu blöd, das Chaos zu beseitigen.


    Was genau meinst du mit "umgebenden Kreis"?

  • Dadurch, dass man einen Radius angibt, definiert man ja einen (unsichtbaren) Kreis. Und das Polygon wird sehr wahrscheinlich dadurch definiert, dass man Punkte auf diesen Kreis setzt und mit geraden Linien verbindet. Und die Koordinaten beziehen sich sehr wahrscheinlich auf diesen unsichtbaren, umgebenden Kreis.

  • Verstehe, danke schon mal für den Gedankenanstoß. Jetzt ist dann natürlich die große Frage, wie ich mir diese Info zu Nutze machen kann...


    Mal ne ganz andere Frage: Gibt es nicht irgendeine Library, die das Ganze ein wenig einfacher gestaltet? Meine Lust mich groß mit der Mathematik dahinter, um das irgendwie vielleicht doch in den Griff zu bekommen, zu beschäftigen, hält sich eher in Grenzen. :D

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von JR Cologne ()

  • Also ich finde jCanvas schon sehr einfach. Eine kompakte Doku, wo man sehr schnell findet, was man machen will. Der Nachteil ist, dass es pixelbasiert ist und deshalb schlecht skalierbar. Daher habe ich auch häufig d3.js benutzt und finde es dort wesentlich schwieriger, herauszufinden, wie man ein Vorhaben umsetzt. Es gibt noch mehr Bibliotheken für Vektorgrafiken, aber damit habe ich mich noch nicht beschäftigt.

  • Ja, eigentlich ist jCanvas auch einfach und schön zu bedienen. Nur irgendwie scheitert es halt an so Kleinigkeiten, wie z.B. das Dreieck richtig in die Ecke zu bekommen. :/


    Edit: So, das Dreieck habe ich jetzt halbwegs im Griff.


    Lediglich beim Verschieben existiert das Problem noch.

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von JR Cologne ()

  • Och, nee. :cursing: Daran habe ich echt gar nicht gedacht. Wenn das stimmt, hast du mir sehr geholfen. :D


    Überprüfe das gleich...


    Edit: Ok, dank deiner Lösung sieht das Ganze schon mal deutlich besser aus. :)


    Lediglich ein bisschen springt es noch weg, wenn man es verschiebt.


    Die Eigenschaften x und y existierten bei mir beim Nutzen des Paths zum Zeichnen. Die zweite Idee von dir hat dementsprechend nicht so richtig funktioniert bzw. sollte eigentlich nicht das Problem gewesen sein.

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von JR Cologne ()

  • Zitat

    beim Zeichnen benutzt Du ja x1, y1, x2, y2, x3, y3. Versuche mal, diese auszulesen und daraus x und y zurück zu berechnen.

    Zitat

    Die zweite Idee von dir hat dementsprechend nicht so richtig funktioniert

    Ja, das habe ich inzwischen auch fest gestellt: x1, y1 etc. ändern sich überhaupt nicht beim Dragging.

  • Ein potenzielles Problem beim Verschieben sehe ich noch: Beim dragstop setzt Du ja die Koordinaten in den Eingabefeldern auf die neue Position. Diese haben jedoch je einen Eventlistener für "change" und der triggert natürlich auch, wenn Du mit Javascript etwas einträgst und veranlasst ein Neuzeichnen. Trägst Du die x-Koordinate ein, wird sofort neu gezeichnet, obwohl die y-Koordinate noch gar nicht gesetzt ist. Ich könnte mir vorstellen, dass das Probleme verursacht.

    Weil ich es analysieren wollte, habe ich ein Demo ohne den ganzen Overhead gemacht und dort funktioniert das Verschieben und die Ausgabe der Koordinaten einwandfrei:

    https://jsfiddle.net/Sempervivum/gwffr4ow/3/

  • Ok, das wusste ich nicht. Macht aber Sinn.


    Habe das Ganze jetzt so geändert, dass ich nicht das Value direkt setze, sondern nur meine Settings ändere und diese dann in die redraw()-Funktion einführe.


    Das sollte doch eigentlich das von dir angesprochene Problem beheben? Eine Änderung bzgl. des Verschiebens hat es auf alle Fälle leider nicht gebracht.


    Vielen Dank für deine Mühe. Wäre alleine komplett aufgeschmissen. :D

  • Meinst Du das Springen am Ende des Verschiebens? Das kann ich nur beim jetztigen Dreieck beobachten und es hat folgenden Grund:

    x für links oben ist 0-deltax

    Beim dragstop wird die x-Position von jCanvas gelesen (diese ist bei links oben ebenfalls -deltax) und diese wird in die Settings eingetragen.

    Beim redraw wird diese aus den Settings gelesen und beim Zeichnen nochmals deltax subtrahiert, d. h. der Wert ist jetzt -2*deltax

    Ich habe mal versucht, dies zu beheben, indem ich layer.x+deltax (= 0 bei links oben) in die Settings eingetragen habe, dies ist der Wert, der für den Benutzer richtig ist und damit scheint das Springen behoben zu sein.