Anwendung der Zeichenfläche auf Tablet optimieren

Question

Guten Tag,

bei Anwendung der Zeichenfläche auf dem Tablet verschiebt sich die gesamte Webseite, wenn ich etwas einzeichnen möchte. Dadurch kann man mit der Zeichenfläche nur eingeschränkt arbeiten - Punkte können z. B. gesetzt, Flächen jedoch nicht schraffiert werden. Auf dem PC/Laptop funktioniert alles einwandfrei.

Übersehe ich etwas bei der Umsetzung auf dem Tablet? Gibt es eine Möglichkeit, die Anwendung der Zeichenfläche zu optimieren?

Vielen Dank!

Comments

Vermutlich muss nur die Funktion zum Scollen durch Wischen deaktiviert werde. Ich prüfe mal, welche Änderungen an der Frage dafür notwendig sind.

---

Danke für die Hilfe! Geben Sie mir dann über einen Kommentar zu dieser Frage ein Update oder soll ich demnächst noch einmal nachfragen?

---

Ich habe die Standard-Zeichenfläche auf einem Android-Tablet und einem Apple-Smartphone gerade nochmal getestet, und kann das Problem nicht replizieren. Dort ist das Scrollen auf der Seite nur außerhalb der Zeichenfläche möglich, in der Zeichenfläche wird korrekt gezeichnet.

Tritt das Problem auf Ihrem Testgerät mit folgendem Fragebogen auf?
https://www.soscisurvey.de/ct23/

Unter der Zeichenfläche ist extra weißer Platz, damit man im Prinzip scrollen kann.

---

Ja, über diesen Fragebogen klappt es. Leider aber über meinen immer noch nicht.
Anbei ein Pretest-Link: https://s2survey.net/personenwahrnehmung/?act=2CepkiOImntCk4hSFMwUiUYD

Könnte das ggf. mit dem Hintergrundbild zusammenhängen?

Edit: Habe den Pretest-Link aktualisiert.

---

Konnten Sie bereits einen Blick auf den Pretest-Fragebogen werfen? Danke!

---

Auf einem Android-Tablet lud das Bild bei meinem Test gar nicht erst. Außerdem wird mir im regulären browser eine Fehlermeldung angezeigt, dass es in dieser Zeile kein ctx.strokeLine() gibt:

    ctx.strokeStyle = 'blue';
    ctx.strokeLine(10, 10, 100, 100);

Diese Zeile ist in der ursprünglichen Zeichenfläche-Vorlage nicht enthalten. Entfernen Sie diese bitte mal, dann teste ich nochmal, ob das Bild auf dem Mobilgerät dann korrekt lädt.

Setzen Sie außerdem das img.src = ... unter den img.onload-Block. Es kann sonst sein, dass das onload nicht mehr auslöst.

---

Komisch, bei mir hat es bisher wenigstens das Bild auf dem Android-Tablet geladen...
Ich habe die Änderungen im HTML-Code vorgenommen. Klappt es jetzt?

---

Die blaue Strichfarbe können Sie behalten, nur die Zeile mit strokeLine() war falsch - und vermutlich auch nur ein Test-Code von Ihnen.

Nun kann ich das Scroll-Problem auf dem Tablet nachvollziehen. Antwort siehe unten.

Answer 1

In der SoSci-Zeichenfläche-Vorlage finden Sie gleich in der zweiten Zeile den Code touch-action: none.

<canvas id="%q.id%canvas" width="300" height="300" style="border: 1px solid #CCCCCC; touch-action: none;"></canvas>

Dieser ist dafür verantwortlich, dass Ihre Zeichenfläche auf Touch-Geräten nicht herumscrollt. Bitte ergänzen Sie diesen in Ihrem angepassten Code.

Comments

Es hat geklappt! Herzlichen Dank für die schnelle Hilfe!