QML —— Canvas重绘钟表组件（附完整源码）

最新推荐文章于 2024-07-30 09:57:08 发布
最新推荐文章于 2024-07-30 09:57:08 发布
阅读量483 收藏 11
点赞数 8
分类专栏： QML 文章标签： Qt QML
automoblie0
本文链接：https://blog.csdn.net/automoblie0/article/details/135373572
版权
示例效果]

在这里插入图片描述

 

源码

     main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

 
     main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

import QtQuick.Layouts 1.12

Window
{
    id: root
    visible: true
    width: 800
    height: 600
    title: qsTr("Hello World")

    ColumnLayout
    {
        anchors.top: parent.top
        Layout.topMargin: 10
        spacing: 5

        RowLayout
        {
            Layout.alignment:Qt.AlignHCenter
            Text
            {
                text: qsTr("当前时间:")
                font.family: "微软雅黑"
                font.pixelSize: 20
            }
            Text
            {
                id: currentTimeID
                text: qsTr("--")
                color: "pink"
                font.family: "Courier New"
                font.pixelSize: 40
                font.bold: true
            }
        }

        MyClock
        {
            Layout.alignment:Qt.AlignHCenter
            id:rootClock
            onCurrentPaintTime:{currentTimeID.text = timeString}
        }
    }
}

 
     MyClock.qml

import QtQuick 2.0
import QtQuick.Window 2.12

