yexuejc007/rubick
1
0
Fork 0
mirror of https://github.com/rubickCenter/rubick synced 2025-12-22 18:22:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

ref: 优化 取色和截屏

Browse Source
This commit is contained in:
muwoo
2021-07-16 16:10:19 +08:00
parent de6e33c126
commit d824f503e6
42 changed files with 564 additions and 2438 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
static/plugins/picker/index.html
View File

@@ -1,12 +1,114 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta charset="utf-8"/>
<title>Picker</title>
<link rel="stylesheet" href="./picker.css" />
<link rel="stylesheet" href="./picker.css"/>
<script defer src="./picker.js"></script>
</head>
<body>
<section id="picker"></section>
<div class="content">
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="center">
<div></div>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>

29
static/plugins/picker/picker.css
View File

@@ -1,17 +1,12 @@
* {
margin: 0;
padding: 0;
}
body {
background: transparent;
cursor: crosshair;
overflow: hidden;
}
#picker {
width: 100px;
height: 100px;
border-radius: 120px;
box-sizing: border-box;
}
html, body{ margin: 0; user-select: none; overflow: hidden;}
.content {width: 108px; height: 108px; background-color: #fff; border-radius: 5px; }
.content>div{ display: flex; }
.content>div>div{ width: 12px; height: 12px; box-sizing: border-box; border-right: 1px solid #999; border-bottom: 1px solid #999; }
.content>div:first-child>div{ border-top: 1px solid #999; }
.content>div>div:first-child { border-left: 1px solid #999; }
.content>div:first-child>div:first-child { border-top-left-radius: 4px; }
.content>div:first-child>div:last-child { border-top-right-radius: 4px; }
.content>div:last-child>div:first-child { border-bottom-left-radius: 4px; }
.content>div:last-child>div:last-child { border-bottom-right-radius: 4px; }
.center { position: relative; }
.center>div{ position: absolute; top: -2px; left: -2px; width: 100%; height: 100%; border: 2px solid #fff; box-shadow: 0 0 1px #212121; }

24
static/plugins/picker/picker.js
View File

@@ -1,9 +1,19 @@
const {ipcRenderer} = require("electron");
let colorDomBoxs = null;
const { ipcRenderer } = require("electron");
document.querySelector(
"#picker"
).style.border = `10px solid rgba(200, 200, 200, 0.3)`;
ipcRenderer.on("updatePicker", ((e, args) => {
if (!colorDomBoxs) {
colorDomBoxs = [];
document.querySelectorAll(".content>div").forEach((e => {
colorDomBoxs.push(e.querySelectorAll(":scope > div"))
}));
}
for (let i = 0; i < 9; i ++){
for (let j = 0; j < 9; j ++) {
colorDomBoxs[i][j].style.background = '#' + args[i][j]
}
}
}));
document.addEventListener(
"keydown",
@@ -12,7 +22,3 @@ document.addEventListener(
},
false
);
ipcRenderer.on("updatePicker", (event, color) => {
document.querySelector("#picker").style.border = `10px solid ${color}`;
});