Mausbewegungen und "User coordinates", "Fangraster"

Marker zeichnen per Mausklick

Zeichenfläche
x-min:
x-max:
y-min:
y-max:
x-Rasterweite:
y-Rasterweite:
Fangraster ...
... in x−Richtung:
... in y−Richtung:
Aktuelle Mauskoordinaten: x =     y =

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

Realisierung

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 = "" ;
      }

Bemerkungen zu den Rastern

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.

Weiterlesen

Folgende Seiten werden als Einführung in die Benutzung des CanvasGI empfohlen: