Benutzer-Werkzeuge

Webseiten-Werkzeuge


k14:k14.2:k14.2.3:start

14.2.3 Mausrad – MouseWheel

Viele PC-Mäuse verfügen neben der linken und rechten Maustaste auch über ein Mausrad. Dieses Mausrad lässt sich nach vorn oder zurück drehen. Außerdem kann man auch auf das Mausrad drücken, so dass das Mausrad als (mittlere) Maustaste fungiert. Das Mausrad wird bei vielen Programmen zum Scrollen durch die Inhalte von scrollbaren Komponenten oder für das Auslösen einer Zoom-Funktion für eine bestimmte Komponente benutzt.

In Gambas existiert für ausgewählte Komponenten das Ereignis 'Control_MouseWheel()'. Dieses Ereignis wird ausgelöst, wenn das Mausrad bewegt wird oder das Mausrad gedrückt wird, solange sich der Maus-Cursor über der Komponente befindet. Das Ereignis gibt den Wert Mouse.Delta vom Typ Float zurück. Der Wert ist +1, wenn das Mausrad vorwärts gedreht wurde und -1, wenn das Mausrad rückwärts gedreht wurde. Über die Eigenschaft Mouse.Middle können Sie feststellen, ob die mittlere Maustaste – das Mausrad – über einer Komponente gedrückt worden war.

14.2.3.1 Projekt 1 – Zoom-Funktion für einen Funktionsplotter

Das vorgestellte Projekt realisiert einen Funktionsplotter, bei dem man den angezeigten Ausschnitt des Graphen einer Funktion über drei Button vergrößern [+], verkleinern [-] und wieder auf die Normalauflösung [1] zurückstellen kann.

Plotter

Abbildung 14.2.3.1.1: Funktionsplotter

Zusätzlich sollte die Möglichkeit geschaffen werden, den Zoom-Faktor über das Mausrad in einem vorgegebenen Zoom-Bereich zu ändern.

Es wird hier nur die benutze Prozedur zur Realisierung der Zoom-Funktion angegeben, weil das vollständige Projekt Funktions-Plotter im Kapitel 23.4.6 besprochen wird:

[1] Public Sub dwgKS1_MouseWheel()
[2]   If Mouse.Delta = 1 Then ' Mausrad nach vorn → Bild vergrößern – vom Programmierer festgelegt
[3]      If fZoom < 300 Then
[4]         fZoom = fZoom + 5
[5]         KS_RP_G_Zeichnen() ' Zeichnen von Koordinatensystem, Rasterpunkten und Graph der Funktion
[6]      Endif
[7]   Else
[8]      If fZoom > 20 Then
[9]         fZoom = fZoom - 5
[10]         KS_RP_G_Zeichnen()
[11]      Endif
[12]   Endif
[13] End ' dwgKS1_MouseWheel()

Kommentare:

  • Das Ereignis MouseWheel() in der ersten Zeile bezieht sich auf eine DrawingArea.
  • Wenn das Mausrad nach vorn (Zeile 2) gedreht wurde – der Wert von Mouse.Delta ist +1 – dann wird der Zoom mit einer Schrittweite von 5 (Zoom-)Einheiten erhöht. Danach werden das Koordinatensystem, die Rasterpunkte und das Bild der Funktion (Zeile 5) neu gezeichnet.
  • Wenn das Mausrad zurück gedreht wurde – der Wert von Mouse.Delta ist -1 – dann wird der Zoom mit einer Schrittweite von 5 (Zoom-)Einheiten verkleinert und das Bild neu gezeichnet.
  • Die Zahlen 300 und 20 in den Zeilen 3 und 8 sind erprobte Werte und geben den Zoom-Bereich an, in dem gezoomt werden kann. Beachten Sie, dass der Zoom-Faktor im Projekt 1 nicht vom Wert Mouse.Delta abhängt.

14.2.3.2 Projekt 2 – Zoom-Funktion für einen WebBrowser

Das vorgestellte Projekt realisiert einen WebBrowser, für den die Komponente WebView eingesetzt wird. Da diese Komponente bereits das Mausrad nutzt, um durch die Webseite vertikal zu scrollen, musste die Zoom-Funktion mit einem Schalter zu- oder abgeschaltet werden, um mit dem Ereignis MouseWheel() arbeiten zu können. Als Schalter wird als eine Möglichkeit hier die Steuerungstaste (Strg, Ctrl) benutzt.

  • Für die Realisierung einer Zoom-Funktion für den Inhalt der Komponente WebBrowser wird der Wert für die Eigenschaft WebView.Zoom in einem erprobten Intervall auf Werte kleiner respektive größer als 1 geändert.
  • Mit einem Klick auf das Mausrad wird der Zoom-Faktor auf den Wert 1 – entspricht 100% oder Original-Darstellungsgröße – zurückgesetzt.

