加入星计划,您可以享受以下权益:

  • 创作内容快速变现
  • 行业影响力扩散
  • 作品版权保护
  • 300W+ 专业用户
  • 1.5W+ 优质创作者
  • 5000+ 长期合作伙伴
立即加入
  • 正文
  • 推荐器件
  • 相关推荐
  • 电子产业图谱
申请入驻 产业图谱

送老婆,用1小时为家人制作精美电子相框 | Qt 示例

2021/05/31
286
阅读需 12 分钟
加入交流群
扫码加入
获取工程师必备礼包
参与热点资讯讨论

今天给大家分享:如何用 Qt 实现一个电子相框。

运行效果:

代码链接:

https://doc.qt.io/qt-5/qtmultimedia-multimediawidgets-videowidget-example.html

实现难度:

★★★☆☆

访问照片

Window {
    [...]

    FileDialog {
        [...]
        onAccepted: folderModel.folder = fileUrl + "/"
    }

    Item {
        [...]
        Repeater {
            model: FolderListModel {
                id: folderModel
            }
            Rectangle {
                [...]
                Image {
                    [...]
                    source: folderModel.folder + fileName
                }
            }
        }
    }

    Image {
        source: "qrc:/resources/folder.png"
        MouseArea {
            onClicked: fileDialog.open()
        }
    }
}

FileDialog 用于提供选择文件 / 目录的功能, 这里我们通过它来选择照片所在目录。Repeater 会根据 model 里数据重复构建多个一样的控件,这里我们通过它来创建所有照片载体控件。Repeater 的数据源是 FolderListModel,FolderListModel 提供的数据是一个目录下的所有内容,这里对应的就是照片了。

运行效果:

点击左上角的文件夹图标,会弹出一个目录选择框。

我选择的目录里放着 3 张公众号的头像,但是这里只看到一张头像,这是因为它们都重叠在一起了。

设置初始状态

Item {
    [...]
    Repeater {
        [...]
        Rectangle {
            id: photoFrame

            // 随机缩放照片
            scale: root.height / Math.max(image.sourceSize.width, image.sourceSize.height) * Math.max(0.3, Math.random())
            [...]

            Component.onCompleted: {
                // 随机生成照片的位置和旋转角度 
                x = Math.random() * root.width - width/2
                y = Math.random() * root.height - height/2
                rotation = Math.random() * 20 - 10
            }

            Image {
                id: image
                source: folderModel.folder + fileName
                [...]
            }
        }
    }
}

在 QML 里可以使用 JavaScript ,这里我们利用 Math.random() 生成随机数,从而实现照片摆放位置和旋转角度的随机化。scale 属性用于支持照片的缩放。

运行效果:

为了说明是不同的文件,我把文件名显示出来了。

可以看到,已经支持在初始化时随机摆放和缩放照片了。但是,此时无法单独移动某张照片。

支持移动照片

Rectangle {
    id: photoFrame
    [...]

    MouseArea {
        id: dragArea
        anchors.fill: parent
        drag.target: photoFrame

        onPressed: {
            photoFrame.z = ++root.highestZ;
            console.log(photoFrame.z)
        }
    }
}

MouseArea 用于支持鼠标点击事件,当用户点击某张图片时,我们将其 z 属性调整为最大值。z 属性用于设置控件的 z 轴坐标,z 值越大,显示的优先级越高。drag.target 则用于支持拖动事件。

运行效果:

被选中的照片会显示在最上层,然后通过鼠标可以移动被选中的照片。

支持缩放照片

Rectangle {
    id: photoFrame
    [...]

    MouseArea {
        id: dragArea
        [...]

        onWheel: {
            if (wheel.modifiers & Qt.ControlModifier) {
                photoFrame.rotation += wheel.angleDelta.y / 120 * 5;
                if (Math.abs(photoFrame.rotation) < 4)
                    photoFrame.rotation = 0;
            } else {
                photoFrame.scale += photoFrame.scale * wheel.angleDelta.y / 120 / 10;
                if (photoFrame.scale < 0.1)
                    photoFrame.scale = 0.1
            }
        }
    }
}

MouseArea.wheel 用于处理鼠标滚轮事件。当按住 Ctrl 键时,滚动滚轮改变照片的旋转角度。当不按住 Ctrl 键时,滚动滚轮改变照片的大小。

运行效果:

定时更新内容

Window {
    [...]
    function refresh() {
        [...]
        folderModel.folder = ""
        folderModel.folder = folderPath
    }

    Timer {
        id: updateTimer
        interval: 60000
        onTriggered: {
            refresh()
            updateTimer.restart()
        }
    }

    Shortcut {
        sequence: "F5"
        onActivated: {
            refresh()
            updateTimer.restart()
        }
    }
}

Timer 用于创建定时器,触发时长由 interval 来决定。当时间到了,就调用 refresh() 刷新展示的照片。Shortcut 用于创建键盘快捷键功能,这里绑定的是 F5 键。

运行效果:

我将自动刷新的时间设置为 3 秒,先让它自动刷新,然后我手动按下了 F5, 也刷新成功。

到此,虽然程序还有很多需要完善的地方,但是电子相框的基本功能已经实现完毕了,感兴趣的小伙伴们可以再深入研究一下代码。

推荐器件

更多器件
器件型号 数量 器件厂商 器件描述 数据手册 ECAD模型 风险等级 参考价格 更多信息
ISL21080CIH315Z-TK 1 Renesas Electronics Corporation 300nA NanoPower Voltage References with 1.5 VOUT, SOT23, /Reel

ECAD模型

下载ECAD模型
$2.06 查看
T60060-3CR 1 Eaton Corporation Fuse,
$66.45 查看
VNQ7140AJTR 1 STMicroelectronics Quad channel high-side driver with MultiSense analog feedback for automotive applications

ECAD模型

下载ECAD模型
$3.36 查看

相关推荐

电子产业图谱