实现效果图

html代码

<!DOCTYPE html>
<html><head><title></title><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Cache-Control" content="no-cache, must-revalidate" /><meta http-equiv="Expires" content="0" /><link rel="stylesheet" href="css/index.css"></head><body><div class="container"><div class="cloud"><div class="ptzText">云台控制</div><div class="ptz"><!-- /* 外圆环 */ --><div id="round"></div><!-- /* 黑色内圆环 */ --><div id="center_black"></div><div id="center_blue"><img id="center_play" src="img/云台-播放.png"></div><div id="circle0"><div id="left"><div class="circle-left" id="circle2" onmouseleave="circleRecoverColor(2)"onmouseenter="circleChangeColor(2)"><img src="img/云台控制.png"></div><div class="circle-left" id="circle3" onmouseleave="circleRecoverColor(3)"onmouseenter="circleChangeColor(3)"><img src="img/云台控制.png"></div><div class="circle-left" id="circle4" onmouseleave="circleRecoverColor(4)"onmouseenter="circleChangeColor(4)"><img src="img/云台控制.png"></div><div class="circle-left" id="circle5" onmouseleave="circleRecoverColor(5)"onmouseenter="circleChangeColor(5)"><img src="img/云台控制.png"></div></div><div id="right"><div class="circle-right" id="circle9" onmouseleave="circleRecoverColor(9)"onmouseenter="circleChangeColor(9)"><img src="img/云台控制.png"></div><div class="circle-right" id="circle8" onmouseleave="circleRecoverColor(8)"onmouseenter="circleChangeColor(8)"><img src="img/云台控制.png"></div><div class="circle-right" id="circle7" onmouseleave="circleRecoverColor(7)"onmouseenter="circleChangeColor(7)"><img src="img/云台控制.png"></div><div class="circle-right" id="circle6" onmouseleave="circleRecoverColor(6)"onmouseenter="circleChangeColor(6)"><img src="img/云台控制.png"></div></div></div><canvas id="Canvas" width="146" height="146"></canvas></div></div></div></body><script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script><script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</html>

css

@charset "utf-8";* {margin: 0;padding: 0;
}html {width: 100%;height: 100%;font-size: 12px;font-family: Arial, Helvetica, sans-serif;-webkit-text-size-adjust: none;background: #FFFFFF;
}
body {margin: 0 auto;
}
.container {position: relative;left: 20px;background-color: #021F3C;width: 310px;height: 310px;
}
/* 主体 */
.main {position: absolute;left: 15px;top: 56px;
}
.cloud {position: relative;width: 300px;/* padding: 10px; */height: 300px;/* background-color: #656a7c; */}
/*云台控制*/
.ptzText {position: absolute;width: 100px;height: 34px;line-height: 34px;font-size: 12px;color: #039FFE;
}
.ptz {position: absolute;width: 300px;/* padding: 10px; */height: 264px;top: 34px;left: 4px;border: 1px solid rgba(29, 151, 231, 0.5);
}
.circle-left {width: 73px;height: 146px;/* border: 1px solid #fff; */border-radius: 0px 73px 73px 0px;position: absolute;right: 0;transform-origin: 0 50%;
}
.circle-right {width: 73px;height: 146px;/* border: 1px solid #fff; */border-radius: 73px 0px 0px 73px;position: absolute;right: 0;transform-origin: 100% 50%;
}
/* 八等份分割线 */
#Canvas {position: absolute;z-index: 1;pointer-events: none;left: 87px;top: 27px;transform: rotate(-22.5deg)
}
/* 外圆环 */
#round {width: 160px;height: 160px;background-color: #0A0F20;border-radius: 50%;position: absolute;left: 80px;top: 20px;z-index: 0;
}
/* 黑色内圆环 */
#center_black {width: 74px;height: 74px;background-color: #0A0F20;border-radius: 50%;position: absolute;left: 123px;top: 63px;z-index: 1;
}
/* 中心蓝色圆环 */
#center_blue {width: 60px;height: 60px;text-align: center;background-color: #0F2140;border: 2px solid rgba(29, 151, 231, 0.8);border-radius: 50%;position: absolute;left: 128px;top: 68px;z-index: 2;
}
#center_blue img {position: absolute;left: 19px;top: 19px;
}
/* 圆八等份 */
#circle0 {width: 146px;height: 146px;border-radius: 73px;top: 0px;background-color: #0F2140;position: absolute;left: 87px;top: 27px;z-index: 0;pointer-events: auto;transform: rotate(-22.5deg)
}
#left {/* 用矩形切割半圆 */clip: rect(0px 73px 146px 0px);position: absolute;right: 0px;width: 73px;height: 146px;overflow: hidden;/* border-left: 1px solid #fff; */
}
#right {clip: rect(0px 73px 146px 0px);position: absolute;left: 0px;width: 73px;height: 146px;overflow: hidden;/* border-right: 1px solid rgb(5, 4, 4); */
}
#circle2:hover,#circle3:hover,#circle4:hover,#circle5:hover,#circle6:hover,#circle7:hover,#circle8:hover,#circle9:hover {cursor: pointer;
}
#circle2 {background-color: #0F2140;
}
#circle2 img {position: absolute;left: 15px;top: 20px;transform: rotate(22.5deg);
}#circle3 {background-color: #0F2140;transform: rotate(45deg);
}#circle3 img {position: absolute;left: 15px;top: 20px;transform: rotate(22.5deg);
}
#circle4 {background-color: #0F2140;transform: rotate(90deg);
}
#circle4 img {position: absolute;left: 15px;top: 20px;transform: rotate(22.5deg);
}
#circle5 {background-color: #0F2140;transform: rotate(135deg);
}
#circle5 img {position: absolute;left: 15px;top: 20px;transform: rotate(22.5deg);
}
#circle6 {background-color: #0F2140;transform: rotate(225deg);
}
#circle6 img {position: absolute;right: 15px;top: 20px;transform: rotate(-22.5deg);
}
#circle7 {background-color: #0F2140;transform: rotate(270deg);
}
#circle7 img {position: absolute;right: 15px;top: 20px;transform: rotate(-22.5deg);
}
#circle8 {background-color: #0F2140;transform: rotate(315deg);}
#circle8 img {position: absolute;right: 15px;top: 20px;transform: rotate(-22.5deg);
}
#circle9 {background-color: #0F2140;transform: rotate(360deg);
}
#circle9 img {position: absolute;right: 15px;top: 20px;transform: rotate(-22.5deg);
}
/* 按钮 */
.ptzBtn {position: absolute;top: 182px;width: 123px;height: 28px;
}
.ptzBtn p {position: absolute;left: 15px;width: 36px;height: 28px;line-height: 28px;color: #fff;
}
.ptzBtn button {position: relative;left: 51px;width: 36px;height: 28px;/* background-color: #062d63; */border: 1px solid #5D6773;
}
.ptzBtn .big {background: url(../img/云台-加.png) no-repeat center;background-color: #062d63;
}
.ptzBtn .smal {background: url(../img/云台-减.png) no-repeat center;background-color: #062d63;
}
.ptzBtn button:hover {background-color: #0f449f;cursor: pointer;
}