WedbBrowser

Abbildung 14.2.3.2.1: Demonstrationsprogramm WebBrowser mit Zoom-Funktion (Mausrad)

Im folgenden Abschnitt wird der vollständige Quelltext für das Projekt angegeben und anschließend kommentiert:

[1] ' Gambas class file
[2] 
[3] Public Sub Form_Open()
[4]   FMain.Center
[5]   WebView1.Url = "http://gambasdoc.org/help/comp/gb.qt4.webkit/webview?v3"
[6] End ' Form_Open()
[7] 
[8] Public Sub WebView1_MouseWheel()
[9]   If Mouse.Control Then 
[10]      Select Case Mouse.Delta
[11]      Case -1
[12]         If WebView1.Zoom < 2.26 Then
[13]            WebView1.Zoom = Round(WebView1.Zoom - Mouse.Delta / 4, -2)
[14]         Endif
[15]      Case +1
[16]         If WebView1.Zoom > 0.61
[17]            WebView1.Zoom = Round(WebView1.Zoom - Mouse.Delta / 10, -2)
[18]         Endif
[19]      End Select
[20]   Endif ' Mouse.Control = True?
[21] End ' WebView1_MouseWheel()
[22] 
[23] Public Sub WebView1_MouseDown()
[24]   If Mouse.Middle Then WebView1.Zoom = 1
[25] End ' WebView1_MouseDown()
[26] 
[27] Public Sub btnHelpMe_Click()
[28]   Message.Info("Zoom-Funktion:\nTaste 'Steuerung' gedrückt halten und Mausrad drehen!")
[29] End ' btnHelpMe_Click()
[30] 
[31] Public Sub btnClose_Click()
[32]   FMain.Close
[33] End ' btnClose_Click()
[34] 

Kommentare:

  • Für das Projekt 2 steht die Realisierung einer Zoom-Funktion für den Inhalt der Komponente WebView im Vordergrund. Daher fällt der Browser sehr spartanisch aus und zeigt nur eine Webseite (Zeile 5) mit fester URL an.
  • Das Ereignis MouseWheel() in der achten Zeile bezieht sich auf die WebView-Komponente.
  • Der Zoom-Faktor wird aber nur dann geändert, wenn gleichzeitig beim Drehen des Mausrades die Steuerungstaste gedrückt gehalten wird → Zeile 9, weil sonst die Scroll-Funktion für den Inhalt der Webseite aktiv ist.
  • Die Zahlen 2,26 und 0,61 in den Zeilen 12 und 16 sind erprobte Werte und geben den Zoom-Bereich an.
  • Beachten Sie, dass der Zoom-Faktor für das Vergrößern und das Verkleinern vom Wert Mouse.Delta in den Zeilen 13 und 17 abhängt!
  • Wenn das Mausrad zurück gedreht wurde, der Wert von Mouse.Delta ist -1, dann wird der Zoom der Webseite mit einer Schrittweite1 von Mouse.Delta/4 vergrößert.
  • Der Zoom der Webseite wird mit einer anderen Schrittweite2 von Mouse.Delta/10 verkleinert, wenn das Mausrad nach vorn gedreht wurde.
  • Als Kontrollstruktur wurde in der Ereignisbehandlungsroutine – im Gegensatz zum Projekt 1 – keine verschachtelte IF-Struktur verwendet sondern eine Select-Case-Struktur.
  • Anders als im Projekt 1 wird im Projekt 2 der Zoom vergrößert, wenn das Mausrad zurück gedreht wurde, was Sie aber ändern können.
  • Der WebView-Zoom wird auf 100 Prozent (Zoom-Faktor = 1) (zurück-)gesetzt, wenn man auf das Mausrad drückt. In den Zeilen 27 bis 29 wird das in der Prozedur WebView1_MouseDown() realisiert.

14.2.3.3 Download

Die Website verwendet zwei temporäre Session-Cookies. Diese technisch notwendigen Cookies werden gelöscht, wenn der Web-Browser geschlossen wird! Informationen zu Cookies erhalten Sie in der Datenschutzerklärung.
k14/k14.2/k14.2.3/start.txt · Zuletzt geändert: 20.06.2016 (Externe Bearbeitung)

Seiten-Werkzeuge