人脸识别系统的界面通过QML来实现,本文以代码注释的形式来介绍QML的基础语法。
若需要了解相关布局、控件的详细用法可以参考Qt5的在线文档:http://doc.qt.io/qt-5/,Qt官方提供了详细的示例。
QML的教程可以参考《Qt Quick核心编程》
qml文件可以直接使用qmlscene.exe(所在目录参考C:\Qt\Qt5.6.3\5.6.3\msvc2015\bin
)来预览。如果使用了自定义注册类型,预览时会报错,需要将自定义注册类型删除。
人脸识别系统
界面的完整QML脚本:import QtQuick 2.2 // 导入模块,不同的版本的模块支持不同的功能
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import HFR.IDCard 1.0 // C++中IDCardReader类注册为QML对象
import HFR.VideoItem 1.0 // C++中VideoItem类注册为QML对象
Window {
id: root; // id必须全文件唯一;按行书写时,后面的分号可以省略
objectName: "root"; // objectName也必须全文件唯一,C++中findChild函数使用的是objectName
visible: true;
width: 1024;
height: 576;
minimumWidth: 1024;
minimumHeight: 576;
//maximumWidth: 1024;
//maximumHeight: 576;
title: qsTr("人脸识别系统"); // 窗口标题
// 矩形容器
Rectangle {
id: rectPreview; // 唯一id
anchors.fill: parent; // 使用anchor锚点方式布局
z: 0; // z序。值越小,元素就越垫底
VideoItem {
id: video;
objectName: "video";
visible:true;
anchors.fill: parent;
}
// 高斯模糊
GaussianBlur {
id: videoBlurMask;
anchors.fill: rectPreview;
source: video;
radius: 8;
cached: true;
visible: false;
}
// 定义一个函数
// 调用示例:rectPreview.showBlurMask(true);
function showBlurMask(bVisible) {
videoBlurMask.visible = bVisible;
}
}
Rectangle {
id: rectBasicInfoBK;
width: 220;
height: 340;
anchors.leftMargin: 20;
anchors.topMargin: 20;
anchors.left: parent.left;
anchors.top: parent.top;
color: "#000000"; // 填充色
opacity: 0.4; // 透明度 0~1.0;0全透明
visible: false;
}
Rectangle {
id: rectBasicInfo;
width: 220;
height: 340;
anchors.leftMargin: 20;
anchors.topMargin: 20;
anchors.left: parent.left;
anchors.top: parent.top;
color: "transparent";
visible: false;
Image {
id: imgIdCard;
width: 102;
height: 126;
anchors.top: parent.top;
anchors.topMargin: 36;
anchors.horizontalCenter: parent.horizontalCenter;
fillMode: Image.PreserveAspectFit;
cache: false;
visible: false;
}
// 结合下面的OpacityMask实现圆角图片的效果
Rectangle{
id: mask0;
width: 102;
height: 126;
anchors.top: parent.top;
anchors.topMargin: 36;
anchors.horizontalCenter: parent.horizontalCenter;
radius: 3;
visible: false;
}
OpacityMask {
width: 102;
height: 126;
anchors.top: parent.top;
anchors.topMargin: 36;
anchors.horizontalCenter: parent.horizontalCenter;
source: imgIdCard;
maskSource: mask0;
}
Rectangle {
id: gridBasicInfo;
anchors.top: imgIdCard.bottom;
anchors.topMargin: 24;
anchors.left: parent.left;
anchors.leftMargin: 20;
Text{
id: txtNameTitle;
anchors.top: parent.top;
anchors.left: parent.left;
horizontalAlignment: Text.AlignRight;
verticalAlignment: Text.AlignVCenter;
font.family: "微软雅黑"; // 字体名称
font.pixelSize: 12; // 字体大小
text: qsTr("姓名:"); // 文本
color: "#bbbbbb"; // 文本颜色
}
Text {
id: txtName;
anchors.top: txtNameTitle.top;
anchors.left: txtNameTitle.right;
anchors.leftMargin: 5;
horizontalAlignment: Text.AlignLeft;
verticalAlignment: Text.AlignVCenter;
font.family: "微软雅黑";
font.pixelSize:12;
color: "#ffffff";
text: "";
}
Text{
id: txtSexTitle;
anchors.top: txtNameTitle.bottom;
anchors.topMargin: 4;
anchors.left: parent.left;
horizontalAlignment: Text.AlignRight;
verticalAlignment: Text.AlignVCenter;
font.family: "微软雅黑";
font.pixelSize: 12;
text: qsTr("性别:");
color: "#bbbbbb";
}
Text {
id: txtSex;
anchors.top: txtSexTitle.top;
anchors.left: txtSexTitle.right;
anchors.leftMargin: 5;
horizontalAlignment: Text.AlignLeft;
verticalAlignment: Text.AlignVCenter;
font.family: "微软雅黑";
font.pixelSize: 12;
color: "#ffffff";
text: "";
}
Text{
id: txtNationTitle;
anchors.top: txtSexTitle.bottom;
anchors.topMargin: 4;
anchors.left: parent.left;
horizontalAlignment: Text.AlignRight;
verticalAlignment: Text.AlignVCenter;
font.family: "微软雅黑";
font.pixelSize: 12;
text: qsTr("民族:");
color: "#bbbbbb";
}
Text {
id: txtNation;
anchors.top: txtNationTitle.top;
anchors.left: txtNationTitle.right;
anchors.leftMargin: 5;
horizontalAlignment: Text.AlignLeft;
verticalAlignment: Text.AlignVCenter;
font.family: "微软雅黑";
font.pixelSize: 12;
color: "#ffffff";
text: "";
}
Text{
id: txtBirthdayTitle;
anchors.top: txtNationTitle.bottom;
anchors.topMargin: 4;
anchors.left: parent.left;
horizontalAlignment: Text.AlignRight;
verticalAlignment: Text.AlignVCenter;
font.family: "微软雅黑";
font.pixelSize: 12;
text: qsTr("出生:");
color: "#bbbbbb";
}
Text {
id: txtBirthday;
anchors.top: txtBirthdayTitle.top;
anchors.left: txtBirthdayTitle.right;
anchors.leftMargin: 5;
horizontalAlignment: Text.AlignLeft;
verticalAlignment: Text.AlignVCenter;
font.family: "微软雅黑";
font.pixelSize: 12;
color: "#ffffff";
text: "";
}
Text{
id: txtCardNumTitle;
anchors.top: txtBirthdayTitle.bottom;
anchors.topMargin: 4;
anchors.left: parent.left;
horizontalAlignment: Text.AlignRight;
verticalAlignment: Text.AlignVCenter;
font.family: "微软雅黑";
font.pixelSize: 12;
text: qsTr("公民身份号码:");
color: "#bbbbbb";
}
Text {
id: txtCardNum;
anchors.top: txtCardNumTitle.bottom;
anchors.topMargin: 4;
anchors.left: parent.left;
horizontalAlignment: Text.AlignLeft;
verticalAlignment: Text.AlignVCenter;
font.family: "微软雅黑";
font.pixelSize: 14;
color: "#ffffff";
text:"";
}
}
}
GroupBox {
id: grpFunction;
title: qsTr("高级");
anchors.left: parent.left;
anchors.bottom: parent.bottom;
height: 150;
width: 220;
visible: true;
// 列布局
ColumnLayout {
spacing: 4;
CheckBox {
id: btnPreview;
text: qsTr("摄像头预览");
checked: cameraPreview.enabled; // 是否选中
}
CheckBox {
id: btnRealTimeDetect;
checked: cameraPreview.liveFaceDetect;
text: qsTr("实时人脸检测");
}
Button {
id: btnGrapImage;
Layout.minimumWidth: 120;
text: qsTr("手动抓图");
}
Button {
id: btnGrapFaceImage;
Layout.minimumWidth: 120;
text: qsTr("手动抓人脸图");
BusyIndicator {
id: busyGrapFaceImage;
anchors.left: parent.left;
anchors.leftMargin: 3;
anchors.top: parent.top;
anchors.topMargin: (btnGrapFaceImage.height - height) / 2;
running: false;
style: BusyIndicatorStyle {
indicator: Image {
visible: control.running
source: "qrc:/HFR/Resources/image/Transfer.png"
RotationAnimator on rotation {
running: control.running
loops: Animation.Infinite
duration: 2000
from: 0 ; to: 360
}
}
}
}
}
}
}
Rectangle {
id: rectGrapImageBK;
anchors.top: parent.top;
anchors.bottom: parent.bottom;
anchors.right: parent.right;
width: 180;
color: "#000000";
opacity: 0.4;
}
Rectangle {
id: rectGrapImage;
anchors.top: parent.top;
anchors.bottom: parent.bottom;
anchors.right: parent.right;
anchors.topMargin: 25;
anchors.rightMargin: 20;
width: 140;
radius: 5;
color: "transparent";
Component {
id: grapImageDelegate;
Rectangle {
id: wrapper;
width: 140;
height: 90;
color: "transparent";
Image {
id: imgGrap;
anchors.fill: parent;
smooth: true;
fillMode: Image.PreserveAspectFit;
source: imgUri;
visible: false;
}
Rectangle{
id: mask1;
anchors.fill: parent;
radius: 2;
visible: false;
}
OpacityMask {
anchors.fill: parent;
source: imgGrap;
maskSource: mask1;
}
// 定义一个鼠标响应区域
MouseArea {
hoverEnabled: true;
anchors.fill: imgGrap;
// 鼠标进入时,显示预览大图
onEntered: {
rectPreview.showBlurMask(true);
imgBigGrapWrapper.setPos(this);
imgBigGrap.source = imgGrap.source;
imgBigGrapWrapper.visible = true;
}
// 鼠标离开时,关闭预览大图
onExited: {
rectPreview.showBlurMask(false);
imgBigGrapWrapper.visible = false;
}
}
}
}
// 滚动条的用法比较特别,不像MFC等那样是控件的属性。
ScrollView {
horizontalScrollBarPolicy: Qt.ScrollBarAsNeeded;
clip: true;
anchors.fill: parent;
// 抓图列表
ListView {
id: listCapture;
anchors.fill: parent;
spacing: 15;
focus: true;
delegate: grapImageDelegate;
model: grapImageListModel;
}
}
}
Item {
id: imgBigGrapWrapper;
width: 550;
height: 310;
z: 100;
anchors.rightMargin: 5;
anchors.right: rectGrapImageBK.left;
visible: false;
Image {
id: imgBigGrap;
anchors.fill: parent;
smooth: true;
sourceSize: Qt.size(parent.width, parent.height);
fillMode: Image.PreserveAspectFit;
visible: false;
}
RectangularGlow {
anchors.fill: imgBigGrapWrapper;
glowRadius: 6;
spread: 0.2;
color: "gray";
cornerRadius: 5;
}
Rectangle{
id: mask;
anchors.fill: parent;
radius: 6;
visible: false;
}
OpacityMask {
anchors.fill: parent;
source: imgBigGrap;
maskSource: mask;
}
function setPos(object) {
var globalCoordinares = object.mapToItem(parent, 0, 0);
var yValue = globalCoordinares.y - (imgBigGrapWrapper.height - object.height) / 2;
if(yValue < 0) {
yValue = 30;
}
else if(yValue + imgBigGrapWrapper.height > parent.height) {
yValue = parent.height - imgBigGrapWrapper.height - 30;
}
imgBigGrapWrapper.y = yValue;
}
}
Text{
id: fpsText;
anchors.top: parent.top;
anchors.right: parent.right;
anchors.topMargin: 3;
width: 80;
height: 20;
font.family: "Arial";
font.pixelSize: 12;
color: "white";
text: "";
}
Rectangle {
id: rectMask;
anchors.fill: parent;
color: "#000000";
visible: false;
opacity: 0.6;
z: 199;
}
Rectangle {
id: rectCamaraNotConnTips;
anchors.fill: parent;
visible: false;
color: "transparent";
z: 200;
Text {
id: txtNoCameraSignal;
anchors.centerIn: parent;
font.family: "微软雅黑";
font.pixelSize: 50;
font.bold: false;
color: "#ffffff"
horizontalAlignment: Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter;
text: "无视频输入信号";
}
Button {
id: btnReopenCamera;
anchors.horizontalCenter: parent.horizontalCenter;
anchors.top: txtNoCameraSignal.bottom;
anchors.topMargin: 8;
text: "重试";
}
}
// 人脸识别结果的布局容器
Rectangle {
id: rectRecognizeResult;
anchors.fill: parent;
color: "transparent";
visible: false;
z: 200;
Image {
id: imgResult;
anchors.horizontalCenter: parent.horizontalCenter;
anchors.verticalCenter: parent.verticalCenter;
}
Text {
id: txtResult;
anchors.top: imgResult.bottom;
anchors.topMargin: 20;
anchors.horizontalCenter: parent.horizontalCenter;
font.family: "微软雅黑";
font.pixelSize: 28;
font.bold: false;
color: "#ffffff";
horizontalAlignment: Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter;
text: "";
}
// 定义一个鼠标区域,点击鼠标关闭提示
MouseArea {
anchors.fill: parent;
onClicked: {
timerHide.stop();
allHide();
}
}
// 定时器,5秒之后关闭提示
Timer {
id: timerHide;
interval: 5000;
running: false;
repeat: false;
onTriggered: {
allHide();
}
}
function show(bSuccess, strText) {
if(bSuccess) {
imgResult.source = "qrc:/HFR/Resources/image/success.png";
}
else {
imgResult.source = "qrc:/HFR/Resources/image/failed.png";
}
txtResult.text = strText;
rectRecognizeResult.visible = true;
timerHide.start();
}
}
// 提示消息的布局容器
Rectangle {
id: rectMsg;
anchors.fill: parent;
color: "transparent";
visible: false;
z: 200;
Text {
id: txtMsg;
anchors.centerIn: parent;
font.family: "微软雅黑";
font.pixelSize: 38;
font.bold: false;
color: "#ffffff";
horizontalAlignment: Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter;
text: "";
}
MouseArea {
anchors.fill: parent;
onClicked: {
timerHideMsg.stop();
allHide();
}
}
Timer {
id: timerHideMsg;
interval: 5000;
running: false;
repeat: false;
onTriggered: {
allHide();
}
}
function show(strText) {
txtMsg.text = strText;
rectMsg.visible = true;
timerHideMsg.start();
}
}
Rectangle {
id: rectProgressTipMask;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 10;
anchors.horizontalCenter: parent.horizontalCenter;
radius: 5;
color: "#000000";
visible: false;
opacity: 0.6;
width: 500;
height: 60;
z: 199;
}
// 识别进度提示的布局容器
Rectangle {
id: rectProgressTip;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 10;
anchors.horizontalCenter: parent.horizontalCenter;
color: "transparent";
width: 500;
height: 60;
z: 200;
Text {
id: txtProgressTip;
anchors.centerIn: parent;
font.family: "微软雅黑";
font.pixelSize: 30;
font.bold: false;
color: "#ffffff";
horizontalAlignment: Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter;
text: "";
}
function show(strTip) {
txtProgressTip.text = strTip;
rectProgressTip.visible = true;
}
}
function allHide() {
rectCamaraNotConnTips.visible = false;
rectRecognizeResult.visible = false;
rectMsg.visible = false;
rectMask.visible = false;
rectProgressTipMask.visible = false;
rectProgressTip.visible = false;
}
function showCamaraNotConnTips(bShow) {
allHide();
rectCamaraNotConnTips.visible = bShow;
rectMask.visible = bShow;
}
function showResult(strMsg, bPass) {
allHide();
rectRecognizeResult.show(bPass, strMsg);
rectMask.visible = true;
}
function showMsg(strMsg) {
allHide();
rectMsg.show(strMsg);
rectMask.visible = true;
}
function showProgress(strTip) {
allHide();
rectProgressTip.show(strTip);
rectProgressTipMask.visible = true;
}
// 信号槽连接
Connections {
target: camera;
// 将C++中OpenCVCamera类的信号enabledChanged,绑定到QML中的槽函数
// 函数名需要遵循如下规则:on + 信号名(首字母大写)
onEnabledChanged: {
if(bEnable) {
showCamaraNotConnTips(false);
}
}
onBeginRecognize: {
allHide();
grapImageListModel.clearGrapImage();
}
onBeginGrapFaceImage: {
btnGrapFaceImage.enabled = false;
btnGrapFaceImage.text = qsTr("抓取人脸中...");
busyGrapFaceImage.running = true;
showProgress("正在抓取人脸,请对准摄像头");
}
onEndGrapFaceImage: {
busyGrapFaceImage.running = false;
btnGrapFaceImage.text = qsTr("手动抓人脸图");
btnGrapFaceImage.enabled = true;
showProgress("正在对比人脸数据...");
}
onNoVideoInputSignal: {
camera.enabled = false;
cameraPreview.enabled = false;
showCamaraNotConnTips(true);
}
}
Connections {
target: video;
onFpsChanged: {
fpsText.text = fps + " fps";
}
}
Connections {
target: btnGrapFaceImage;
onClicked: {
camera.grapImage(true, 5);
}
}
Connections {
target: btnGrapImage;
onClicked: {
camera.grapImage(false, 1);
}
}
Connections {
target: btnPreview;
onClicked: {
cameraPreview.enabled = btnPreview.checkedState == Qt.Checked;
}
}
Connections {
target: btnRealTimeDetect;
onClicked: {
cameraPreview.liveFaceDetect = (btnRealTimeDetect.checkedState == Qt.Checked);
}
}
Connections {
target: btnReopenCamera;
onClicked: {
camera.enabled = true;
cameraPreview.enabled = true;
}
}
Connections {
target: idCardReader;
onNewIdCard: {
var imgPath = "file:/" + idCardReader.photoPath;
imgPath.replace("\\", "/");
imgIdCard.source = "";
imgIdCard.source = imgPath;
txtName.text = idCardReader.name;
txtSex.text = idCardReader.sex;
txtNation.text = idCardReader.nation;
txtBirthday.text = idCardReader.birthday;
txtCardNum.text = idCardReader.cardNumber;
rectBasicInfo.visible = true;
rectBasicInfoBK.visible = true;
// 调用C++中OpenCVCamera类的slot函数
camera.recognize(idCardReader.name,
idCardReader.sex,
idCardReader.nation,
idCardReader.birthday,
idCardReader.photoPath,
idCardReader.address,
idCardReader.cardNumber
);
}
}
// 定义IDCardReader控件。
// IDCardReader为C++中IDCardReader类注册而来,此处定义该控件相当于实例化IDCardReader类。
IDCardReader {
id: idCardReader;
}
}
项目地址:https://gitee.com/china_jeffery/HFR_OpenSource