Ankündigung

Einklappen
Keine Ankündigung bisher.

Mousemove Event & Scrollen auf Canvas auf Touchgeräten

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Mousemove Event & Scrollen auf Canvas auf Touchgeräten

    Hi zusammen,

    ich habe ein vergleichsweise banales Problem, bei dem mir Google bislang nicht weiterhelfen konnte.

    Auf einer Website befindet sich ein Canvas mit 100vh und 100vw, oberhalb und unterhalb des Canvas befinden sich noch andere Elemente, d.h. die Seite ist vertikal ausgerichtet und scrollbar.

    Wenn ich nun mit dem Mousemove Event arbeite, um den User etwas zu zeichnen, Partikel kreieren zu lassen o.ä., dann funktioniert es auf Desktops und Laptops ja einwandfrei - auf Touchgeräten hingegen kann der User nun aber nicht mehr scrollen.

    Hat hier jmd. einen Lesehinweis oder Tipp, wie ich den User auf Mousemove etwas auf den Canvas zeichnen lassen und gleichzeitig auf Touchgeräten die Seiten scrollbar lassen kann?

    Thx und VG

  • #2
    Seit wann haben Smartphones eine Maus angeschossen?
    Siehe https://stackoverflow.com/questions/...mobile-browser für die Lösung.

    Kommentar


    • #3
      Dank dir für deine Antwort, über das gute alte WLAN Kabel natürlich .

      Die von dir gepostete Stack Overflow Seite hatte ich auch schon, es hat bei mir leider keine Abhilfe geschaffen.

      Im Endeffekt ist das folgende zu 100% meine Problemstellung (verwende auch Sketch.js), daher verzichtete ich mal auf eine Paraphrase:

      https://stackoverflow.com/questions/...-touch-devices

      Kommentar


      • #4
        Habe es jetzt selbst so gelöst indem ich einen Container über den Canvas gelegt habe, damit geht läuft es wie gewünscht.

        Noch eine Frage zu deiner Antwort protestix:

        Ist deine Frage zu Smartphones und Mäusen nur als semantische Spitzfindigkeit gemeint? Oder sollte man immer beide Events registrieren (mouse... & touch...). Ich lese irgendwie immer, dass sie komplett equivalent seien und dachte daher eines würde reichen - ist dem nicht so?

        Kommentar


        • #5
          Du hattest nicht erwähnt das du sketch.js verwendest.
          Ob das immer so ist mit dem Mausevent, dass es äquivalent ausgewertet wird , weiss ich ehrlich gesagt, angesichts des vielen Javascript(jquery etc.) das bei mobilen Geräten angewendet wird nicht. In der Grundfunktion wohl schon, aber wer weiss was morgen ist, und da du canvas erwähnt hattest habe ich mit diese Kombination mal geschaut, was die Gemeinde auf SOF so zu sagen hatte.
          Habe selber noch kein Canvas zum Zeichnen eingesetzt.

          Kommentar


          • #6
            Ja, Sketch.js ist leider etwas dünn dokumentiert.

            Es gibt wohl eine Property dragging - habe diese mal testweise per if Abfrage ums Zeichnen gesetzt, funktioniert auf dem Desktop bestens, auf Touch leider gar nicht.

            Kommentar


            • #7
              So, der kleine Nerd in mir hatte keine Ruhe, da ich diese JS Library mit ihren Effekten sehr geil finde und sie unbedingt verwenden will.

              Hier ist die Lösung des geposteten Problems:

              Ich dachte, dies sei ein grundsätzliches Problem in Bezug auf das Canvas Element und dessen Verwendung auf Touchgeräten. Ist es jedoch nicht, ist Sketch.js bezogen.

              Ich habe mir also die Mühe gemacht, mich durch die Mozilla MDN Docs zu Touchevents und den gesamten Quellcode von Sketch.js zu lesen. Selbst wenn ich nur mit dem Event Mousemove arbeite, triggert natürlich Touchstart auf dem Touchdevice, welches das erste der sieben Events in der Abfolge von Touchevents ist. Und in Touchstart stand in Sketch.js, fein säuberlich mit dem Kommentar "Prevent scrolling (should this be optional?)" ein event.preventDefault(); am Anfang der Funktion...

              So kann man seinen Samstagnachmittag auch verbringen .

              Kommentar

              Lädt...
              X