vue项目使用css3实现摄像头八方向云台遥控器样式

1.效果图：

2.vue文件代码

1.js部分：

<script setup lang="ts">
import {reactive} from "vue";
import {Refresh, CaretLeft} from "@element-plus/icons-vue";

interface DirectionButton {
    label: any,
    key: string,
    value: number
}

const directionButton = reactive<DirectionButton[]>([
    {
        label: '上',
        key: 'up',
        value: 1
    },
    {
        label: '右上',
        key: 'up-right',
        value: 2
    },
    {
        label: '右',
        key: 'right',
        value: 3
    },
    {
        label: '右下',
        key: 'down-right',
        value: 4
    },
    {
        label: '下',
        key: 'down',
        value: 5
    },
    {
        label: '左下',
        key: 'down-left',
        value: 6
    },
    {
        label: '左',
        key: 'left',
        value: 7
    },
    {
        label: '左上',
        key: 'up-left',
        value: 8
    },
    {
        label: '中心',
        key: 'center',
        value: 9
    },
])
/**
 * @description 云台控制
 * @param btn {DirectionButton}
 */
const handleRegulate = (btn: DirectionButton) => {
    switch (btn.value) {
        case 1:
            console.log('上')
            break;
        case 2:
            console.log('右上')
            break;
        case 3:
            console.log('右')
            break;
        case 4:
            console.log('右下')
            break;
        case 5:
            console.log('下')
            break;
        case 6:
            console.log('左下')
            break;
        case 7:
            console.log('左')
            break;
        case 8:
            console.log('左上')
            break;
        case 9:
            console.log('复位')
            break;
    }
}
</script>

2.html部分：

<template>
  <div class="controller">
      <div v-for="btn in directionButton"
           :key="btn.key"
           :class="[btn.value!=9?'sector':'',btn.key]"
           :title="btn.label"
           @click="handleRegulate(btn)"
       >
          <el-icon>
              <CaretLeft></CaretLeft>
          </el-icon>
       </div>
  </div>
</template>

3.css/less/scss部分

.controller {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(22deg);
    box-shadow: var(--panel-head-box-shadow);
    border-radius: 50%;
    z-index: 9;

    .sector {
        width: 194px;
        height: 194px;
        background-color: var(--core-button-normal-bg-color);
        clip-path: polygon(50% 50%, 100% 50%, 100% 3%);
        border-radius: 50%;
        position: absolute;
        cursor: pointer;

        &:hover {
            background-color: var(--core-hover-color);
        }

        .el-icon {
            position: absolute;
            right: 20px;
            top: 63px;
            transform: rotate(-200deg);
        }
    }

    /* 各个方向的扇形按钮 */
    .up {
        transform: rotate(270deg);
    }

    .right {
        transform: rotate(0deg);

        .el-icon {
            transform: rotate(-202deg);
        }
    }

    .down-right {
        transform: rotate(45deg);
    }

    .down {
        transform: rotate(90deg);

        .el-icon {
            transform: rotate(-204deg);
        }
    }

    .down-left {
        transform: rotate(135deg);
    }

    .left {
        transform: rotate(180deg);

        .el-icon {
            transform: rotate(-200deg);
        }
    }

    .up-left {
        transform: rotate(225deg);
    }

    .up {
        transform: rotate(270deg);
    }

    .up-right {
        transform: rotate(315deg);
    }

    /* 中心的圆形空心区域 */
    .center {
        position: absolute;
        transform: translate(-50%, -50%); /* 将中心定位到控制器的中心 */
        width: 65px;
        height: 65px;
        top: 100px;
        left: 100px;
        background-color: var(--core-button-normal-bg-color);
        border: 1px solid var(--core-border-color);
        border-radius: 50%;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        z-index: 10; /* 确保中心区域在其他扇形之上 */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        &:hover {
            background-color: var(--core-hover-color);
        }
    }
}

3.总结

给每一个方向的按钮绑定点击事件，通过传递不同的value区分不同方向处理对应的交互，中心位置的按钮，是一个复原/重置按钮。