css绘制八方向云台 环形按钮盘

翻了很多帖子，最终基于https://blog.csdn.net/zhangtff/article/details/89458797的文章，使用css绘制出八方向用来控制摄像机等的按钮盘，于此记录。
效果图大致如下图，用到的图片还没找美工做，自己随便找的。
用到了一个圆形背景图片，一个向上的箭头图片，一个回复图片。

更新~

在新项目的时候对图标的需求量比较大，element还有antd都图标太少了，故而使用了iconfont引入了svg，而在这个iconfont里面也可以选用*.png的图标，很是方便，就稍微改了改样式，虽然还是挺丑的。效果如下

用这个的好处就是图片质量很不错…

代码部分如下

<template>
    <el-card class="box-card">
        <ul class='pie'>
            <li class='slice-one slice'><a href=""><img src="../../assets/images/up.png" alt="" /></a></li>
            <li class='slice-two slice'><a href=""><img src="../../assets/images/up.png" alt="" /></a></li>
            <li class='slice-three slice'><a href=""><img src="../../assets/images/up.png" alt="" /></a></li>
            <li class='slice-four slice'><a href=""><img src="../../assets/images/up.png" alt="" /></a></li>
            <li class='slice-five slice'><a href=""><img src="../../assets/images/up.png" alt="" /></a></li>
            <li class='slice-six slice'><a href=""><img src="../../assets/images/up.png" alt="" /></a></li>
            <li class='slice-seven slice'><a href=""><img src="../../assets/images/up.png" alt="" /></a></li>
            <li class='slice-eight slice'><a href=""><img src="../../assets/images/up.png" alt="" /></a></li>

            <div class="center"></div>
        </ul>
    </el-card>
</template>

<script>
    export default {
        methods: {
        },
        data() {
            return {
            };
        },
    };
</script>

<style scoped>
    .box-card {
        height: 100%;
    }

    .pie {
        position: relative;
        margin: 20px auto;
        padding: 0;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        list-style: none;
        overflow: hidden;
        background: url('../../assets/images/blue.png') no-repeat center center / 100% 100%;
    }


    .center {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 50px;
        left: 50px;
        border-radius: 50%;
        background: url('../../assets/images/refresh.png') no-repeat center center / 60% 60%;

    }

    .slice {
        overflow: hidden;
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 50%;
        transform-origin: 0% 100%;
    }

    .slice-one {
        transform: rotate(-22.5deg) skewY(-45deg);
    }

    .slice-one img {
        transform: skewY(45deg) rotate(22.5deg);
        margin-top: 50px;
        /* margin-left: 30px; */
    }

    .slice-two {
        transform: rotate(22.5deg) skewY(-45deg);

    }

    .slice-two img {
        transform: skewY(45deg) rotate(22.5deg);
        margin-top: 50px;
        /* margin-left: 30px; */
    }

    .slice-three {
        transform: rotate(67.5deg) skewY(-45deg);

    }

    .slice-three img {
        transform: skewY(45deg) rotate(22.5deg);
        margin-top: 50px;
        /* margin-left: 30px; */
    }

    .slice-four {
        transform: rotate(112.5deg) skewY(-45deg);

    }

    .slice-four img {
        transform: skewY(45deg) rotate(22.5deg);
        margin-top: 50px;
        /* margin-left: 30px; */
    }

    .slice-five {
        transform: rotate(157.5deg) skewY(-45deg);

    }

    .slice-five img {
        transform: skewY(45deg) rotate(22.5deg);
        margin-top: 50px;
        /* margin-left: 30px; */
    }

    .slice-six {
        transform: rotate(202.5deg) skewY(-45deg);

    }

    .slice-six img {
        transform: skewY(45deg) rotate(22.5deg);
        margin-top: 50px;
        /* margin-left: 30px; */
    }

    .slice-seven {
        transform: rotate(247.5deg) skewY(-45deg);

    }

    .slice-seven img {
        transform: skewY(45deg) rotate(22.5deg);
        margin-top: 50px;
        /* margin-left: 30px; */
    }

    .slice-eight {
        transform: rotate(292.5deg) skewY(-45deg);

    }

    .slice-eight img {
        transform: skewY(45deg) rotate(22.5deg);
        margin-top: 50px;
        /* margin-left: 30px; */
    }
</style>

• 这个用到的基本思想是用css来绘制扇形区域，把需要的扇形拼接为一个整的圆，多出的部分设置为隐藏。

• 在绘制的过程中，发现大多数帖子做的都是类似于遥控器按钮盘的四方向扇形，四方向是比较容易画的，利用transform的rotate旋转再截取就可以达到，这样的扇形是九十度，而如何根据不同项目需求绘制不同角度的扇形就是问题的关键所在。

• 解决这个问题核心用到的是transform的skew斜切函数，
  https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew 这是官方定义
  https://blog.csdn.net/Aimee_ice/article/details/96283851 这是一篇很容易理解这个函数的文章。

• 由于本篇需求是八个按钮，一个扇形的角度为45°，skewY(-45deg)

• 其他就没有什么了，不一定代码适合所有人，主要是根据原理各自调试。需要按钮执行的操作根据需要编写就可。

• 在过程中遇到一个问题是图片的位置，图测试省事没有放到文件的asset当中，导致无法寻址，vue的默认图片存储规则还是要注意。

看起来没什么太多东西的内容却耗费了这么多时间，还是基础的东西太弱了，不能单单想要依靠别人的帖子，还是要加油啊桌酱