add glass
This commit is contained in:
parent
822732742d
commit
c6f5bc7d80
@ -6,7 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue</title>
|
||||
</head>
|
||||
<body>
|
||||
<body style="position: relative;">
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
|
@ -8,6 +8,14 @@ import AppHeader from "./components/Base/Header.vue";
|
||||
import Tools from "./components/Tools.vue";
|
||||
import FullEqList from "./FullEqList.vue";
|
||||
import { connect0 } from "./utils/useWebsocket";
|
||||
import Glass from "./utils/glass";
|
||||
|
||||
//
|
||||
const gls = new Glass("a2m1");
|
||||
setTimeout(() => {
|
||||
gls.move();
|
||||
}, 1000);
|
||||
//
|
||||
|
||||
const mainContainer = ref(null);
|
||||
const props = defineProps({
|
||||
@ -53,7 +61,7 @@ function handleResolutionChange(width, height) {
|
||||
<template>
|
||||
<div id="main-container" ref="mainContainer" class="main-container">
|
||||
<div id="main-container__fulleq">
|
||||
<FullEqList />
|
||||
<FullEqList v-if="0" />
|
||||
</div>
|
||||
<DatetimeTool />
|
||||
<Tools @change-resolution="handleResolutionChange" />
|
||||
|
BIN
src/assets/glass.png
Normal file
BIN
src/assets/glass.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.2 KiB |
101
src/utils/glass.js
Normal file
101
src/utils/glass.js
Normal file
@ -0,0 +1,101 @@
|
||||
import glassImgSrc from "../assets/glass.png";
|
||||
|
||||
const positionMapping = {
|
||||
A1: {
|
||||
M1: [0, 0, 60, 400], // x, y, angle, distance(px)
|
||||
M2: [0, 0, 60, 400],
|
||||
M105: [],
|
||||
M205: [],
|
||||
},
|
||||
A2: {
|
||||
M1: [740, 380, -24, 100],
|
||||
M2: {
|
||||
// 分段
|
||||
0: [0, 0, 60, 400],
|
||||
1: [0, 0, 60, 400],
|
||||
2: [0, 0, 60, 400],
|
||||
},
|
||||
},
|
||||
A3: {
|
||||
M1: [],
|
||||
},
|
||||
B1: {
|
||||
M1: [],
|
||||
M2: [],
|
||||
M3: [],
|
||||
M105s: [],
|
||||
M205: [],
|
||||
M305: [],
|
||||
},
|
||||
B2: {
|
||||
M1: [],
|
||||
M2: [],
|
||||
M3: [],
|
||||
},
|
||||
B3: {
|
||||
M1: [],
|
||||
},
|
||||
C1: {
|
||||
M1: [],
|
||||
M2: [],
|
||||
M104: [],
|
||||
M204: [],
|
||||
},
|
||||
C2: {
|
||||
M1: { 0: [], 1: [] },
|
||||
M2: [],
|
||||
},
|
||||
C3: {
|
||||
M1: [],
|
||||
},
|
||||
};
|
||||
|
||||
function calcPosition(positionString = "") {
|
||||
const lineId = positionString.slice(0, 2).toUpperCase(); // A1 B1 C1
|
||||
const subLineId = positionString.slice(2).toUpperCase(); // M1 M206 M3
|
||||
|
||||
return {
|
||||
top: positionMapping[lineId][subLineId][0],
|
||||
left: positionMapping[lineId][subLineId][1],
|
||||
angle: positionMapping[lineId][subLineId][2],
|
||||
distance: positionMapping[lineId][subLineId][3],
|
||||
};
|
||||
}
|
||||
|
||||
export default class Glass {
|
||||
el = null;
|
||||
distance = 100;
|
||||
visibleOnScreen = false;
|
||||
|
||||
constructor(positionStr) {
|
||||
const { left, top, angle, distance } = calcPosition(positionStr);
|
||||
// this.el = document.createElement("img");
|
||||
// this.el.src = glassImgSrc;
|
||||
this.el = document.createElement("div");
|
||||
this.el.style.background = "#f00";
|
||||
this.el.style.position = "absolute";
|
||||
this.el.style.top = `${top}px` || "740px";
|
||||
this.el.style.left = `${left}px` || "380px";
|
||||
this.distance = distance || 100;
|
||||
// this.el.style.border = "3px solid red";
|
||||
// this.el.style.display = "none";
|
||||
this.el.style.width = "18px";
|
||||
this.el.style.height = "18px";
|
||||
this.el.style.transformOrigin = "center";
|
||||
this.el.style.transition = "all 3s linear";
|
||||
this.el.style.zIndex = "9999";
|
||||
this.el.style.pointerEvents = "none";
|
||||
this.el.style.transform = `rotate(${angle}deg) skew(8deg)`;
|
||||
// debugger;
|
||||
document.body.appendChild(this.el);
|
||||
}
|
||||
|
||||
get visible() {
|
||||
return this.visibleOnScreen;
|
||||
}
|
||||
|
||||
move() {
|
||||
const getTranslate = (d) => `${d}px ${-1 * Math.floor(Math.cos(24) * d)}px`;
|
||||
this.el.style.translate = getTranslate(this.distance);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user