clip

例子中使用了jQuery和canvas画布，其中将圆八等份的效果是通过clip: rect(0px 73px 146px 0px)来实现的。
clip属性剪裁绝对定位元素，也就是说，只有 position:absolute 的时候才是生效的。

左右宽度相减的值是宽度，上下相减的值是高度。

top right bottom left分别指最终剪裁可见区域的上边，右边，下边与左边。而所有的数值都表示位置，且是相对于原始元素的左上角而言的。

img{position:absolute;clip:rect(A,B,C,D);/* clip:rect(上上,左右,上下,左左);   */}

z-index

由于一些元素会占据相同的空间，就会出现遮罩问题，然后这个里面的解决办法是使用z-index属性来解决，通过z-index的不同值来决定上层元素和被遮罩元素。
解决遮罩问题后又出现了一个问题，被遮罩层被上层元素遮住，无法实现点击之类的效果，解决办法：

/* z-index遮照住无法点击下方图层? */
/* 双方都有使用z-index属性  添加以下属性 */
/* 被遮挡层*/
pointer-events: auto;
/*上方遮挡层*/
pointer-events: none;

javaScript

// 把角度转换为弧度
function angleToRadian(angle) {return Math.PI / 180 * angle;
}// 画圆
function drawCircle(ctx, x, y, radius, startAngle, endAngle, Boolean, size, color) {ctx.beginPath()ctx.lineWidth = sizectx.arc(x, y, radius, startAngle, endAngle, Boolean);ctx.strokeStyle = colorctx.closePath()ctx.stroke()
}
// 将圆八等份
drawGauge("Canvas")
function drawGauge(id) {let myCanvas = document.getElementById(id)let ctx = myCanvas.getContext("2d")// width = canvas.offsetWidth// height = canvas.offsetHeight// myCanvas.width = width// myCanvas.height = heightctx.translate(73, 73)ctx.beginPath()ctx.strokeStyle = '#0A0F20'ctx.lineWidth = 4ctx.moveTo(73, 0)ctx.lineTo(73, 0)ctx.stroke()ctx.closePath()ctx.save()for (let i = 0; i < 8; i++) {let jiaodu = 45 * ilet ratateAngle = (Math.PI / 180) * jiaoductx.restore() // 将canvas恢复到未旋转前的状态ctx.save() // 保存未旋转前的状态ctx.rotate(ratateAngle)ctx.beginPath()ctx.strokeStyle = '#0A0F20'ctx.lineWidth = 4ctx.moveTo(0, 0)ctx.lineTo(73, 0)// ctx.font = '20px sans-serif'ctx.stroke()ctx.closePath()}}
// 点击颜色改变
function Color_after(id) {$(id).css({"background-color": "#0A0F20",})
}
// 恢复颜色
function Color_before(id) {$(id).css({"background-color": "#0F2140"})
}
// 点击图片改变
function img_after(id) {$(id).attr("src", "img/云台控制-选中.png")
}
// 恢复图片
function img_before(id) {$(id).attr("src", "img/云台控制.png")
}
// 八等份圆中按钮的进入效果,选中当前按钮变化，其他按钮反之
function circleChangeColor(i) {switch (i) {case 2:// 背景颜色Color_after('#circle2')const list_2 = ['#circle3', '#circle4', '#circle5', '#circle6', '#circle7', '#circle8', '#circle9']for (let i = 0; i < list_2.length; i++) {Color_before(list_2[i])}// 按钮图片img_after('#circle2>img')const img_2 = ['#circle3>img', '#circle4>img', '#circle5>img', '#circle6>img', '#circle7>img', '#circle8>img', '#circle9>img']for (let i = 0; i < img_2.length; i++) {img_before(img_2[i])}breakcase 3:Color_after('#circle3')const list_3 = ['#circle2', '#circle4', '#circle5', '#circle6', '#circle7', '#circle8', '#circle9']for (let i = 0; i < list_3.length; i++) {Color_before(list_3[i])}img_after('#circle3>img')const img_3 = ['#circle2>img', '#circle4>img', '#circle5>img', '#circle6>img', '#circle7>img', '#circle8>img', '#circle9>img']for (let i = 0; i < img_3.length; i++) {img_before(img_3[i])}breakcase 4:Color_after('#circle4')const list_4 = ['#circle2', '#circle3', '#circle5', '#circle6', '#circle7', '#circle8', '#circle9']for (let i = 0; i < list_4.length; i++) {Color_before(list_4[i])}img_after('#circle4>img')const img_4 = ['#circle2>img', '#circle3>img', '#circle5>img', '#circle6>img', '#circle7>img', '#circle8>img', '#circle9>img']for (let i = 0; i < img_4.length; i++) {img_before(img_4[i])}breakcase 5:Color_after('#circle5')const list_5 = ['#circle2', '#circle3', '#circle4', '#circle6', '#circle7', '#circle8', '#circle9']for (let i = 0; i < list_5.length; i++) {Color_before(list_5[i])}img_after('#circle5>img')const img_5 = ['#circle2>img', '#circle3>img', '#circle4>img', '#circle6>img', '#circle7>img', '#circle8>img', '#circle9>img']for (let i = 0; i < img_5.length; i++) {img_before(img_5[i])}breakcase 6:Color_after('#circle6')const list_6 = ['#circle2', '#circle3', '#circle4', '#circle5', '#circle7', '#circle8', '#circle9']for (let i = 0; i < list_6.length; i++) {Color_before(list_6[i])}img_after('#circle6>img')const img_6 = ['#circle2>img', '#circle3>img', '#circle4>img', '#circle5>img', '#circle7>img', '#circle8>img', '#circle9>img']for (let i = 0; i < img_6.length; i++) {img_before(img_6[i])}breakcase 7:Color_after('#circle7')const list_7 = ['#circle2', '#circle3', '#circle4', '#circle5', '#circle6', '#circle8', '#circle9']for (let i = 0; i < list_7.length; i++) {Color_before(list_7[i])}img_after('#circle7>img')const img_7 = ['#circle2>img', '#circle3>img', '#circle4>img', '#circle5>img', '#circle6>img', '#circle8>img', '#circle9>img']for (let i = 0; i < img_7.length; i++) {img_before(img_7[i])}breakcase 8:Color_after('#circle8')const list_8 = ['#circle2', '#circle3', '#circle4', '#circle5', '#circle6', '#circle7', '#circle9']for (let i = 0; i < list_8.length; i++) {Color_before(list_8[i])}img_after('#circle8>img')const img_8 = ['#circle2>img', '#circle3>img', '#circle4>img', '#circle5>img', '#circle6>img', '#circle7>img', '#circle9>img']for (let i = 0; i < img_8.length; i++) {img_before(img_8[i])}breakcase 9:Color_after('#circle9')const list_9 = ['#circle2', '#circle3', '#circle4', '#circle5', '#circle6', '#circle7', '#circle8']for (let i = 0; i < list_9.length; i++) {Color_before(list_9[i])}img_after('#circle9>img')const img_9 = ['#circle2>img', '#circle3>img', '#circle4>img', '#circle5>img', '#circle6>img', '#circle7>img', '#circle8>img']for (let i = 0; i < img_9.length; i++) {img_before(img_9[i])}break}
}
// 鼠标放离开实现效果的方法
function leaveColor(id1, id2) {$(id1).css({"background-color": "#0F2140",})$(id2).attr("src", "img/云台控制.png")
}
// 云台鼠标离开的效果
function circleRecoverColor(i) {switch (i) {case 2:leaveColor("#circle2", "#circle2>img")breakcase 3:leaveColor("#circle3", "#circle3>img")breakcase 4:leaveColor("#circle4", "#circle4>img")breakcase 5:leaveColor("#circle5", "#circle5>img")breakcase 6:leaveColor("#circle6", "#circle6>img")breakcase 7:leaveColor("#circle7", "#circle7>img")breakcase 8:leaveColor("#circle8", "#circle8>img")breakcase 9:leaveColor("#circle9", "#circle9>img")break}
}
/* 云台中心图片的改变效果 */
$('#center_play').click(function () {var img = $('#center_blue>img').attr("src")if (img == "img/云台-播放.png") {$('#center_blue>img').attr("src", "img/云台-暂停.png")} else if (img == "img/云台-暂停.png") {$('#center_blue>img').attr("src", "img/云台-播放.png")}
})

【八方位云台控制器】相关推荐

css绘制八方向云台环形按钮盘
翻了很多帖子,最终基于https://blog.csdn.net/zhangtff/article/details/89458797的文章,使用css绘制出八方向用来控制摄像机等的按钮盘,于此记录. ...
【CKA考试笔记】八、deployment控制器
文章目录实验环境一.deployment的介绍二.创建deploy及yaml的介绍三.deployment创建的pod的特性四.伸缩deploy的副本数五.HPA 六.变更deploy所用 ...
藏经阁（八）LCD控制器 ILI9341 解析
文章目录 TFT屏幕介绍 LCD控制器 ILI9341控制器内部框图 ILI9341时序详解 RGB565数据格式相关命令详解 1.读芯片ID号 (0xD3) 2.内存访问控制(0x36) 3.横向 ...
基于RK3399+PID的手持稳定云台的设计与实现
手持稳定云台的主要作用是将外界环境因数引起的相机姿态变化进行隔离.如因操作者运动造成的机体震动.风阻力矩等,为了确保工作中相机的视轴始终保持期望的姿态不动.云台相机要拍摄出高质量的影像最重要的就是保证 ...
c++矩阵作为函数输入变量_现代控制理论线性系统入门(七)输入输出解耦的控制器设计...
上一章传送门: 善道:线性系统控制入门(六)用能控标准型设计控制器zhuanlan.zhihu.com 在利用状态方程设计MIMO的能控标准型时,闭环系统的动态是完全不考虑输出变量而直接预给的,M ...
【k8s】7、pod控制器详解
文章目录一.Pod控制器介绍二.ReplicasSet(RS)控制器 1.创建ReplicaSet 2.扩缩容 3.镜像升级 4.删除replicaset 三.Deployment控制器 1.创建 ...
STM32F4结合ESP8266上传信息到one_net(中国移动物联网云台)的总结（含客户端查询）
采用的主控制芯片是是STM32F407ZGT6,这里就不详述硬件资源采用HTTP传输协议以后会推出STM32F1.NXP.以及51的使用(敬请期待) 一.资源准备 STM32F4 ESP8266( ...
计算机组成原理硬布线实验心得,计算机组成原理实验 2.9 硬布线控制器课件
1.计算机组成原理实验系列,一.总线与寄存器二.进位加法器三.比较器(仲裁器) 四.计数器五.运算器六.存储器七.时序发生器八.微程序控制器九.硬布线控制器,赖晓铮博士华南理工大学 ...
GD32F405RGT6单片机芯片GigaDevice兆易创新ARM Cortex-M4微控制器
描述 GD32F405系列互联型产品采用全新工艺制程设计,整合了强大的运算效能和丰富的外设接口.处理器主频可达168MHz,并提供了完整的DSP指令集,并行计算能力和专用浮点运算单元(FPU). GD ...
4K@60智能云台从零到一
正文字数:6006 阅读时长:9分钟近两年以来,短视频受到越来越多用户的喜爱和追捧,但短视频的制作成本却扼杀了大量内容创作者的热情和动力.LiveVideoStackCon2020北京站邀请到了摩 ...

【八方位云台控制器】

css绘制八方位云台控制器