Qt Quick系列(9)—初识画布

这篇具有很好参考价值的文章主要介绍了Qt Quick系列(9)—初识画布。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

🚀作者:CAccept
🎂专栏:Qt Quick
Qt Quick系列(9)—初识画布,Qt Quick,Qt,qt,ui,c++

前言

画布元素的基本思想是使用上下文2D对象(ctx)渲染路径。上下文2D对象包含必要的图形功能,而画布充当绘图画布。
在QML中,画布元素(canvas element)充当了绘制的容器。2D绘制对象(ctx)提供了实际绘制的方法。绘制需要在onPaint中完成,接下来将通过两个代码示例来说明画布元素应该怎么用👇

本博客中工程使用的环境为:qt6 + Qt Creator10.0.1


代码示例1

在这个代码中主要是讲解怎么进行对画布的基本操作:获取上下文设置画笔的各种属性画笔的移动绘制图片以及渐变色的使用。可以先看下代码,代码中的注释也已经很清楚了,后续也有对一些知识点的总结。

源码

import QtQuick 2.12
import QtQuick.Window 2.12

//画布
Canvas
{
    id:root
    width: 200;
    height: 200;
    onPaint:
    {
        //获取上下文对象
        var ctx = getContext("2d")
        //设置线条宽度
        ctx.lineWidth = 4
        //边框颜色
        ctx.strokeStyle="blue"
        //内部颜色
        ctx.fillStyle = "steelblue"
        //对上面的设置进行保存
        ctx.save()
        ctx.fillStyle = "red"
        //开始第一个阶段的绘制
        ctx.beginPath()
        //将笔移动到(50,50)位置
        ctx.moveTo(50,50);
        //画线
        ctx.lineTo(150,50);
        ctx.lineTo(150,150);
        ctx.lineTo(50,150);
        //将上面画的线围成一篇区域变成一个正方形进行绘制
        ctx.fill()
        ctx.closePath();
        ctx.beginPath();
        //轮廓线的颜色改为“红色”
        //画起点20,20,宽高各80的矩形
        ctx.fillRect(20,20,80,80);
        //起点30,30宽高60的区域内进行镂空
        ctx.clearRect(30,30,60,60);
        //用笔尖描出来的矩形
        ctx.strokeRect(20,20,40,40);
        ctx.closePath()

        //将保存的信息进行加载
        ctx.restore()
        ctx.fillRect(10,10,20,20);

        //创建线性渐变,从(0,0)开始到(0,height)进行渐变(其实就是整个画布的区域)
        var gradient = ctx.createLinearGradient(0,0,0,root.height)
        gradient.addColorStop(0,"blue");
        gradient.addColorStop(1,"lightblue");
        ctx.fillStyle=gradient
        ctx.fillRect(50,50,100,100);
        ctx.fillRect(100,0,100,100);
        ctx.fillRect(0,100,100,100);

        //对创建好的路径进行填充操作,将路径内部的区域填充上指定的颜色或样式。
        ctx.fill()
        //对创建好的路径进行填充操作,将路径内部的区域填充上指定的颜色或样式。
        ctx.stroke();
    }

}

运行效果:
Qt Quick系列(9)—初识画布,Qt Quick,Qt,qt,ui,c++

关键知识点

1、在进行位置设置(moveTo)或者是线条(lineTo)设置时,可以采用beginPath和closePath进行分段,在内部设置

ctx.beginPath()
//将笔移动到(50,50)位置
ctx.moveTo(50,50);
//画线
ctx.lineTo(150,50);
ctx.lineTo(150,150);
ctx.lineTo(50,150);
//将上面画的线围成一篇区域变成一个正方形进行绘制
ctx.fill()
ctx.closePath();

2、保存设置和恢复保存的设置使用save和restore

//保存前面的设置
ctx.save()
...
...
//恢复设置
ctx.restore()

3、ctx.fill()的作用是对创建好的路径进行填充操作,将路径内部的区域填充上指定的颜色或样式,ctx.stroke()是对外部轮廓填充上制定的颜色和样式,分别使用ctx.fillStyle和ctx.strokeStyle进行设置。


代码示例2

在这个代码中主要实现的功能是实现类似画图软件的选择颜色画线功能,选择指定的颜色,画笔的颜色就会发生改变。

源码

ColorSquare.qml

import QtQuick 2.0
import QtQuick.Controls 2.0
Button
{
    width: 100;
    height: 100
    property alias color: bg.color
    Rectangle
    {
        id:bg
        width: 80
        height: 80
        opacity:0.7
        anchors.centerIn: parent
    }
}

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
Rectangle
{
    width:500
    height:500

    Row{
        id:colorTools
        anchors
        {
            horizontalCenter:parent.horizontalCenter
            top:parent.top
            topMargin:8
        }
        property color paintColor: "blue"
        Repeater
        {
            model:['blue','gray','yellow','green']
            ColorSquare{
                color:modelData
                //看它是否为color来决定是否要放下去
                down:parent.paintColor===color
                onClicked: parent.paintColor=color
            }
        }

    }

    Canvas{
        id:canvas
        anchors
        {
            left:parent.left
            right:parent.right
            top:colorTools.bottom
            bottom:parent.bottom
            margins:8
        }
        property real lastY
        property real lastX
        property color color:colorTools.paintColor
        onPaint:
        {
            var ctx = getContext("2d")
            ctx.lineWidth = 1.5
            ctx.strokeStyle=canvas.color
            ctx.beginPath()
            ctx.moveTo(lastX,lastY)
            lastX = area.mouseX
            lastY=area.mouseY
            ctx.lineTo(lastX,lastY)
            ctx.stroke()
        }


        MouseArea{
            id:area
            anchors.fill:parent
            onPressed:
            {
                canvas.lastX=mouseX;
                canvas.lastY=mouseY;
            }
            //当鼠标位置发生改变就重新绘制一遍(再次执行onPaint)
            onPositionChanged:canvas.requestPaint();
        }
    }
}

运行效果:
Qt Quick系列(9)—初识画布,Qt Quick,Qt,qt,ui,c++

关键知识点

1、使用canvas.requestPaint()的话,就会重新触发一次onPaint

MouseArea{
    id:area
    anchors.fill:parent
    onPressed:
    {
        canvas.lastX=mouseX;
        canvas.lastY=mouseY;
    }
    //当鼠标位置发生改变就重新绘制一遍(再次执行onPaint)
    onPositionChanged:canvas.requestPaint();
}

2、Button有down方法,这样颜色会加深一些,可以区别于那些没有down的按钮,以下就是第一个按钮有down的情况👇
Qt Quick系列(9)—初识画布,Qt Quick,Qt,qt,ui,c++


总结

本篇博客到此结束,感谢您看到这,希望本篇文章对您能够有所帮助,有疑问或者是文章本身存在问题的话请在评论区中提出来,谢谢(*^_^*)
Qt Quick系列(9)—初识画布,Qt Quick,Qt,qt,ui,c++文章来源地址https://www.toymoban.com/news/detail-525182.html

到了这里,关于Qt Quick系列(9)—初识画布的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Qt6 Qt Quick UI原型学习QML第七篇

    导入 QtQuick 2.12 导入 QtQuick.Window 2.12 导入 QtQuick.Controls 2.12 导入 QtQuick.Layouts 1.3 导入 Qt.labs.calendar 1.0 矩形 { id: root 属性 int duration: 3000 } 这段代码使用了QtQuick库来创建一个用户界面。其中的Rectangle是界面的根元素。 id: root : 为Rectangle元素指定唯一的标识符root。 property int durat

    2024年02月16日
    浏览(40)
  • Qt6 Qt Quick UI Prototype学习QML第一篇

    创建一个具有QML入口点的Qt Quick 2 UI项目。要使用它,您需要设置一个QML运行时环境,例如gmlscene。 仅当您正在进行原型设计时才使用此功能。您无法使用此创建完整的应用程序。请考虑使用Qt Quick application项目 Qt Quick UI原型主要用于快速创建交互式的用户界面(UI)原型。它

    2024年02月16日
    浏览(49)
  • Qt Quick系列(7)—Model-View

    🚀作者:CAccept 🎂专栏:Qt Quick 在QML中,model和view由delegate连接,他们的关系如下👇 1、delegate 属性:delegate知道model的内容以及如何可视化它- 怎么显示 。 2、view知道delegate的概念以及如何布置它们- 怎么摆放 。 3、model属性:model只知道它所表示的数据- 要显示的内容集合 。

    2024年02月12日
    浏览(39)
  • C++系列三:QT初识2

    目录 代码参考: 前言: 我可没说放弃

    2024年02月10日
    浏览(44)
  • Qt Quick 项目(第二集Qt Quick Application创建)

    上集回顾 Qt Quick 项目(第一集Qt Quick UI 项目项目创建)     如果将程序的用户界面称为前端,将程序中的数据存储和业务逻辑称为后端,那么传统Qt应用程序的前端和后端都是使用C++来完成的。对于现代软件开发而言,这里有一个存在已久的冲突:前端的演化速度要远快于后

    2024年01月25日
    浏览(40)
  • Qt Quick程序的发布|Qt5中QML和Qt Quick 的更改

    # Quick程序的发布旧版做法 # Qt5中QML和Qt Quick 的更改 1.QML语言的更改(Qt4-Qt5)     在QML语言中,只有少量更改会影响QML代码的迁移:无法直接导入单独的文件(例如:import\\\"MyType.qml”),需要导人该文件所在的目录;     JavaScript文件中的相对路径被解析为相对于该JavaScrip

    2024年01月25日
    浏览(50)
  • QT Quick之quick与C++混合编程

            Qt quick能够生成非常绚丽界面,但有其局限性的,对于一些业务逻辑和复杂算法,比如低阶的网络编程如 QTcpSocket ,多线程,又如 XML 文档处理类库 QXmlStreamReader / QXmlStreamWriter 等等,在 QML 中要么不可用,要么用起来不方便,所以就有了quick和C++混合编程的需求。

    2024年02月12日
    浏览(41)
  • Qt Quick 3D简介

    Qt Quick 3D是Qt自带的一套3D图形系统,与传统的Qt 3D不同的是,Qt Quick 3D采用QML来进行开发。本节则对Qt Quick 3D进行一次简单的介绍。 在main.qml中设置整个场景(entire scene)。 在使用Qt Quick 3D之前,为了能够使用QtQuick3D模块中的类型,我们必须导入它: 为了绘制任何3D场景,我们需

    2024年02月13日
    浏览(34)
  • Qt Quick - StackView

    StackView可以与一组相互链接的信息页面一起使用。例如,电子邮件应用程序具有单独的视图,以列出最新的电子邮件,查看特定的电子邮件和列表/查看附件。当用户打开电子邮件时,电子邮件列表视图被压入栈中,当用户选择返回时,电子邮件列表视图又被弹出。 下面的代

    2023年04月17日
    浏览(86)
  • 【五一创作】QML、Qt Quick /Qt中绘制圆形

    有多种方法可以在 Qt Quick 中绘制圆形。以下是一些主要方法: 使用 Canvas 元素 使用 Shapes 模块: a. 使用 PathArc 和 PathLine 元素组合绘制一个完整的圆形。 b. 使用 PathEllipse 元素绘制一个椭圆形,并将其设置为圆形。 使用 Rectangle 元素绘制圆角矩形并将圆角半径设置为宽度和高

    2024年02月03日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包