electron 無(wú)邊框窗口拖拽移動(dòng)問(wèn)題及解決辦法
electron 無(wú)邊框窗口拖拽移動(dòng)問(wèn)題記錄及解決辦法
在做一款uTools的插件,懸浮文本
窗口是沒(méi)有標(biāo)題欄的,所以需要找一個(gè)地方可以拖動(dòng)移動(dòng)位置
就開(kāi)始了接下來(lái)的踩坑記錄
項(xiàng)目結(jié)構(gòu)
只是一個(gè)簡(jiǎn)單的容器元素,一個(gè)多行文本框
容器元素加一個(gè)內(nèi)邊距,然后這個(gè)內(nèi)邊距區(qū)域就是我理想的可拖動(dòng)位置
<body>
<div id="container">
<textarea id="content" spellcheck="false"></textarea>
</div>
</body>實(shí)現(xiàn)流程
webkit-app-region
首個(gè)版本,我采用CSS很簡(jiǎn)單便實(shí)現(xiàn)了
當(dāng)時(shí)是用 Mac 開(kāi)發(fā)測(cè)試的,一切運(yùn)行良好
#container {
-webkit-app-region: drag;
padding: 10px;
cursor: move;
}隔天到 Win 上看效果
發(fā)現(xiàn)拖動(dòng)雖然正常,但是光標(biāo)樣式?jīng)]有了
鼠標(biāo)放在邊框位置不會(huì)變成移動(dòng)的光標(biāo)
經(jīng)查閱,設(shè)置了-webkit-app-region: drag;的元素,不會(huì)在響應(yīng)鼠標(biāo)事件了(mac上測(cè)試的時(shí)候正常的)
so,需要繼續(xù)改了
鼠標(biāo)事件
沒(méi)有簡(jiǎn)便辦法了,就只好自己寫(xiě)個(gè)鼠標(biāo)拖拽事件了
按下記錄下鼠標(biāo)相對(duì)于窗口的位置
鼠標(biāo)移動(dòng)后計(jì)算出窗口新的位置
窗口新位置=窗口當(dāng)前位置+鼠標(biāo)新的相對(duì)位置-鼠標(biāo)原來(lái)的相對(duì)位置
主進(jìn)程 (因?yàn)槭?code>uTools插件開(kāi)發(fā),和electron原始代碼的監(jiān)聽(tīng)不一樣)
ipcRenderer.on('move', (event, x, y) => {
ubWindow.setPosition(x, y)
})
// 初始化
ipcRenderer.sendTo(ubWindow.webContents.id, 'init')webPreferences的preload
const { ipcRenderer } = require('electron')
let winId
ipcRenderer.on('init', (event) => {
winId = event.senderId
window.init()
})
window.move = (x, y) => {
ipcRenderer.sendTo(winId,'move',x, y)
}頁(yè)面js
let moveIng = false
let startX = 0
let startY = 0
const move = (event) => {
if (!moveIng) return
const x = window.screenX + event.clientX - startX
const y = window.screenY + event.clientY - startY
window.move(x, y)
}
//綁定拖拽移動(dòng)事件
document.addEventListener('mousedown', (event) => {
if (event.button === 0 && event.target.tagName !== 'TEXTAREA') {
moveIng = true
startX = event.clientX
startY = event.clientY
document.addEventListener('mousemove', move)
}
})
document.addEventListener('mouseup', (event) => {
if (!moveIng) return
document.removeEventListener('mousemove', move)
moveIng = false
})測(cè)試,Win和Mac拖拽正常,光標(biāo)正常
But,換電腦在測(cè)試時(shí),發(fā)現(xiàn)某個(gè)Win的電腦移動(dòng)窗口時(shí),窗口尺寸會(huì)不停的變大
甚至只要鼠標(biāo)按在窗口上,尺寸都可能會(huì)改變
so,繼續(xù)改吧
縮放
經(jīng)過(guò)多次測(cè)試和查閱
最終把問(wèn)題定位在Win的縮放與布局
該選項(xiàng)如果是100%測(cè)試一點(diǎn)問(wèn)題都沒(méi)有
如果每次拖動(dòng)尺寸會(huì)發(fā)生改變,那我們就不再使用setPosition改用setBounds
每次調(diào)整位置時(shí)直接將尺寸也傳遞進(jìn)去,修改下代碼
主進(jìn)程
ipcRenderer.on('moveBounds', (event, x, y, width, height) => {
if (event.senderId == ubWindow.webContents.id) {
let newBounds = {
x: parseInt(x),
y: parseInt(y),
width: parseInt(width),
height: parseInt(height),
}
ubWindow.setBounds(newBounds)
}
})
// 初始化
ipcRenderer.sendTo(ubWindow.webContents.id, 'init')webPreferences的preload
const { ipcRenderer } = require('electron')
let winId
ipcRenderer.on('init', (event) => {
winId = event.senderId
window.init()
})
window.moveBounds = (x, y, width, height) => {
ipcRenderer.sendTo(winId, 'moveBounds', x, y, width, height);
}頁(yè)面js
let moveIng = false
let startX = 0
let startY = 0
let lastWidth = 0
let lastHeight = 0
const move = (event) => {
if (!moveIng) return
const x = window.screenX + event.clientX - startX
const y = window.screenY + event.clientY - startY
window.moveBounds(parseInt(x), parseInt(y), lastWidth, lastHeight)
}
//綁定拖拽移動(dòng)事件
document.addEventListener('mousedown', (event) => {
if (event.button === 0 && event.target.tagName !== 'TEXTAREA') {
moveIng = true
startX = parseInt(event.clientX)
startY = parseInt(event.clientY)
lastWidth = parseInt(window.outerWidth)
lastHeight = parseInt(window.outerHeight)
document.addEventListener('mousemove', move)
}
})
document.addEventListener('mouseup', (event) => {
if (!moveIng) return
document.removeEventListener('mousemove', move)
moveIng = false
})
調(diào)整后Win和Mac測(cè)試均正常
但如果拖動(dòng)過(guò)快,仔細(xì)觀察,窗口有時(shí)會(huì)閃爍
而且文本框中的內(nèi)容有時(shí)會(huì)變成選中狀態(tài)
嗯~ o(*￣▽￣*)o 暫時(shí)就醬吧
有大神知道更好解決方案的話可以貼出來(lái)觀摩下
補(bǔ)充：
Electron無(wú)邊框自定義窗口拖動(dòng)
解決方案
<header class="absolute" style="left:0px;top:0px;width:100%;height:48px;background-color:red;padding:0px;margin:0px;">
<div class="absolute" style="left:0px;top:0px;width:100%;height:100%;-webkit-app-region:drag">
<button style="width:200px;height:100px;-webkit-app-region:no-drag;" @click="console.log('abc')">點(diǎn)我</button>
</div>
</header>首先外部可拖拽區(qū)域設(shè)置：-webkit-app-region:drag;
如果想要里面的按鈕可點(diǎn)擊，僅需要設(shè)置按鈕不可拖拽就行：-webkit-app-region:drag;
到此這篇關(guān)于electron 無(wú)邊框窗口拖拽移動(dòng)問(wèn)題記錄及解決辦法的文章就介紹到這了,更多相關(guān)electron 無(wú)邊框窗口拖拽移動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JavaScript邏輯And運(yùn)算符，在JavaScript中，邏輯 AND 運(yùn)算符用雙和號(hào)（&&）表示2015-12-12
這篇文章主要介紹了JavaScript閉包，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
nuxt+axios實(shí)現(xiàn)打包后動(dòng)態(tài)修改請(qǐng)求地址的方法
這篇文章主要介紹了nuxt+axios實(shí)現(xiàn)打包后動(dòng)態(tài)修改請(qǐng)求地址的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
2014最熱門(mén)的JavaScript代碼高亮插件推薦
本文給大家推薦今年最流行最熱門(mén)的7款JavaScript代碼高亮插件，各有優(yōu)缺點(diǎn)，大家根據(jù)下面的介紹，選擇最適合自己的一款吧。2014-11-11
根據(jù)服務(wù)器時(shí)間作為起始，顯示時(shí)鐘的小程序
一般的網(wǎng)頁(yè)都有這種功能：在頁(yè)面上動(dòng)態(tài)顯示當(dāng)前時(shí)間，這個(gè)的實(shí)現(xiàn)也很簡(jiǎn)單，基本上一行代碼就實(shí)現(xiàn)了2009-06-06
Echarts圖表移動(dòng)端橫屏進(jìn)入退出的實(shí)現(xiàn)
一文教你如何像導(dǎo)入JS模塊一樣導(dǎo)入CSS
原生js實(shí)現(xiàn)jquery函數(shù)animate()動(dòng)畫(huà)效果的簡(jiǎn)單實(shí)例