如何控制摄像头

2023-03-15  本文已影响0人  码农界四爷__King
<template>
    <view>
        <view class="camera-content">
            <view class="camera-up" @tap="cameraTapBtn" @longpress="cameraLongBtn" data-title="上"
                @touchend="cameraTouchBtn">上</view>
            <view class="camera-middle">
                <view class="camera-middle-left" @tap="cameraTapBtn" @longpress="cameraLongBtn" data-title="左"
                @touchend="cameraTouchBtn">左</view>
                <view>中</view>
                <view class="camera-middle-right" @tap="cameraTapBtn" @longpress="cameraLongBtn" data-title="右"
                @touchend="cameraTouchBtn">右</view>
            </view>
            <view class="camera-down" @tap="cameraTapBtn" @longpress="cameraLongBtn" data-title="下"
                @touchend="cameraTouchBtn">下</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                timeOnline: null,
                degreesNum: 0
            }
        },
        methods: {
            cameraTapBtn(event) {
                let directionTitle = event.target.dataset.title
                this.ControlFun(directionTitle, "点击")
            },
            cameraLongBtn(event) {
                let directionTitle = event.target.dataset.title
                this.ControlFun(directionTitle, "长按")
            },
            cameraTouchBtn() {
                this.degreesNum = 0
                clearInterval(this.timeOnline); // 清除计时器
            },
            ControlFun(directionTitle, controlTime) {
                let This = this
                This.degreesNum = 0
                console.log(directionTitle)
                if (controlTime == "点击") {
                    This.degreesNum++
                    console.log(This.degreesNum)
                } else if (controlTime == "长按") {
                    This.timeOnline = setInterval(() => {
                        This.degreesNum++
                        console.log(This.degreesNum)
                    }, 200);
                }
            

            }
        },
    }
</script>

<style scoped>
    .camera-content {
        margin: 60upx auto;
        width: 480upx;
        height: 480upx;
        border-radius: 50%;
        border: 1px solid #efefef;
        box-shadow: 2px 2px 10px #909090;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 30upx;
        box-sizing: border-box;
    }

    .camera-content .camera-middle {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }
</style>

上一篇下一篇

猜你喜欢

热点阅读