QML Camera 攝像頭拍照(帶滑動條設定焦距)

直接看代碼吧

Item{
        id:item
        anchors.fill: parent
        Camera {
            id: camera
            focus {
                focusMode: Camera.FocusAuto;
                focusPointMode: Camera.FocusPointCenter;
            }
            captureMode: Camera.CaptureStillImage;
            imageProcessing {
                whiteBalanceMode: CameraImageProcessing.WhiteBalanceAuto;
            }
            flash.mode: Camera.FlashAuto;

            imageCapture {
                onImageCaptured: {
                    // Show the preview in an Image
                    photoPreview.source = preview
                }
            }
        }


        VideoOutput {
            id:viewfinder
            source: camera
            fillMode: Stretch
            focus : visible // to receive focus and capture key events when visible
            anchors.fill: parent
            autoOrientation: true
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    camera.searchAndLock();
                }
            }
        }

        ZoomControl {
            id:zoomControl
            x : 0
            y : 0
            z:3
            width : 100
            height: parent.height

            currentZoom: camera.digitalZoom
            maximumZoom: Math.min(4.0, camera.maximumDigitalZoom)
            onZoomTo: camera.setDigitalZoom(value)}

        TLImageButton{
            id:captureBtn
            width: 60
            height: width
            picNormal:commonParameter.getSkinPath() + "icon_capture_normal.png"
            picPressed: commonParameter.getSkinPath() + "icon_capture_press.png"
            picHover: commonParameter.getSkinPath() + "icon_capture_normal.png"
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 8*initWidth/375.0
            anchors.horizontalCenter: parent.horizontalCenter
            onClicked: {
                camera.imageCapture.capture()}
        }
    }
    Image {id: photoPreview}           

ZoomControl是自定義的一個滑動條,用于設定拍照焦距的.來看看滑動條代碼.

import QtQuick 2.0
import QtMultimedia 5.0

Item {
    id : zoomControl
    property real currentZoom : 1
    property real maximumZoom : 1
    signal zoomTo(real value)

    visible: zoomControl.maximumZoom > 1

    MouseArea {
        id : mouseArea
        anchors.fill: parent

        property real initialZoom : 0
        property real initialPos : 0

        onPressed: {
            initialPos = mouseY
            initialZoom = zoomControl.currentZoom
        }

        onPositionChanged: {
            if (pressed) {
                var target = initialZoom * Math.pow(5, (initialPos-mouseY)/zoomControl.height);
                target = Math.max(1, Math.min(target, zoomControl.maximumZoom))
                zoomControl.zoomTo(target)
            }
        }
    }

    Item {
        id : bar
        x : 16
        y : parent.height/4
        width : 24
        height : parent.height/2

        Rectangle {
            anchors.fill: parent

            smooth: true
            radius: 8
            border.color: "white"
            border.width: 2
            color: "black"
            opacity: 0.3
        }

        Rectangle {
            id: groove
            x : 0
            y : parent.height * (1.0 - (zoomControl.currentZoom-1.0) / (zoomControl.maximumZoom-1.0))
            width: parent.width
            height: parent.height - y
            smooth: true
            radius: 8
            color: "white"
            opacity: 0.5
        }

        Text {
            id: zoomText
            anchors {
                left: bar.right; leftMargin: 16
            }
            y: Math.min(parent.height - height, Math.max(0, groove.y - height / 2))
            text: "x" + Math.round(zoomControl.currentZoom * 100) / 100
            font.bold: true
            color: "white"
            style: Text.Raised; styleColor: "black"
            opacity: 0.85
            font.pixelSize: 18           

OK 所有代碼已奉上.邏輯很簡單.

【領QT開發教程學習資料，點選下方連結免費領取↓↓，先碼住不迷路~】

點選這裡：「連結」