Item
{
    id: rootClock
    visible: true
//    width: 740
//    height: 680

    signal currentPaintTime(var timeString)

    Timer
    {
        interval: 980
        running: true
        repeat: true
        onTriggered:{canvasClock.requestPaint()}
    }

    Canvas
    {
        id: canvasClock
        anchors.fill: parent

        onPaint:
        {
            // 获取绘制2d画笔对象
            let painter2D = getContext("2d")

            painter2D.clearRect(0,0,width,height)

            // 绘制背景相关
            drawBackground(painter2D)

            // 绘制中心点
            drawCenterPoint(painter2D)

            // 绘制时分秒
            var date = new Date();
            var hours =  date.getHours()
            var minutes =  date.getMinutes()
            var seconds = date.getSeconds();
            drawTime_hour(painter2D,hours%12)
            drawTime_minute(painter2D,minutes)
            drawTime_second(painter2D,seconds)

            // 信号传递出绘制的时间
            currentPaintTime(hours+":"+minutes+":"+seconds);
        }
    }

    // 背景圆半径取窗口宽高最小值的某个系数
    property int windowMinValue : Math.min(root.width,root.height)
    property int backgroundRadius : windowMinValue*0.4

    function drawBackground(painter2D)
    {
        // 保存当前绘制环境
        painter2D.save()

        // 将当前路径重置为新路径
        painter2D.beginPath()

        // 变换坐标起始点
        painter2D.translate(root.width/2,root.height/2)

        // 像素清除为透明黑色
        painter2D.clearRect(-backgroundRadius,-backgroundRadius,backgroundRadius*2,backgroundRadius*2)

        /******************** 绘制背景圆 ********************/
        // 绘制外侧大圆
        painter2D.arc(0,0,backgroundRadius,0,360)
        painter2D.fillStyle = "#edeef7"
        painter2D.fill()

        // 使用当前笔划样式笔划子路径
        painter2D.stroke()
        /**************************************************/

        /******************** 写背景文字 ********************/
        let backgroundText = [12,1,2,3,4,5,6,7,8,9,10,11]
        painter2D.font = "bold " + (windowMinValue/20)+"px \"Courier New\""
        painter2D.textAlign = "center"
        painter2D.textBaseline = "middle"
        painter2D.fillStyle = "black";
        for(var indexText=0;indexText<12;++indexText)
        {
            let rotatoAngle = (indexText * 30)      // 30°
            let realAngle = 90- rotatoAngle;
            let x = Math.floor(backgroundRadius*0.85 * (Math.cos(realAngle*Math.PI/180)))
            let y = Math.floor(backgroundRadius*0.85 * (Math.sin(realAngle*Math.PI/180)))
            painter2D.fillText(backgroundText[indexText],x,-y)   // 文字
        }
        /**************************************************/

        /******************** 画背景刻度 ********************/
        for(var indexMark=0;indexMark<60;++indexMark)
        {
            let rotatoMarkAngle = (indexMark * 6)*Math.PI/180   // 6°
            painter2D.save()
            painter2D.beginPath()
            painter2D.rotate(rotatoMarkAngle)                   // 旋转
            painter2D.moveTo(0,backgroundRadius)
            if(indexMark%5==0){painter2D.lineWidth=backgroundRadius*0.03;painter2D.lineTo(0,backgroundRadius*0.95)}
            else{painter2D.lineTo(0,backgroundRadius*0.95)}
            painter2D.stroke();
            painter2D.restore()
        }
        /**************************************************/

        // 释放当前绘制环境
        painter2D.restore()
    }

    function drawCenterPoint(painter2D)
    {
        painter2D.save()
        painter2D.beginPath()           // 必须加入
        painter2D.translate(root.width/2,root.height/2)
        painter2D.arc(0,0,backgroundRadius*0.02,0,360);
        painter2D.fillStyle="#000000";  // 填充色
        painter2D.fill();               // 进行填充
        painter2D.stroke()
        painter2D.restore()
    }

    function drawTime_second(painter2D,seconds)
    {
        let rotatoSecondAngle = (seconds * 6)*Math.PI/180   // 360°/60s＝6°/s

        painter2D.save()
        painter2D.beginPath()                               // 必须加入
        painter2D.translate(root.width/2,root.height/2)     // 变换坐标起始点
        painter2D.rotate(rotatoSecondAngle)                 // 旋转
        painter2D.lineWidth=backgroundRadius*0.01;
        painter2D.moveTo(0,backgroundRadius*0.15)
        painter2D.lineTo(0,-backgroundRadius*0.8)
        painter2D.stroke()
        painter2D.restore()
    }

    function drawTime_minute(painter2D,minute)
    {
        let rotatoMinuteAngle = (minute * 6)*Math.PI/180    // 360°/60m＝6°/m

        painter2D.save()
        painter2D.beginPath()                               // 必须加入
        painter2D.translate(root.width/2,root.height/2)     // 变换坐标起始点
        painter2D.rotate(rotatoMinuteAngle)                 // 旋转
        painter2D.lineWidth=backgroundRadius*0.02;
        painter2D.moveTo(0,backgroundRadius*0.05)
        painter2D.lineTo(0,-backgroundRadius*0.5)
        painter2D.stroke()
        painter2D.restore()
    }

    function drawTime_hour(painter2D,hour)
    {
        let rotatoHourAngle = (hour * 30)*Math.PI/180       // 360°/12h＝30°/h

        painter2D.save()
        painter2D.beginPath()                               // 必须加入
        painter2D.translate(root.width/2,root.height/2)     // 变换坐标起始点
        painter2D.rotate(rotatoHourAngle)                   // 旋转
        painter2D.lineWidth=backgroundRadius*0.03;
        painter2D.moveTo(0,backgroundRadius*0.05)
        painter2D.lineTo(0,-backgroundRadius*0.3)
        painter2D.stroke()
        painter2D.restore()
    }
}

 

关注

笔者 - jxd

 

信必诺
关注
专栏目录
QML Canvas 绘制图像 编程
CodeLancerX的博客
09-21 163
本文将介绍如何使用QML的Canvas元素进行图像绘制编程，并提供相应的源代码示例。在处理函数中，我们首先获取绘图上下文（context），这里我们使用了2D上下文（“2d”）。在该文件中，我们将定义一个Canvas元素，并使用JavaScript编写一些绘图逻辑。通过使用QML的Canvas元素，我们可以方便地进行图像绘制编程。通过设置绘图样式和使用绘图上下文的方法，我们可以创建各种自定义的图形和图像效果。绘制的图像包括一个矩形、一个圆形和一段文本。然后，我们使用绘图上下文的方法绘制了一个矩形。
QML —— Tcp网络通信实例（qml前端，C++后端。附完整源码）
wx微信公众号“码农总动员”，获取更多编程知识
12-29 961
QML —— Tcp网络通信实例（qml前端，C++后端。附完整源码）
QML Canvas 清除画布,重新绘制
yu_20501253的博客
12-15 3854
function clearCanvas() { var ctx = runningWinCanvas.getContext('2d'); ctx.clearRect(0,0,runningWinCanvas.width,runningWinCanvas.height); runningWinCanvas.requestPaint(); }
turtle库--------python
cg_code的博客
11-07 302
turtle库中的函数 turtle.forward()与turtle.backward() turtle.forward(distance) 画笔向前移动distance距离 turtle.backward(distance) 画笔向后移动distance距离 turtle.right() turtle.right(degree) 绘制方向向右旋转degree度 turtle.left() turtle.left(degree) 绘制方向向左旋转degree度 turtle.penup(
qml Canvas（一）
weixin_48657573的博客
09-29 656
quick 中控件都在窗口中显示，所以如果你需要使用画布必须在一个窗口中定义 画布的实现的方式有2种： 第一种：这种是通过getContsxt()方法获得obj // transform.qml import QtQuick 2.5 import QtQuick.Window 2.0 Window{ visible: true; width: 800; height: 500; //定义Canvas obj Canvas { width: 400
qml中Canvas使用示例
qq_23604781的博客
09-06 343
总是忘记Canvas怎么用，每次用了都得去翻资料，干脆自己写一下，方便下次查。
qt qml canvas 实时绘图
10-09
QML是Qt框架的一部分，它提供了一种声明式语言，用于构建用户界面，而Canvas组件则允许我们在界面上进行低级图形绘制。 首先，让我们了解Qt5 QML的基本概念。Qt5是Qt库的一个版本，它提供了丰富的API来开发跨平台的...
QML类型——Canvas
fengyanyu68的博客
07-30 862
正文 提供2D画布的对象，可通过JavaScript进行绘图。 示例： import QtQuick 2.0 Canvas { id: root // canvas size width: 200; height: 200 // handler to override for drawing onPaint: { // get context to draw with var ctx = getContext("2d") // setup the stroke ctx.lineWid
QML Canvas 绘制图像
青春不老，奋斗不止！
06-21 1058
对于 QML Canvas 而言，除了前面讲解的点线面的基本绘制之外，它还提供了一项很有意思的特性 - 绘制图像。只要是 Qt 支持的图片格式都可以使用，比如 PNG、JPEG 等，甚至可以将其它 Canvas 元素生成的图片作为图片源。
QML Canvas 绘制基础形状
青春不老，奋斗不止！
06-16 1344
Canvas 是一个用于在 QML 中绘制图形的元素，它提供了一个依赖于分辨率的位图画布，可用于动画、游戏、数据可视化、图片编辑以及视频处理等方面。
QMLcanvas画板鼠标画图（有预览路径）
10-29
基于qml的canvas画板功能，实现利用鼠标进行画圆画矩形等，有预览路径
qml中使用Canvas绘制饼状图
08-09
在qml中使用Canvas绘制饼状图，可以直接使用qmlscene运行,支持Qt5.5及其以上
画布的重绘和保存
10-17
它的布局仅有一个ImageView和两个Button，布局相当简单。Java代码中实现画布的重绘和保存，保存路径要仔细写。（路径写不对保存的图片找不到）
在QML中使用Canvas
热门推荐
梦起丶的博客
04-18 1万+
【写在前面】 在qml中，要进行一般的绘图，如果不想使用 C++ API，那么就只能使用 Canvas 了。 qml Canvas 提供 HTML5 Canvas 类似的 API，需要修改 HTML5 Canvas 应用程序以在 Canvas项 中运行。 使用 qml 属性绑定或 Canvas 项方法替换所有 DOM API 调用。 使用 MouseArea 项替换所有 HTML 事件处理...
QML之Canvas（画布元素）
DEV_linux的专栏
11-20 3368
Qt5中引进了画布元素（canvas element），允许脚本绘制。画布元素（canvas element） 提供了一个依赖于分辨率的位图画布，你可以使JavaScript脚本来绘制图形，制作游戏或者其它的动态图像。画布元素（canvas element）是基于HTML5的画布元素来完成的。    画布元素（ canvas element）的基本思想是使一个2D对象来渲染路径。
QML类型：Canvas
友善啊，朋友的博客
10-25 2099
一、描述 Canvas 项目允许绘制直线和曲线、简单和复杂的形状、图形和参考图形图像。 它还可以添加文本、颜色、阴影、渐变和图案，并进行低级像素操作。 Canvas 输出可以保存为图像文件或序列化为 URL。 渲染到 Canvas 是使用 Context2D 对象完成的。 二、线程渲染和渲染目标 在 Qt 6.0 中，Canvas 项支持一个渲染目标：Canvas.Image。 Canvas.Image 渲染目标是一个 QImage 对象。 此渲染目标支持后台线程渲染，允许在不阻塞 UI 的情况下
qml 不刷新 放大还原_qml界面-最小化再重新获得焦点-的界面刷新（重绘）问题...
weixin_39633171的博客
01-17 829
问题描述：问题起源于我的之前一篇blog里：QML中利用JavaScript显示当前时间信息最后，我提到在qml中通过js不断的设置Text(或TextEdit)的文本(text)信息来显示当前时间问题，运行时没有问题，但最小化之后再点击程序的图标看到的程序界面上的时间就没有动过了！而在后台它的文本是在不断更改的，可以通过onTextChanged:来打印输出(如console.log(“……”)...
QML编程知识——Quick Canvas元素详解
最新发布
J^T的博客
07-30 1358
Qt Quick Canvas是一个类似于HTML5元素的绘图区域，它允许开发者在Qt Quick应用程序中直接进行2D绘图。Canvas提供了一个依赖分辨率的位图画布，支持画笔、填充、渐变、文本、图像等多种绘制方式。Canvas项目API基于HTML5的canvas元素，通过Context2D对象提供了一系列必要的绘图函数，包括画线、填充、渐变、文字、路径创建等。
提升性能：QML Canvas 绘图优化技巧
梦起丶的博客
04-16 1309
优化QML Canvas绘图性能是确保应用程序流畅运行的关键一环。通过采用上述技巧和策略，你可以提升绘图性能，改善用户体验，并确保应用程序在各种设备上都能够高效运行。只有不断地优化和调整绘图代码，结合性能分析工具的使用，才能使你的应用在绘图方面达到最佳状态。
qml canvas重绘界面闪烁
06-08
QML 中的 Canvas 组件在绘制时默认采用的是懒加载机制，也就是说，只有在需要重绘的时候才会进行绘制。这种机制虽然能够提高性能，但是在一些场景下会出现画面闪烁的问题。 为了解决这个问题，可以通过设置 Canvas 的 `renderStrategy` 属性来改变绘制策略。具体来说，可以将其设置为 `Canvas.Cooperative` 或 `Canvas.Immediate`，这样就可以在每次重绘时立即进行绘制，避免闪烁的问题。 例如： ```qml Canvas { renderStrategy: Canvas.Cooperative // 或者 Canvas.Immediate // ... } ``` 另外，还可以通过设置适当的缓存大小来优化 Canvas 的绘制性能，避免频繁的重绘导致的性能问题。可以试着调整 `cacheBuffer` 属性的大小，找到一个合适的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

信必诺

嗨，支持下哥们呗。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值