idea Flutter facebook ipad server 抖音 smtp base64 后台管理系统模板 angularjs视频教程 pmp视频教程 两个正态分布相乘 etl数据 oracle限制查询条数 移动端上传图片插件 matlab停止运行 python正则提取字符串 python怎么使用 javaswitch javafile java新特性 java开发接口 java运算 java匿名函数 java字符串格式化 心理学与生活txt tar文件怎么打开 java分布式开发 gilisoft 小票打印 大势至usb监控 html5制作 pro换肤 hzfs cad2008汉化包 冰冠堡垒单刷路线 无线网密码修改 谷歌浏览器升级 ps怎么做动画 bat转exe
当前位置: 首页 > 学习教程  > 编程语言

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

2020/11/24 10:32:16 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

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

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

<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的默认图片存储规则还是要注意。

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


本文链接: http://www.dtmao.cc/news_show_400270.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?