实现效果:
实现代码:
<template>
<div class="PTZ-container">
<div class="PTZ-control-circle" :class="circleClass">
<div class="PTZ-control">
<!-- 向上 -->
<div
class="control-btn"
@mousedown="handleMove(UP)"
@mouseup="handleMove(STOP)"
>
<i class="el-icon-caret-left control-icon"></i>
</div>
<!-- 向右 -->
<div
class="control-btn"
style="transform: rotate(90deg)"
@mousedown="handleMove(RIGHT)"
@mouseup="handleMove(STOP)"
>
<i class="el-icon-caret-left control-icon"></i>
</div>
<!-- 向左 -->
<div
class="control-btn"
style="transform: rotate(-90deg)"
@mousedown="handleMove(LEFT)"
@mouseup="handleMove(STOP)"
>
<i class="el-icon-caret-left control-icon"></i>
</div>
<!-- 向下 -->
<div
class="control-btn"
style="transform: rotate(180deg)"
@mousedown="handleMove(DOWN)"
@mouseup="handleMove(STOP)"
>
<i class="el-icon-caret-left control-icon"></i>
</div>
<!-- 中间空白圆圈 -->
<div class="control-round"></div>
</div>
</div>
<div class="control-zoom">
<!-- 右侧缩小 -->
<div class="control-zoom-circle" :class="circleClass">
<div
class="zoom-circle"
@mousedown="handleMove(ZOOM_OUT)"
@mouseup="handleMove(STOP)"
>
<i class="el-icon-zoom-out"></i>
</div>
</div>
<!-- 右侧放大 -->
<div class="control-zoom-circle" :class="circleClass">
<div
class="zoom-circle"
@mousedown="handleMove(ZOOM_IN)"
@mouseup="handleMove(STOP)"
>
<i class="el-icon-zoom-in"></i>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'PTZ-controller',
props: {
showCircle: {
type: Boolean,
default: true
}
},
computed: {
// 是否需要浅透明底色
circleClass() {
return !this.showCircle ? 'no-circle' : ''
}
},
data() {},
methods: {
handleMove(command) {
// ...mouseMove function
}
}
}
</script>
<style scoped lang="scss">
$color-control-btn: #edf0f7;
.PTZ-container {
display: flex;
justify-content: center;
align-items: center;
min-width: 300px;
.no-circle {
background: transparent !important;
width: 140px !important;
}
.PTZ-control-circle {
width: 180px;
height: 180px;
border-radius: 90px;
background: rgb(221 221 221 / 0.1);
.PTZ-control {
// 超出位置换行
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
width: 180px;
height: 180px;
border-radius: 90px;
transform: rotate(45deg);
.control-btn {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border-top-left-radius: 60px; // 把上左两个方向变圆角
border: 1px solid #fff;
background-color: $color-control-btn;
cursor: pointer;
&:hover {
background-color: aliceblue;
}
.control-icon {
transform: rotate(45deg);
color: #1e90ff;
}
}
.control-round {
width: 50px;
height: 50px;
border-radius: 25px;
position: absolute; // 绝对定位找到圆心
top: 63px;
background-color: #fff;
}
}
}
.control-zoom {
font-size: 25px;
color: #1e90ff;
cursor: pointer;
.control-zoom-circle {
width: 70px;
height: 70px;
border-radius: 35px;
background: rgb(221 221 221 / 0.1);
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
.no-circle {
background: transparent !important;
}
.zoom-circle {
width: 40px;
height: 40px;
border-radius: 20px;
background-color: $color-control-btn;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: aliceblue;
}
}
}
}
</style>
浅浅记录一下 有兴趣欢迎讨论