Qt Quick之Canvas

QML中的Canvas,俗称画布,它用来定义一个绘图区域,可以使用ECMAScript代码来绘制直线,矩形,贝塞尔曲线,弧线,图片,文字等图元,还可以为这些图元应用填充颜色和边框颜色,甚至还可以进行低

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

  QML中的Canvas,俗称画布,它用来定义一个绘图区域,可以使用ECMAScript代码来绘制直线,矩形,贝塞尔曲线,弧线,图片,文字等图元,还可以为这些图元应用填充颜色和边框颜色,甚至还可以进行低阶的像素级的操作。

1. 几个重要概念

(1)画布

  下面的代码定义了一个宽320像素高240像素的画布

Canvas
{
    width:320;
    height:240;
}

(2)画师

  画师如同MFC中的DC和Qt C++中的QPainter,那么QML中的画师是谁呢?Content2D是也!可以在Qt帮助文档中使用索引模式查找“Context2D”关键字来查看相关信息。

  方法1: 

Canvas
{
    onPaint:    
    {
        var ctx = getContext("2d");
    }
}

  方法2:

Canvas{
    id:canvas;
    contextType:"2d";

    onPaint:{
        context.lineWidth=2;
    }
}

(3)画笔

  lineWidth:设置画笔的宽度

  strokeStyle:设置画笔颜色或风格

(4)画刷

  在context2D这里,fillStyle属性是描述画刷的

(5)坐标系

  (0,0)为左上角,x轴水平向右为正,y轴垂直向下为正

(6)图元

  基本图元有线,弧,矩形,曲线,文本,图片等

2. 基本绘图模式

 Canvas
    {
        width:400;
        height:240;
        onPaint:
        {
            var ctx = getContext("2d");

            ctx.lineWidth = 2;  // 设置画笔宽度
            ctx.strockStyle="red"; // 设置画笔颜色
            ctx.fillStyle="blue"; // 设置填充色

            ctx.beginPath();
            ctx.rect(100,80,120,80);
            ctx.fill();
            ctx.stroke();
        }
    }

  上面代码演示如何绘制一个矩形和矩形边框,展示了使用Canvas和Context2D绘图的一般步骤:

(1)定义一个Canvas对象,设置width和Height

(2)定义onPaint信号处理器

(3)获取Context2D对象

(4)实际的绘图操作

3. 绘制路径

  使用Content2D绘制路径的一般步骤:

(1)调用beginPath()

(2)调用moveTo(),lineTo(),rect(),quadraticCurveTo(),arc(),bezierCurveTo()等可以构造路径元素的方法

(3)调用fill()或stroke()

  这里主要介绍下fillStyle属性的使用,fillStyle与Qt C++中的QBrush类似,保存用于填充图元的画刷,它可以是一个颜色值,也可以是CanvasGradient或CanvasPattern对象

Canvas
    {
        width: 400;
        height: 240;
        contextType:"2d";
        onPaint:
        {
            var ctx = getContext("2d");
            ctx.lineWidth = 2;
            ctx.lineJoin = "round"
            ctx.strokeStyle = "red";
            ctx.font = "42px sans-serif";

            //ctx.fillStyle = "blue"; // 使用颜色进行填充
            var gradient = ctx.createLinearGradient(100,80,220,160);
            gradient.addColorStop(0, Qt.rgba(255,255,255,1));
            gradient.addColorStop(1, Qt.rgba(0,0,0,1));
            ctx.fillStyle =gradient; // 使用渐变对象进行填充

            ctx.beginPath();
            ctx.moveTo(240,80);
            ctx.lineTo(300,90);
            ctx.rect(100,80,250,150);
            ctx.text("stroke text", 110,120);
            ctx.fill();

            ctx.stroke();
        }
    }

  注意:closePath()方法用于结束当前的路径,从路径终点到起点绘制一条直线来封闭路径,比如:

ctx.beginPath();
ctx.moveTo(100,80);
ctx.lineTo(100,200);
ctx.lineTo(300,200);
ctx.closePath();
ctx.fill();
ctx.stroke();

  通过closePath绘制一个三角形

4. 绘制文本

Context2D对象与文本相关的方法有三个:fillText(),strokeText(),text()

fillText()使用fillStyle填充文字

strokeTexr()使用strokeStyle描文字边框

text()方法在路径上添加一串文本作为构成路径的元素之一

上面代码效果:

Qt Quick之Canvas

5. 绘制图片

  Context2D有4种不同形式的drawImage()方法,可以用来绘制图片

(1)显示本地图片

(2)显示网络图片

Canvas
    {
        width: 600;
        height: 600;
        id:canvas;
        property var imageName: "dartlike_weapon.png";
        property var imageUrl: "http://g2.ykimg.com/0516000053548ED267379F510C0061FA";

        onPaint:
        {
            var ctx = getContext("2d");

            ctx.drawImage(imageUrl, 200,0); // 绘制网络图片

            ctx.drawImage(imageName, 0,200);   // 绘制本地图片
        }

        Component.onCompleted:
        {
            loadImage(imageUrl);  // 异步加载图片,图片加载完发射imageLoaded信号
            loadImage(imageName);
        }

        onImageLoaded:
        {
            requestPaint();  // 重绘Canvas
        }
    }

  上面的代码演示了显示本地和网络图片,Component.onCompleted附加信号处理器内调用Canvas的loadImage()方法来加载图片,该方法会异步加载图片,当图片加载完成时,发射imageLoaded信号,在对应的信号处理器onImageLoaded内调用requestPainte()方法来重回Canvas.怎样知道图片是否加载成功了呢?可以通过Canvas的isImageError(),isImageLoaded()两个方法来判断,他们接受和loadImage()同样的参数,返回布尔值,只有成功加载的图片才可以使用Context2D来绘制。

