-
+
@@ -78,16 +79,67 @@
姿态控制
-
左手
-
@@ -102,7 +154,7 @@
语音对话
-
+
@@ -127,107 +179,18 @@ const speed = ref(0.8)
const activeRoboticArm = ref(1)
-const coordinateSystem = ref(null); // 用于获取容器元素
-const buttonPositions = ref([]); // 存储按钮的动态位置
-const buttonDirections = [
- { target: "z_plus", direction: "top", label: "Z+" }, // left
- { target: "x_plus", direction: "right", label: "X+" }, // bottom
- { target: "y_minus", direction: "bottom", label: "Y-" },
- { target: "z_minus", direction: "bottom", label: "Z-" },
- { target: "x_minus", direction: "left", label: "X-" },
- { target: "y_plus", direction: "left", label: "Y+" }, // right
-];
-
-// 默认图片尺寸
-const ORIGINAL_IMAGE_WIDTH = 1025;
-const ORIGINAL_IMAGE_HEIGHT = 817;
const handlerController = (value) => {
if (value === 2 && [1, 3].includes(activeRoboticArm.value)) {
- updateButtonPositions()
+
}
}
const handlerArm = (value) => {
if ([1, 3].includes(value)) {
- updateButtonPositions()
}
}
-const updateButtonPositions = () => {
- if (coordinateSystem.value) {
- const containerRect = coordinateSystem.value.getBoundingClientRect();
- const containerWidth = containerRect.width;
- const containerHeight = containerRect.height;
-
- // 计算图片的实际显示尺寸（考虑 background-size: contain）
- const imageAspectRatio = ORIGINAL_IMAGE_WIDTH / ORIGINAL_IMAGE_HEIGHT;
- const containerAspectRatio = containerWidth / containerHeight;
-
- let imageWidth, imageHeight, imageLeft, imageTop;
- if (containerAspectRatio > imageAspectRatio) {
- imageHeight = containerHeight;
- imageWidth = imageHeight * imageAspectRatio;
- imageLeft = (containerWidth - imageWidth) / 2;
- imageTop = 0;
- } else {
- imageWidth = containerWidth;
- imageHeight = imageWidth / imageAspectRatio;
- imageLeft = 0;
- imageTop = (containerHeight - imageHeight) / 2;
- }
-
- // 计算图片中心坐标
- const centerX = imageLeft + imageWidth / 2;
- const centerY = imageTop + imageHeight / 2;
-
- // 计算圆的半径（根据图片尺寸的较小值比例确定，可调整比例系数）
- const radiusScale = 0.85; // 半径系数，0-1之间，越大半径越大
- const radius = Math.min(imageWidth, imageHeight) * radiusScale / 2;
-
- // 定义方位对应的角度（弧度制），top为0度，顺时针增加
- const directionAngles = {
- "top": 0,
- "top-right": Math.PI / 6, // 30度
- "right": Math.PI / 3, // 60度
- "bottom-right": Math.PI / 2, // 90度
- "bottom": 2 * Math.PI / 3, // 120度
- "bottom-left": 5 * Math.PI / 6, // 150度
- "left": Math.PI, // 180度
- "top-left": 7 * Math.PI / 6, // 210度
- };
-
- // 调整角度以均匀分布12个按钮（360/12=30度，即Math.PI/6弧度）
- const totalButtons = buttonDirections.length;
- const angleStep = 2 * Math.PI / totalButtons;
-
- // 更新按钮位置
- buttonPositions.value = buttonDirections.map((btn, index) => {
- // 计算每个按钮的角度（从top开始顺时针排列）
- const angle = index * angleStep;
- // 计算按钮的坐标
- const x = centerX + radius * Math.sin(angle);
- const y = centerY - radius * Math.cos(angle);
- return {
- ...btn,
- left: x,
- top: y,
- };
- });
-
- console.log('buttonPositions', buttonPositions.value)
- }
-};
-
-
-onMounted(() => {
- // 监听窗口大小变化，更新按钮位置
- window.addEventListener("resize", updateButtonPositions);
-});
-
-onUnmounted(() => {
- window.removeEventListener("resize", updateButtonPositions);
-});