Electron创建圆形的不规则窗口原创

Transparent background color。那么他们具体在这个使用中，哪些特。性能，然后我们接下来通过创建一个圆形的。一个。呃，窗口来了解他的这个。嗯，创建的这个原理。其实这里，呃，我现在先不说这个原理的实现，大家来看一下这个。效果。呃，我们现在通过设定了这个。呃，Transparent的窗口属性是true，就是说允许他进行一个。呃，透传，或者可以理解成透视。然后ground。Background color呢是进行了一个页面窗口的背景色的一个。呃，就是展示，然后咱们这里是进行了一个。相当于透明色，就是说大家可以在以后创建的时候呢，它作为一个模板，然后来进行一些这个自定义窗口的创建。

好了，我们先不进行过多的解释，然后大家看一下现象，看一下效果。OK。我们知道运行命令n PM start就是启动这个项目。这时候大家发现诶。一个圆形的窗口出现了。同时呢，它还这个窗口还是允许拖动的，但是如果细心的话，大家会发现其实。这个原型。的图标是在一个。窗体里面。进行展示的，而事实上它有一个隐形的边框。不知道。可能我在拖动这个窗口的时候，大家可以看到它有一个隐形的边框。

然后静态的时候可能大家不会太注意。就是说呃，视觉上第一感觉，感觉就是一个透明的啊，或者说就是一个圆形的窗口，然后它左上角的红绿灯，然后暴露了他。OK，我们现在关掉这个窗口，然后先把这个红绿灯去掉，然后让它更像是一个。呃。圆形的窗口OK，我们设置frame，然后让它的那个边框消失，那么现在我们再进行这一行避令，大家可以发现，OK，这就是完全的一个圆形的窗口，是不是很神奇？OK。另外呢，这里需要大家注意的一点，就是说在进行窗口创建的时候。呃，因为我们在就是进行了就是transparent属性的设置，然后是处，那么这个时候呢，我们的鼠标其实是不能够。

对于这个窗体进行拖拽的，然后怎么实现了它的一个拖拽呢？啊，其实我们在设置的时候需要。在。上课的实现，这里就是说。嗯。在爆点的属性里，Style设置成了一个web kitt。Drag。就是说在这个区域内是可以进行拖拽的。只有这样，然后我们才可以进行这个窗口的拖拽。而且我们还可以注意到，就是说事实上如果这个窗体我们只是一个圆形的话。那么理论上我的。鼠标只有点在这个圆上面才能进行拖拽，对吧，但事实。你们会发现我在这个床圆形的左上角其实也可以进行拖拽，这说明一个什么问题呢？就是说明其实这个透明的空白的区域，其实也属于这个。

窗体，大家看到的这个只不过是一个窗体里面的一个圆形。呃，元素。而其他的地方是进行了透传。所以给大家的感觉它是一个。呃，圆形窗口。这里呢，也无意中就点出了这个不规则图形创建的一个原理，就是说。我们创建了一个。透明的窗体，然后在这个窗体里面实现了一些任意的图形，那么这个时候给大家的感觉就是。它整个窗体就是一个不规则。就好比现在看到的，大家认为这是一个圆形的窗口。好，呃，我们接下来看一下这个代码，然后看一下它是怎么实现的。然后我们其实是在这个。

呃，MJS的主窗口。Window进行。呃，页面加载load file的时候，加载了index.html的这个文件，然后这个文件里面我们实现了。呃。这里先。呃，说这个圆形。的实现。然后。同时呢，它的上面是对于一个。新型图标的一个实现。