Electronで不規則な形状の透明部分をクリックする実装

不規則なフォームの実装

ここでは円形フォームを実装します。他の形状のフォームの実装もこのメソッドと同様です。

まず、ウィンドウの高さと幅を同じ値に変更して、ウィンドウを正方形にします。

次に、ウィンドウの transparent プロパティを true に設定します。この設定後、ウィンドウは正方形のままですが、コンテンツ領域の Dom 要素の形状を制御する限り、ウィンドウを不規則な形状に見せることができます。

不規則なウィンドウではカスタムの境界線とタイトル バーが必要になることが多いため、frame も false に設定されます。

さらに、透明なウィンドウはサイズ変更できません。したがって、resizable プロパティを false に設定します。

ウィンドウが表示された後、ウィンドウのドラッグ可能な領域をダブルクリックして最大化イベントがトリガーされるのを防ぐために、maximizable プロパティも false に設定します。

ウィンドウを作成するための最終的なコードは次のとおりです。

win = 新しいブラウザウィンドウ({
        幅: 380,
        高さ: 380,
        透明: true、
        フレーム: false、
        サイズ変更可能: false、
        最大化可能: false、
        //...
})

次に、スタイルを変更して、コンテンツ領域の Dom 要素が円として表示されるようにします。

html、本文{ 
  マージン: 0px; 
  パディング: 0px; 
  ポインタイベント: なし;
}
＃アプリ {
 ボックスのサイズ: 境界線ボックス;
 幅: 380ピクセル; 
 高さ: 380ピクセル;
 境界線の半径: 190px;
 境界線: 1px 緑;
 背景: #fff;
 オーバーフロー: 非表示;
 ポインタイベント: 自動;
}

上記のスタイル コードでは、#app 要素は border-radius スタイルによって円に設定されています。 border-radius は、要素の丸い角のスタイルを定義します。丸い角が十分に大きい場合、DIV 全体が円になります。

ポインター イベント スタイルについては後で説明します。

最終的なウィンドウ インターフェイスを図 5-7 に示します。

CSS について少し知識があれば、円に加えて、CSS スタイルを通じてこのウィンドウを他の形状に制御できることが分かるでしょう。

透明な部分をクリックする

上記のアプリケーションには小さな問題があります。ウィンドウは丸く見えますが、実際は四角いウィンドウです。唯一の違いは、四角形の 4 つの角が透明なので、丸いウィンドウのように見えることです。

下の図の領域①のテキスト ファイルをクリックしても、このウィンドウでマウス クリック イベントが発生し、ファイルはクリックされません。

開発者としては、これがなぜ機能するのか理解できますが、ユーザーとしては奇妙に感じます。より優れたユーザー エクスペリエンスを実現するには、これらの 4 つの領域をクリックしたときに、マウスがウィンドウを貫通してウィンドウの背後にあるコンテンツに移動できるようにする必要があります。

公式の Electron ドキュメントには、「透明な領域をクリックすることはできません」と明記されていますが、これは問題ではありません。この問題を解決するちょっとしたコツがあります。

まず、ウィンドウ オブジェクトの setIgnoreMouseEvents メソッドを使用する必要があります。これにより、ウィンドウはウィンドウ内のすべてのマウス イベントを無視できるようになり、このウィンドウで発生するすべてのマウス イベントがこのウィンドウの背後にあるコンテンツに渡されます。

このメソッドを呼び出すときに forward パラメータが渡された場合、次のようになります。

setIgnoreMouseEvents(true, { forward: true }),

すると、クリック イベントのみがウィンドウを通過し、マウス移動イベントは引き続きトリガーされます。

これに基づいて、ページ内で次のコードを実行します。

const remote = require("electron").remote;
  win = remote.getCurrentWindow(); とします。
  window.addEventListener("mousemove", イベント => {
  flag = event.target === document.documentElement とします。
  if (フラグ){
     win.setIgnoreMouseEvents(true, { forward: true });
  } 
  それ以外 {
    win.setIgnoreMouseEvents(false);
  }
  });
  win.setIgnoreMouseEvents(true, { forward: true });

これは実験的なコードなので、リモート モジュールが使用されていることに注意してください。リモート モジュールに関するいくつかの問題については、「Electron チームがリモート モジュールを廃止したい理由」で詳しく説明しています。

上記のコードでは、ウィンドウ オブジェクトが mousemove イベントをリッスンするように設定されています。マウスがウィンドウの円形のコンテンツ領域に移動すると、マウス イベントは侵入できません。マウスが透明領域に移動すると、マウス イベントが通過できるようになります。

次に、html 要素と body 要素にスタイル point-events: none を追加し、#app 要素に point-events: auto を追加します。

point-events: none を設定すると、それがマークする要素はマウス イベントのターゲットにならなくなります。

子要素 #app に point-events: auto が設定されているため、子要素 #app は引き続きマウス イベントのターゲットになることができます。

つまり、円形の領域を除いて、他の部分はマウス イベントを受信しなくなります。

マウスが円形の領域外に移動すると、window オブジェクトの mousemove イベントがトリガーされ、event.target は document.documentElement オブジェクトになります (このイベントは html 要素や body 要素ではなく、window オブジェクトでトリガーされます。Document.documentElement は DOM ツリーのルート要素、つまり html ノードによって表される要素です)。

この時点で、上記コードでの判定が成立し、上記 4 つの領域でマウスが移動すると、マウス イベントによって侵入が許可されます。マウスが円形の領域内を移動すると、マウス イベントは侵入できなくなります。

この時点で、上記の判定が成立します。プログラムを実行し、四角形の四隅でマウスをクリックすると、マウスイベントに貫通効果が発生します。

Electronを使用して不規則なウィンドウの透明領域をクリックスルーする方法についての記事はこれで終わりです。Electronクリックスルーの詳細については、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。