HowTo: Mauseingaben & Javascript (Wie bastelt man ein Paint mit Javascript?)

In diesem HowTo schauen wir uns mal an, wie man auf Mauseingaben mit Javascript reagiert. Es ist etwas schwammig formuliert, allerdings fiel mir nichts besseres ein. Auf einfache “onclick” Events oder “onhover” etc. zu reagieren, ist nicht besonders schwer. Allerdings ist es manchmal wichtig zu wissen, wo der Nutzer hingeklickt hat - direkt dort wo der Nutzer hinklickt muss irgendwas passieren. In Zeiten von DragnDrop wird es auch immer wichtiger, die Maus intuitiv mit in die Weboberfläche zu integrieren - also mehr als nur simples klicken.

Hier setzt dieses HowTo an. Die Fragestellung in dem Titel ist zwar etwas überspitzt, allerdings wollen wir ein ganz einfaches Paint mit Javascript nachbasteln.

So sieht die Anwendung hinterher aus:

Schritt 1: Grundsätzlicher Aufbau

Der Hauptteil der Anwendung ist eigentlich nur ein “Div” in dem wir malen wollen:

    <div id="PaintingArea"> 
    </div>

Hier die Styleangaben:

    #PaintingArea 
    { 
    cursor: pointer; 
    margin-top: 10px; 
    border: solid 1px #000; 
    height: 270px; 
    width: 420px; 
    z-index: 10; 
    }

Schritt 2: Eventhandler setzen

Wie in den oberen Angabe zu sehen ist, werden keine Javascript Eventhandler hinzugefügt. Damit es auf allen Browsern läuft, muss man die Eventhandler per Code setzen (und am besten im Body onload aufrufen) :

    function init() 
    { 
    document.getElementById("PaintingArea").onmousedown = startPainting; 
    document.getElementById("PaintingArea").onmousemove = performPainting; 
    document.getElementById("PaintingArea").onmouseup = endPainting; 
    }

onmousedown:

Bei einem einfachen “onmousedown” (also sobald die Maustaste gedrückt wird) wird ein Flag “Global_Painting” gesetzt, dass momentan gezeichnet wird und im Anschluss wird einfach unser Punkt (also ein Div gezeichnet).

onmousemove: Wenn die Mause über den Div bewegt wird UND das Flag gesetzt ist, wird weiterhin gezeichnet. Falls vorher kein Klick (und kein Flag gesetzt wurde), wird nicht gemalt. So ist es möglich, dass man mit der Maus über das Div bewegt, ohne das was passiert.

onmouseup: Wenn die Maustaste losgelassen wird, wird das Flag auf false gesetzt - also wird nicht mehr gemalt und die Maus kann wieder über das Div bewegt werden, ohne das was passiert.

Schritt 3: Mausposition auslesen

Hier kommt eigentlich der wichtigste Schritt - das auslesen der aktuellen Mausposition.

Im IE / Opera kann man über diese Eigenschaft darauf zurückgreifen:

        Global_Painting_offsetLeft = window.event.clientX; 
        Global_Painting_offsetTop = window.event.clientY;

Im Firefox über diese hier (daher einfach eine kleine JS Browserweiche mit “if(document.all)“ einbauen) :

            Global_Painting_offsetLeft = clickEvent.clientX; 
            Global_Painting_offsetTop = clickEvent.clientY;

Dabei ist “clickEvent” als Parameter der Funktion übergeben (obwohl in der init nichts angegeben wird - es funktioniert ;) ). Die “Global_Painting_offsetXXX” Variablen speichern die momentane Mausposition.

Hier mal die komplette startPainting Funktion:

    function startPainting(clickEvent) 
    { 
    Global_Painting = true;    

    if(!clickEvent) clickEvent = window.event; 
    if(document.all) 
        { 
        Global_Painting_offsetLeft = window.event.clientX; 
        Global_Painting_offsetTop = window.event.clientY; 
        } 
    else 
        { 
        Global_Painting_offsetLeft = clickEvent.clientX; 
        Global_Painting_offsetTop = clickEvent.clientY; 
        }    

    paint(); 
    }

Die “perfomPainting” ist eigentlich ebenso.

Schritt 4: Das Malen implementieren

Die gemalten “Pixel” sind in wahrheit Divs mit einer Hintergrundfarbe. Den Div wird einfach als “style.top” und “style.left” Attribut die Werte aus unseren “Global_Painting_offsetXXX” gegeben.

Schritt 5: Fertig

Der Rest ist eigentlich nur noch simples Javascript - z.B. Farbe setzen oder “Pinselgröße”. Das kann ja jeder sich im Code anschauen.

Nachtrag:

Bei dem Malen verwende ich einfache Divs - das sieht für den Nutzer schön aus und ist auch recht easy. Man hätte auch eine Tabelle nehmen können, da wäre das programmatische Auswerten wesentlich einfacher, hätte aber das Raster begrenzt. Auch das es im FF etwas buggy ist, stimmt - allerdings soll dies nur eine Anregung sein und mal zeigen, wie man auf die Mauspositionsdaten zugreifen kann.

Viel Spaß beim Benutzen und Weiterverwenden :) 

Links:

[ Zur Javascript Paint Anwendung + Source Code ]