(3)使用Image属性显示网络图片

    Image
        {
            id:imageSource;
            source: "http://g2.ykimg.com/0516000053548ED267379F510C0061FA";
            visible: false;
            onStateChanged: {
                if(status == Image.Ready)
                {
                    canvas.requestPaint();
                }
            }
        }

(4)使用createImageData显示图像

  drawImage还可以绘制CanvasImageData对象,CanvasImageData对象使用一维数组,按照RGBA的顺序来保存图像数据

    onPaint:
        {
            var ctx = getContext("2d");

            if(imageData == null)
            {
                imageData = ctx.createImageData(120,100);
                for (var i = 0;i < 48000;i+=4)
                {
                    imageData.data[i] = Math.floor(Math.random()*255);
                    imageData.data[i+1] = Math.floor(Math.random()*255);
                    imageData.data[i+2] = Math.floor(Math.random()*255);
                    imageData.data[i+3] = 255;
                }
            }

            ctx.drawImage(imageData,0,0);   // 绘制createImageData
        }

(5)4种方法的综合实例

Qt Quick之Canvas
Qt Quick之Canvas

import QtQuick 2.9
import QtQuick.Window 2.2

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

    Canvas
    {
        width: 600;
        height: 600;
        id:canvas;
        property var imageName: "dartlike_weapon.png";
        property var imageUrl: "http://g2.ykimg.com/0516000053548ED267379F510C0061FA";

        Image
        {
            id:imageSource;
            source: "http://g2.ykimg.com/0516000053548ED267379F510C0061FA";
            visible: false;
            /*onStateChanged: {
                if(status == Image.Ready)
                {
                    canvas.requestPaint();
                }
            }*/
        }

        property var imageData: null;
        onPaint:
        {
            var ctx = getContext("2d");

            if(imageData == null)
            {
                imageData = ctx.createImageData(120,100);
                for (var i = 0;i < 48000;i+=4)
                {
                    imageData.data[i] = Math.floor(Math.random()*255);
                    imageData.data[i+1] = Math.floor(Math.random()*255);
                    imageData.data[i+2] = Math.floor(Math.random()*255);
                    imageData.data[i+3] = 255;
                }
            }

            ctx.drawImage(imageData,0,0);   // 绘制createImageData
            ctx.drawImage(imageUrl, 200,0); // 绘制网络图片

            ctx.drawImage(imageSource, 200,200); // 绘制image属性
            ctx.drawImage(imageName, 0,200);   // 绘制本地图片
        }

        Component.onCompleted:
        {
            loadImage(imageUrl);  // 异步加载图片,图片加载完发射imageLoaded信号
            loadImage(imageName);
            loadImage(imageSource);
        }

        onImageLoaded:
        {
            requestPaint();  // 重绘Canvas
        }
    }
}

View Code

Qt Quick之Canvas

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120076.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • pycharm安装2021最新详细教程小白入门「建议收藏」

    pycharm安装2021最新详细教程小白入门「建议收藏」一、官网下载安装包Pycharm的官网(https://www.python.org/),这个链接进去直接是下载界面:https://www.jetbrains.com/pycharm/download/1、专业版(Professional)是收费的,但是可以试用一个月,包括了所有PyCharm的功能。2、社区版(Community)是免费的,但是比专业版少了一部分功能。例如:Web开发,科学工具,PythonWeb框架,Python代码分析,远程开发能力,数据库和SQ…

  • hadoop生态系统的详细介绍-详细一点[通俗易懂]

    前提日常喜欢看一些微信分享的好文,总结下来,可以作为过滤器吧(节约更多人的时间!),在这里引用的是别人的文章!对原文的作者表示感谢!确实写的很好!hadoop生态系统的详细介绍简介Hadoop是一个开发和运行处理大规模数据的软件平台,是Appach的一个用java语言实现开源软件框架,实现在大量计算机组成的集群中对海量数据进行分布式计算。今天我们来详细介绍下hadoop的生态系统。Hadoop生态…

  • sftp连接指定端口_sftp传输文件命令

    sftp连接指定端口_sftp传输文件命令sftp-oPort=50022username@ip

  • Spring事务传播性详解

    Spring事务传播性详解

  • 算法的力量

    算法的力量李开复 算法是计算机科学领域最重要的基石之一,但却受到了国内一些程序员的冷落。许多学生看到一些公司在招聘时要求的编程语言五花八门就产生了一种误解,认为学计算机就是学各种编程语言,

    2021年12月26日
  • springboot 注解_pagehelper分页原理

    springboot 注解_pagehelper分页原理案例环境jdk1.8,mysql8.0,idea(工具),springboot,mybatis-plus详情看pom.xml项目结构结构解释项目由网关,公共依赖模块,和商品的优惠券,商品服务,订单服务,仓储服务和会员服务组成(案例测试使用shop-product,common),父工程为聚合工程不作为依赖管理一、common模块(组件可在人人开源项目中获取renrne-fast),common是一个基础maven项目pom.xml(common)<?xm.

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号