美文网首页
如何控制摄像头

如何控制摄像头

作者: 码农界四爷__King | 来源:发表于2023-03-15 10:44 被阅读0次
    <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>
    
    

    相关文章

      网友评论

          本文标题:如何控制摄像头

          本文链接:https://www.haomeiwen.com/subject/npjlrdtx.html