大佬教程收集整理的这篇文章主要介绍了electron无边框窗口的拖拽问题,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
继续玩耍electron,当用到无边框窗口时,原本有的拖拽成了一个问题。
当new BrowserWindow时,设置了frame为false时,就能出现无边框的electron了,但是问题是如何拖动呢?
通过给body增加-webkit-app-region属性的方式,如下
body { font-size: 10px; height: 100%; font-family: 'monaco'; -webkit-app-region: drag; }
此时,鼠标在整个界面上都可以拖动了。
那么问题又来了,此时发现,鼠标的点击事件啥的都失灵了。。
还有,双击放大的这个功能本来是任务栏上的,现在直接在body上双击下,也有了这个功能。
实际上我们可以计算鼠标的位置来给窗口重新设置位置,删除前面的css样式。
注:electron+React下通信的问题请看后面的文章。
大概代码是这样的:
let dragging = false, // 表示是否在拖拽中 mouseX = 0, // 表示鼠标x轴位置 mouseY = 0, // 表示鼠标y轴位置 mainWindow = window.electron.remote.getCurrentWindow(); window.addEventListener('Mousedown', function(E) { // 提前获得位置 mouseX = e.pageX; mouseY = e.pageY; window.addEventListener('Mousemove', mousemoveFn); }); window.addEventListener('Mouseup', function(E) { window.removeEventListener('Mousemove', mousemoveFn); }); function mousemoveFn(E) { let moveX = e.pageX - mouseX, moveY = e.pageY - mouseY, pos = mainWindow.getPosition(); // 当前窗口位置 // 重新计算 pos[0] = pos[0] + moveX; pos[1] = pos[1] + moveY; mainWindow.setPosition(pos[0], pos[1], truE); // 重新设置窗口的位置 mouseX = e.pageX; mouseY = e.pageY; }
我们通过对鼠标事件的监听以及计算,再重新设置给窗口,使得窗口与鼠标同步。
实际效果并不理想,跟随比较慢且会来回闪烁。
我们可以在title上给定一个类似于导航栏一样的长条,这块区域内设置-webkit-app-region: drag;在配置自己加上最大化,最小化,关闭事件,最大的简化并个性化自己的程序。
可以查看下我的 https://github.com/2fps/never-forget 这个项目,就是设置了个可拖拽的title区域,欢迎star。
以上是大佬教程为你收集整理的electron无边框窗口的拖拽问题全部内容,希望文章能够帮你解决electron无边框窗口的拖拽问题所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。