Shulou(Shulou.com)06/03 Report--

Electron clicks through the transparent area operation method of irregular forms. In view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Implement an irregular form

Here we implement a circular form, and forms with other shapes are similar to this method.

First, change the height (height) and width (width) values of the window to the same value to make the window a square.

Second, set the transparent of the window to true, so that the window is still square, but as long as we control the shape of the Dom element in the content area, we can make the window look like an irregular shape.

Irregular windows often require custom borders and title bars, so frame is also set to false.

In addition, transparent windows are not resizable. So set the resizable property to false.

After the window is displayed, in order to prevent double-clicking the draggable area of the window from triggering the maximize event, we also set the maximizable property to false.

The code to create the window is as follows:

Win = new BrowserWindow ({width: 380, height: 380, transparent: true, frame: false, resizable: false, maximizable: false, / /...})

Next, modify the style so that the Dom element of the content area appears in a circle:

Html,body {margin: 0px; padding: 0px; pointer-events: none;} # app {box-sizing: border-box; width: 380px; height: 380px; border-radius: 190px; border: 1px solid green; background: # fff; overflow: hidden; pointer-events: auto;}

In the above style code, the # app element is set to a circle through the border-radius style. Border-radius is responsible for defining the fillet style of an element, and if the fillet is large enough, the entire DIV becomes a circle.

Pointer-events style, which will be explained later.

The resulting window interface is shown in figure 5-7:

If you know a little bit about CSS, you will know that in addition to circles, you can also control the window into any other shape through the CSS style.

Click to penetrate the transparent area

There is a slight problem with the above application. Although the window looks round, it is actually a square window, except that the four corners of the square are transparent, so it looks like a round window.

When I click on the text file in the ① area in the image below, the mouse click event still occurs in this window, not on that file.

As developers, we know the truth, but as users, it's weird. In order to achieve a better user experience, we need to let the mouse click in these four areas, the click action can penetrate this window and fall on the content at the back of the window.

The Electron official document makes it clear that "you can't click through transparent areas", which doesn't bother us. There is a small trick to solve this problem.

First, you need to use the setIgnoreMouseEvents method of the window object, which causes the window to ignore all mouse events within the window, and all mouse events that occur in this window will be passed to the content behind the window.

If the forward parameter is passed when the method is called, such as:

SetIgnoreMouseEvents (true, {forward: true})

Only the click event will penetrate the window, and the mouse movement event will still be triggered.

Based on this, we execute the following code on the page:

Const remote = require ("electron"). Remote; let win = remote.getCurrentWindow (); window.addEventListener ("mousemove", event = > {let flag = event.target = document.documentElement; if (flag) {win.setIgnoreMouseEvents (true, {forward: true});} else {win.setIgnoreMouseEvents (false);}}); win.setIgnoreMouseEvents (true, {forward: true})

Note that this is the experimental code, so the remote module is used. I have a detailed description of some questions about the remote module in "Why did the Electron team kill the remote module?"

In the above code, the window object is set to listen for mousemove events, and mouse events are not allowed to penetrate when the mouse moves into the circular content area of the window. When the mouse moves into the transparent area, mouse event penetration is allowed.

Then we add a style for the html,body element: pointer-events: none, and a style for the # app element pointer-events: auto.

Once pointer-events: none is set, its flagged elements will never become the target of mouse events.

Pointer-events: auto is set for the child element # app, indicating that the child element # app can still be the target of the mouse event.

In other words, except that mouse events can be received in the circular area, other parts will no longer receive mouse events.

When the mouse moves outside the circular area, the mousemove event of the window object is triggered, and the event.target is the document.documentElement object (this event is not triggered on the html or body element, but on the window object, and document.documentElement is the root element in the DOM tree, that is, the element represented by the html node).

At this point, the judgment in the above code holds that when the mouse moves over the four areas mentioned above, the mouse event is allowed to penetrate. When the mouse moves over a circular area, the mouse event is not allowed to penetrate.

At this point, the judgment mentioned above is established, the program is run, the mouse is clicked in the square corner area, and the mouse event has a penetration effect.

This is the answer to the question about how Electron clicks through the transparent area of irregular forms. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.