Hier wird das Zusammenspiel von Maus und "User coordinates" demonstriert. Wenn für einen Viewport oder für den gesamten Canvas "User coordinates" eingestellt sind, möchte der Benutzer auch bei Aktionen mit der Maus mit diesen Koordinaten arbeiten. Einige der dafür von CanvasGI bereitgestellten Funktionen werden am Beispiel der Auswertung folgender Maus-Ereignisse beschrieben. Dabei wird auch die Möglichkeit des "Fangens" der Positionen auf einem einstellbaren "Fangraster" demonstriert (man beachte, dass das Raster der Zeichenfläche unabhängig vom "Fangraster" eingestellt werden kann):
Alle mit der Zeichenfläche zusammenhängenden Aktionen werden hier über window.onload gestartet. Nachfolgend werden nur der Anfang und das Ende der beim Start abgearbeiteten Funktion gelistet, die Funktionen, die den Ereignissen zugeordnet werden, sind weiter unten beschrieben.
window.onload = function () { gi = new canvasGI ("canvas") ; // Ein "CanvasGI-Objekt" wird erzeugt und // einer globalen Variablen gi zugewiesen var cv = document.getElementById ("canvas") ; cv.addEventListener("mouseover" , overcanvas , false) ; // Zuweisung von Funktionen cv.addEventListener("mouseout" , moveoutcanvas , false) ; // an Maus-Ereignisse, die cv.addEventListener("mousemove" , moveoncanvas , false) ; // im Canvas-Bereich cv.addEventListener("mousedown" , clickoncanvas , false) ; // ausgelöst werden // ... gi.setcatchraster (xcrast , ycrast) ; draw() ; } ; // window onload
function draw() { gi.clearcanvas ("silver") ; gi.setusercoordsi (xmin , ymin , xmax , ymax , 10) ; // Isotrope Skalierung var nleft = (xmin < 0) ? Math.round(-xmin/xrast) : 0 ; var nright = (xmax > 0) ? Math.round( xmax/xrast) : 0 ; gi.udrawxaxis (xrast , nleft , nright , xrast/3 , xrast/4 , "x" , "black" , "black") ; // x-Achse var ndown = (xmin < 0) ? Math.round(-ymin/yrast) : 0 ; var nup = (xmax > 0) ? Math.round( ymax/yrast) : 0 ; gi.udrawyaxis (yrast , ndown , nup , yrast/3 , yrast/4 , "y" , "black" , "black") ; // y-Achse gi.beginpath () ; gi.uraster (xrast , nleft , nright , yrast , ndown , nup) ; // Raster gi.strokestyle ("#444444") ; gi.stroke () ; }
Nachfolgend werden die Funktionen beschrieben, die auf die Maus-Ereignisse reagieren. Diesen Funktionen wird ein "Event object" übergeben, das in den nachfolgend gelisteten Funktion immer mit dem Namen e bezeichnet ist.
Das Ereignis "mouseover" tritt ein, wenn der Mauszeiger im Bereich der Zeichenfläche landet. Entsprechend dem zugehörigen "Event listener" wird die Funktion overcanvas aufgerufen:
function overcanvas (e) { document.body.style.cursor = "crosshair" ; moveoncanvas (e) ; }
function moveoncanvas (e) { var xycatch ; var cxy = gi.canvascoord (e) ; // Maus-Koordinaten werden zu Canvas-Koordinaten var ucoor = gi.cursor2u (cxy.x , cxy.y) ; // Canvas-Koordinaten werden zu "User coordinates" if (ucoor !== false) { xycatch = gi.catchpoint (ucoor.x , ucoor.y) ; } // "User coordinates" werden else { return ; } // auf Raster gefangen ... document.mauskoor.xmaus.value = "" + xycatch.x.toPrecision(3) ; // ... und über der document.mauskoor.ymaus.value = "" + xycatch.y.toPrecision(3) ; // ... Zeichenfläche angezeigt }
Beim einem Mausklick in die Zeichenfläche (Ereignis "mousedown") wird die Funktion clickoncanvas gestartet:
function clickoncanvas (e) { var cxy = gi.canvascoord (e) ; var ucoor = gi.cursor2u (cxy.x , cxy.y) ; var xycatch = gi.catchpoint (ucoor.x , ucoor.y) ; if (ucoor !== false) { gi.udrawmarker (ucoor.x , ucoor.y , gi.MKCIRCLE , 1 , "yellow" , "black") ; } }
Beim Verlassen der Zeichenfläche (Ereignis "mouseout") wird die Funktion moveoutcanvas abgearbeitet, die nur dem Cursor seine Standardform wiedergibt und die beiden Anzeigefelder für die Koordinaten löscht:
function moveoutcanvas (e) { document.body.style.cursor = "auto" ; document.mauskoor.xmaus.value = "" ; document.mauskoor.ymaus.value = "" ; }
Das in der Zeichenfläche oben rechts auf dieser Seite eingezeichnete Raster dient ausschließlich zur Orientierung. Es hat keinen Einfluss auf die Aktionen mit der Maus.
Das "Fangraster" wird in der Regel viel enger sein als ein Raster zur Orientierung, aber natürlich können auch beide identisch sein. Der Sinn des Fangrasters besteht darin, nicht "beliebig krumme" Werte per Mausklick einzufangen. Ohne Fangraster ist es nahezu unmöglich, zweimal den gleichen Punkt zu klicken. Aber natürlich kann man das "Fangen" auch ausschalten. Wenn beide Rasterweiten auf den Wert 0 gesetzt werden, wird exakt der geklickte Punkt abgeliefert.
Folgende Seiten werden als Einführung in die Benutzung des CanvasGI empfohlen: