css drawing eight direction PTZ ring button wheel

Turned a lot of posts, and finally based on https://blog.csdn.net/zhangtff/article/details/89458797 The article uses css to draw the eight direction button wheel used to control the camera and so on, which is recorded here.
The effect picture is roughly as shown in the figure below. The pictures used have not been found for art work, so I just found them myself.
A circular background picture, an upward arrow picture and a reply picture are used.
The code part is as follows

<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>
  • The basic idea of this is to use css to draw the fan-shaped area, splice the required fan-shaped area into a whole circle, and set the extra part as hidden.

  • In the process of drawing, it is found that most posts are made of four-way sectors similar to the button wheel of the remote control. The four directions are relatively easy to draw. It can be achieved by rotating and intercepting with transform's rotate. Such sectors are 90 degrees, and how to draw sectors with different angles according to the needs of different projects is the key to the problem.

  • The key to solving this problem is the skew function of transform,
    https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew This is the official definition
    https://blog.csdn.net/Aimee_ice/article/details/96283851 This is an article that is easy to understand this function.

  • Since this article requires eight buttons, the angle of a sector is 45 °, skewY(-45deg)

  • There is nothing else. The code is not necessarily suitable for everyone. It is mainly debugged according to the principle. The operations that need to be performed by the button can be written as needed.

  • One problem encountered in the process is the location of the picture. The picture test is easy, and it is not placed in the asset of the file, which makes it impossible to address. Pay attention to the default picture storage rules of vue.

It seems that there is not much content, but it takes so much time. The basic things are too weak. We can't just rely on other people's posts, but we should refuel

Tags: Front-end html5 Vue.js css

Posted by st0rmer on Fri, 06 May 2022 22:51:25 +0300