github/h5-Dooring
1
0
Fork 0
mirror of https://github.com/MrXujiang/h5-Dooring.git synced 2025-12-10 16:52:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
ggchinazhangwei 2025-04-09 13:59:57 +08:00
parent 9a498cd9f0
commit 81b9f69953
2 changed files with 0 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/commonCa/index.less
View File

@ -1,12 +0,0 @@
.calibration {
width: calc(200% - 50px);
height: 200%;
position: relative;
white-space: nowrap;
pointer-events: none;
user-select: none;
:global(.calibrationNumber) {
font-size: 12px;
color: #888;
}
}

123
src/components/commonCa/index.tsx
View File

@ -1,123 +0,0 @@
import React, { useState, useEffect, useRef, useCallback } from "react";
import styles from "./index.less";
export interface calibrationTypes {
width: number;
height: number;
}
export type CalibrationTypes = {
direction: "up" | "left" | "right";
multiple: number;
id: string;
};
export default function Calibration(props: CalibrationTypes) {
const { direction, multiple } = props;
const [calibrationLength, setCalibration] = useState<calibrationTypes>({
width: 0,
height: 0
});
const calibrationRef = useRef<HTMLDivElement>(null);
const generateElement = useCallback(
(item?: boolean, num?: number) => {
if (calibrationRef.current) {
let createSpan = document.createElement("div");
createSpan.className = "calibrationLine";
createSpan.style.backgroundColor = "#ccc";
calibrationRef.current.style.display = "flex";
calibrationRef.current.style.justifyContent = "space-between";
if (direction === "up") {
calibrationRef.current.style.marginLeft = "50px";
createSpan.style.width = "1px";
createSpan.style.height = "6px";
createSpan.style.display = "inline-block";
} else {
calibrationRef.current.style.flexDirection = "column";
createSpan.style.height = "1px";
createSpan.style.width = "6px";
}
if (item) {
let createSpanContent = document.createElement("span");
if (direction === "up") {
createSpan.style.height = "12px";
createSpanContent.style.transform = "translate3d(-4px, 20px, 0px)";
createSpan.style.transform = "translateY(0px)";
} else {
createSpan.style.width = "12px";
createSpanContent.style.paddingLeft = "20px";
}
createSpanContent.style.display = "block";
createSpanContent.className = "calibrationNumber";
createSpanContent.innerHTML = num! * 5 + "";
createSpan.appendChild(createSpanContent);
}
calibrationRef.current.appendChild(createSpan);
}
},
[direction]
);
useEffect(() => {
if (calibrationRef.current) {
let calibration = calibrationRef.current.getBoundingClientRect();
setCalibration({ width: calibration.width, height: calibration.height });
let length = direction === "up" ? calibration.width : calibration.height;
for (let i = 0; i < length / 5; i++) {
if (i % 10 === 0) {
generateElement(true, i);
} else {
generateElement();
}
}
}
}, [direction, generateElement]);
useEffect(() => {
if (calibrationRef.current) {
let width = calibrationLength.width
? calibrationLength.width
: calibrationRef.current.getBoundingClientRect().width;
let height = calibrationLength.height
? calibrationLength.height
: calibrationRef.current.getBoundingClientRect().height;
let arr = [
...Array.from(
calibrationRef.current.querySelectorAll(".calibrationLine")
)
];
if (arr.length) {
if (direction === "up") {
calibrationRef.current.style.width =
parseFloat(multiple.toFixed(1)) * width + "px";
arr.forEach(el => {
let dom = [
...Array.from(el.querySelectorAll(".calibrationNumber"))
][0] as HTMLElement;
if (dom) {
dom.style.transform = `translate3d(-4px, 16px, 0px) scale(${(
multiple + 0.1
).toFixed(1)})`;
}
});
} else {
calibrationRef.current.style.height =
parseFloat(multiple.toFixed(1)) * height + "px";
arr.forEach(el => {
let dom = [
...Array.from(el.querySelectorAll(".calibrationNumber"))
][0] as HTMLElement;
if (dom) {
dom.style.transform = `translate3d(-4px, -8px, 0px) scale(${(
multiple + 0.1
).toFixed(1)})`;
}
});
}
}
}
}, [calibrationLength.height, calibrationLength.width, direction, multiple]);
return <div className={styles.calibration} ref={calibrationRef}></div>;
}