Implementierung des Durchklickens des transparenten Bereichs unregelmäßiger Formen in Electron

Implementierung einer unregelmäßigen Form

Hier implementieren wir eine Kreisform. Die Implementierung von Formen anderer Gestalt erfolgt analog zu dieser Methode.

Ändern Sie zunächst die Höhe und Breite des Fensters auf den gleichen Wert, um das Fenster quadratisch zu machen.

Zweitens setzen wir die transparente Eigenschaft des Fensters auf „true“. Nach dieser Einstellung ist das Fenster immer noch quadratisch, aber solange wir die Form des Dom-Elements im Inhaltsbereich steuern, können wir dem Fenster eine unregelmäßige Form verleihen.

Unregelmäßige Fenster erfordern häufig benutzerdefinierte Ränder und Titelleisten, daher wird der Rahmen ebenfalls auf „False“ gesetzt.

Darüber hinaus kann die Größe transparenter Fenster nicht geändert werden. Setzen Sie daher die Eigenschaft „Größe veränderbar“ auf „false“.

Um zu verhindern, dass nach der Anzeige des Fensters durch Doppelklicken auf den verschiebbaren Bereich des Fensters das Maximierungsereignis ausgelöst wird, setzen wir außerdem die Maximierungseigenschaft auf „False“.

Der endgültige Code zum Erstellen des Fensters lautet wie folgt:

win = neues Browserfenster({
        Breite: 380,
        Höhe: 380,
        transparent: wahr,
        Rahmen: falsch,
        größenveränderbar: false,
        maximierbar: falsch,
        //...
})

Ändern Sie als Nächstes den Stil, damit das Dom-Element im Inhaltsbereich als Kreis angezeigt wird:

html, Text { 
  Rand: 0px; 
  Polsterung: 0px; 
  Zeigerereignisse: keine;
}
#app {
 Box-Größe: Rahmenbox;
 Breite: 380px; 
 Höhe: 380px;
 Rahmenradius: 190px;
 Rand: 1px durchgehend grün;
 Hintergrund: #fff;
 Überlauf: versteckt;
 Zeigerereignisse: auto;
}

Im obigen Stilcode wird das Element #app durch den Stil border-radius auf einen Kreis gesetzt. border-radius ist für die Definition des abgerundeten Eckenstils eines Elements verantwortlich. Wenn die abgerundete Ecke groß genug ist, wird das gesamte DIV zu einem Kreis.

Der Zeigerereignisstil wird später erläutert.

Die endgültige Fensteroberfläche ist in Abbildung 5-7 dargestellt:

Wenn Sie ein wenig über CSS-Kenntnisse verfügen, wissen Sie, dass Sie dieses Fenster zusätzlich zum Kreis auch so steuern können, dass es mithilfe des CSS-Stils jede andere Form annimmt.

Durch transparente Bereiche klicken

Es gibt ein kleines Problem mit der obigen Anwendung. Obwohl das Fenster rund aussieht, ist es eigentlich ein quadratisches Fenster. Der einzige Unterschied besteht darin, dass die vier Ecken des Quadrats transparent sind, sodass es wie ein rundes Fenster aussieht.

Wenn ich im Bild unten im Bereich ① auf die Textdatei klicke, tritt das Mausklickereignis immer noch in diesem Fenster auf und klickt nicht auf die Datei.

Als Entwickler verstehen wir, warum das funktioniert, aber als Benutzer fühlt es sich seltsam an. Um ein besseres Benutzererlebnis zu erreichen, müssen wir es der Maus ermöglichen, beim Klicken in diese vier Bereiche in das Fenster einzudringen und auf dem Inhalt hinter dem Fenster zu landen.

In der offiziellen Electron-Dokumentation steht eindeutig, dass „man nicht durch transparente Bereiche klicken kann“, was uns nicht stört. Es gibt einen kleinen Trick, um dieses Problem zu lösen.

Zuerst müssen Sie die Methode setIgnoreMouseEvents des Fensterobjekts verwenden, die es dem Fenster ermöglicht, alle Mausereignisse innerhalb des Fensters zu ignorieren, und alle in diesem Fenster auftretenden Mausereignisse werden an den Inhalt hinter diesem Fenster weitergegeben.

Wenn beim Aufruf dieser Methode der Forward-Parameter übergeben wird, beispielsweise:

setIgnoreMouseEvents(true, { vorwärts: true }),

Dann dringen nur Klickereignisse in das Fenster ein und Mausbewegungsereignisse werden weiterhin ausgelöst.

Darauf basierend führen wir den folgenden Code auf der Seite aus:

const remote = erfordern("Elektron").remote;
  lass win = remote.getCurrentWindow();
  window.addEventListener("Mausbewegung", event => {
  let flag = Ereignis.Ziel === Dokument.Dokumentelement;
  wenn (Flagge) {
     });
  } 
  anders {
    : win.setIgnoreMouseEvents(false);
  }
  });
  });

Beachten Sie, dass es sich um experimentellen Code handelt und daher das Remote-Modul verwendet wird. Einige Probleme mit dem Remote-Modul habe ich ausführlich in „Warum das Electron-Team das Remote-Modul loswerden möchte“ beschrieben.

Im obigen Code ist das Fensterobjekt so eingestellt, dass es auf das Mousemove-Ereignis hört. Wenn sich die Maus in den kreisförmigen Inhaltsbereich des Fensters bewegt, darf das Mausereignis nicht eindringen. Wenn die Maus in den transparenten Bereich bewegt wird, werden Mausereignisse durchgelassen.

Als nächstes fügen wir den Stil pointer-events: none zu den html- und body-Elementen und pointer-events: auto zum #app-Element hinzu.

Nach dem Festlegen von pointer-events: none wird das markierte Element nie zum Ziel von Mausereignissen.

Für das untergeordnete Element #app ist pointer-events: auto festgelegt. Dies bedeutet, dass das untergeordnete Element #app weiterhin Ziel von Mausereignissen werden kann.

Das heißt, mit Ausnahme des kreisförmigen Bereichs empfangen die anderen Teile keine Mausereignisse mehr.

Wenn die Maus außerhalb des kreisförmigen Bereichs bewegt wird, wird das Mousemove-Ereignis des Fensterobjekts ausgelöst und event.target ist das document.documentElement-Objekt (dieses Ereignis wird nicht beim HTML- oder Body-Element ausgelöst, sondern beim Fensterobjekt. Document.documentElement ist das Stammelement im DOM-Baum, d. h. das durch den HTML-Knoten dargestellte Element).

An diesem Punkt wird die Beurteilung im obigen Code vorgenommen. Wenn sich die Maus in den vier oben genannten Bereichen bewegt, ermöglicht das Mausereignis das Eindringen. Bei Bewegungen der Maus innerhalb der Kreisfläche ist kein Eindringen von Mausereignissen möglich.

An diesem Punkt wird das obige Urteil gefällt. Führen Sie das Programm aus, klicken Sie mit der Maus in die vier Ecken des Quadrats, und das Mausereignis hat einen Penetrationseffekt.

Dies ist das Ende dieses Artikels über die Verwendung von Electron zum Durchklicken des transparenten Bereichs eines unregelmäßigen Fensters. Weitere Informationen zum Durchklicken mit Electron finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!