Shikong/scrcpy-mask
1
0
Fork 0
mirror of https://github.com/AkiChase/scrcpy-mask synced 2025-02-23 23:42:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(KeyBoard): add mouse event listener

Browse Source
This commit is contained in:
AkiChase 2024-04-16 22:50:21 +08:00
parent 3088ebe5de
commit b332c60eea
3 changed files with 34 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Mask.vue
View File

@ -83,12 +83,12 @@ function toStartServer() {
<style scoped lang="scss"> <style scoped lang="scss">
.mask { .mask {
background-color: rgba(255, 255, 255, 0.2); background-color: transparent;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
} }
.notice { .notice {
background-color: rgba(255, 255, 255, 0.2); background-color: rgba(0, 0, 0, 0.5);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

27
src/components/keyboard/KeyBoard.vue
View File

@ -34,19 +34,41 @@ function keyupHandler(event: KeyboardEvent) {
} else keyboardCodeList.value.push(event.code); } else keyboardCodeList.value.push(event.code);
} }
function mousedownHandler(event: MouseEvent) {
event.preventDefault();
const key = `M${event.button}`;
if (keyboardCodeList.value.length > 10) {
keyboardCodeList.value.shift();
keyboardCodeList.value.push(key);
} else keyboardCodeList.value.push(key);
}
function mouseupHandler(event: MouseEvent) {
event.preventDefault();
const key = `M${event.button}`;
if (keyboardCodeList.value.length > 10) {
keyboardCodeList.value.shift();
keyboardCodeList.value.push(key);
} else keyboardCodeList.value.push(key);
}
onActivated(() => { onActivated(() => {
keyboardElement.value?.addEventListener("mousemove", mousemoveHandler); keyboardElement.value?.addEventListener("mousemove", mousemoveHandler);
keyboardElement.value?.addEventListener("mousedown", mousedownHandler);
keyboardElement.value?.addEventListener("mouseup", mouseupHandler);
document.addEventListener("keyup", keyupHandler); document.addEventListener("keyup", keyupHandler);
}); });
onBeforeRouteLeave(() => { onBeforeRouteLeave(() => {
keyboardElement.value?.removeEventListener("mousemove", mousemoveHandler); keyboardElement.value?.removeEventListener("mousemove", mousemoveHandler);
keyboardElement.value?.removeEventListener("mousedown", mousedownHandler);
keyboardElement.value?.removeEventListener("mouseup", mouseupHandler);
document.removeEventListener("keyup", keyupHandler); document.removeEventListener("keyup", keyupHandler);
}); });
</script> </script>
<template> <template>
<div ref="keyboardElement" class="keyboard"> <div ref="keyboardElement" class="keyboard" @contextmenu.prevent>
此处最好用其他颜色的蒙版，和右侧的按键列表区同色 此处最好用其他颜色的蒙版，和右侧的按键列表区同色
<div>{{ mouseX }}, {{ mouseY }}</div> <div>{{ mouseX }}, {{ mouseY }}</div>
<div v-for="code in keyboardCodeList"> <div v-for="code in keyboardCodeList">
@ -57,7 +79,8 @@ onBeforeRouteLeave(() => {
<style scoped> <style scoped>
.keyboard { .keyboard {
background-color: rgba(255, 255, 255, 0.5); color: var(--light-color);
background-color: rgba(0, 0, 0, 0.5);
overflow: hidden; overflow: hidden;
} }
</style> </style>

15
src/styles.css
View File

@ -1,12 +1,12 @@
:root { :root {
--primary-color: #63E2B7; --primary-color: #63e2b7;
--primary-hover-color: #7FE7C4; --primary-hover-color: #7fe7c4;
--primary-pressed-color: #5ACEA7; --primary-pressed-color: #5acea7;
--bg-color: #101014;
--content-bg-color: #18181C;
--content-hl-color: #26262A;
--light-color: rgba(255, 255, 255, 0.9); --bg-color: #101014;
--content-bg-color: #18181c;
--content-hl-color: #26262a;
--light-color: rgba(255, 255, 255, 0.82);
--gray-color: #6b6e76; --gray-color: #6b6e76;
--red-color: #fc5185; --red-color: #fc5185;
--red-pressed-color: #f4336d; --red-pressed-color: #f4336d;
@ -24,4 +24,3 @@ div#app {
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
} }