selfhtml.de - Alles für den Webmaster!

 

Empfehlung:

wix.com

Kostenlose Homepage

Besuchen Sie auch:

Jobs:

JavaScript und Canvas - Array erstellen und rendern

Autor: alve89 [Beiträge: 2]
Datum: 10.11.2013 18:52:50

Hallo zusammen!

Ich habe hier eine Frage, bei der ich eure Hilfe bräuchte:

Und zwar würde ich gerne (für Smartphones) eine einzelne Seite erstellen, bei der es möglich ist, mit dem Finger zu unterschreiben (wie man es z.B. von DHL kennt).

Dafür kann man den <canvas>-Tag nutzen. Nachfolgend ist der Code zu finden, der auf im Apple-Developers-Bereich angeboten wird, welcher auch so ganz gut funktioniert.

Nun ist es aber so, dass dieser Bereich lediglich die aktuelle Maus- / Fingerposition angibt. Ich hätte aber gern, dass alle Punkte, die man berührt hat, in ein Array (?) geschrieben werden (und am besten auch gleich sichtbar bleiben). Anschließend möchte ich ein Formular mit eins, zwei Felder und diesem Array abschicken und per PHP auswerten (das wiederum soll nicht das Problem sein).

Leider habe ich das Problem, dass ich mich mit JavaScript so ziemlich überhaupt nicht auskenne (ich beschäftige mich schon seit Längerem nur mit PHP), dieses Problem aber dennoch gern lösen würde. Es wird jetzt zwar wieder irgendjemand sagen "Dann beschäftige dich gefälligst mit JavaScript!", was ich auch schon tue, aber bis ich dieses Wissen hätte, bräuchte ich das Script, um das es hier geht, wahrscheinlich nicht mehr.

Es würde mich also sehr freuen, wenn sich dennoch jemand bereit erklären könnte, mir bei der Lösung meines Problems zu helfen.

Hier ist der Code:

<html>
<head>
    <!-- fill iPhone screen with canvas -->
    <meta name="viewport" content="width=400" /
    <title>Tracking Mouse and Touch Events on Canvas</title>
    <script type="text/javascript">
        var can, ctx, canX, canY, mouseIsDown = 0;

        function init() {
            can = document.getElementById("can");
            ctx = can.getContext("2d");

            can.addEventListener("mousedown", mouseDown, false);
            can.addEventListener("mousemove", mouseXY, false);
            can.addEventListener("touchstart", touchDown, false);
            can.addEventListener("touchmove", touchXY, true);
            can.addEventListener("touchend", touchUp, false);

            document.body.addEventListener("mouseup", mouseUp, false);
            document.body.addEventListener("touchcancel", touchUp, false);
        }

        function mouseUp() {
            mouseIsDown = 0;
            mouseXY();
        }

        function touchUp() {
            mouseIsDown = 0;
            // no touch to track, so just show state
            showPos();
        }

        function mouseDown() {
            mouseIsDown = 1;
            mouseXY();
        }

        function touchDown() {
            mouseIsDown = 1;
            touchXY();
        }

        function mouseXY(e) {
            if (!e)
                var e = event;
            canX = e.pageX - can.offsetLeft;
            canY = e.pageY - can.offsetTop;
            showPos();
        }

        function touchXY(e) {
            if (!e)
                var e = event;
            e.preventDefault();
            canX = e.targetTouches[0].pageX - can.offsetLeft;
            canY = e.targetTouches[0].pageY - can.offsetTop;
            showPos();
        }

        function showPos() {
            // large, centered, bright green text
            ctx.font = "24pt Helvetica";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.fillStyle = "rgb(64,255,64)";
            var str = canX + ", " + canY;
            if (mouseIsDown)
                str += " down";
            if (!mouseIsDown)
                str += " up";
            ctx.clearRect(0, 0, can.width, can.height);
            // draw text at center, max length to fit on canvas
            ctx.fillText(str, can.width / 2, can.height / 2, can.width - 10);
            // plot cursor
            ctx.fillStyle = "white";
            ctx.fillRect(canX -5, canY -5, 10, 10);
        }
    </script>

</head>
<body onload="init()">
    <canvas id="can" height="200" width="300" style="background-color:black">
    </canvas>
</body>
</html>


Unter dem nachfolgenden Link kann man sehen, wie es aktuell aussieht.
PS: Die Worte "up" bzw. "down" im canvas-Feld geben an, ob die Maustaste gedrückt wird. Sollte man das Feld mit einem Finger (auf dem Smartphone) berühren, erscheint auch "down".


Vielen Dank euch schon mal im Voraus!

Beste Grüße,
Stefan

Beiträge

Antwort schreiben

Username: Usernamen registrieren
Passwort: Passwort vergessen?
Thema:
  Bitte benutze für deinen Beitrag die Groß-/Kleinschreibung!
Beitrag:
Link (URL):
Titel für Link:
Grafik (URL):
  Die Breite der Grafik darf 468 Pixel nicht überschreiten.
 
E-Mail-Benachrichtigung:



Zum Abschicken deines Beitrags bitte die Schaltfläche "Abschicken" nur einmal anklicken und warten. Der Server braucht manchmal einige Zeit, bis er den Beitrag in die Datenbank übernommen hat. Wenn du die Schaltfläche mehrmals drückst, erscheint dein Beitrag auch mehrmals im Forum.

Bewerten Sie Ihren Webhosting-Provider

Webhosting Provider bewerten und Apple iPad gewinnenWie zufrieden sind Sie mit Ihrem Webhosting-Provider? Gibt es Probleme beim Service, mit der Performance oder der Abrechnung?

Teilen Sie jetzt Ihre Erfahrungen mit anderen Webmastern und schreiben Sie eine Provider-Bewertung. Mit etwas Glück können Sie ein Apple iPad gewinnen!

Weitere Informationen und Teilnahme...