-
+
diff --git a/src/assets/glass.png b/src/assets/glass.png
new file mode 100644
index 0000000..6e46365
Binary files /dev/null and b/src/assets/glass.png differ
diff --git a/src/utils/glass.js b/src/utils/glass.js
new file mode 100644
index 0000000..ee2ef3f
--- /dev/null
+++ b/src/utils/glass.js
@@ -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);
+ }
+}