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
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


Re: JavaScript und Canvas - Array erstellen und rendern

Autor: reporter
Datum: 11.11.2013 17:49:08

Hallo,

ich habe mich mit deiner Problemstellung noch nicht intensiv beschäftigt. Allerdings wirst du mit einem Versenden des "Arrays" nicht weiterkommen, da Javascriptobjekte nicht kompatibel zu einem PHP-Array sind.
Vielmehr wirst du die Daten in JSon-Objekte wandeln müssen, denn für diese Notation gibt es sowohl in Javascript als auch in PHP Methoden zum Bearbeiten.



Re: JavaScript und Canvas - Array erstellen und rendern

Autor: reporter
Datum: 14.11.2013 16:22:59

Hallo,

jetzt habe ich es geschafft mich damit zu befassen. Die Änderungen sind einfach zu bewerkstelligen:

<script type="text/javascript">
...
var ctxArray = new Array();

...
function showPos()
{
   ...
   ctxArray.push(ctx);
}
</script>

Wie bereits zuvor geschrieben, empfehle ich die Daten via Json zu versenden. Das Hinzufügen von versteckten Formularfeldern ist nach beim auswerten ziemlich mühselig.



Re: JavaScript und Canvas - Array erstellen und rendern

Autor: alve89
Datum: 15.11.2013 00:22:17

Hallo reporter,

danke für deine Antwort(en). Die erste ist in meinen Mails wohl irgendwie untergegangen. Nachdem ich mich eh mit JS beschäftigen möchte, finde ich deinen Ansatz mehr als interessant und werde ihn weiterverfolgen.

Für alle anderen, die vielleicht vor dem gleichen Problem stehen (und sich ähnlich gut wie ich auskennen), habe ich unten einen sehr interessanten Link angehängt, der zu einer HTML5-App führt, die exakt das macht! Wenn man sich damit mal ein wenig befasst, bekommt man recht schnell das, wonach hier gesucht wurde.

Viel Spaß damit!


PS: Wenn jemand auf die Idee kommen sollte, die Größe des <canvas>-Feldes ändern zu wollen: Das geht nicht über eine einfache Änderung von width, height (in der CSS), wenn es sich um prozentuale Änderungen handeln sollte (z. B. width: 90%).

Hilfreich sollte das hier sein:
http://stackoverflow.com/questions/4288253/html5-canvas-100-width-height-of-viewport