找回密码
 立即注册
  • QQ空间
  • 回复
  • 收藏

第7篇Qt Quick入门教程之基础(七)Rectangle和坐标系统

admin 2019-3-13 08:10 744人围观 Qt相关



导语


不知不觉中春天已经来了,突然的一个晴天,久违的蓝天白云,让一切都显得那么美好!建议大家抽时间出去走走,感受一下大自然的美好和无限生机!



这一篇我们来看一下前面经常用到的 Rectangle 项目,在讲解中还会涉及坐标系统的基本概念。

可视化画布 (The visual Canvas)


在前面的示例中我们已经看到,Qt Quick界面的左上角的坐标为 (0, 0) ,也就是常说的原点。在这里我们做一个规范点的总结:

Qt Quick提供了一个拥有 z 排序的二维可视画布,它包含两个坐标系统,分别是项目坐标和场景坐标。

  • 项目坐标(Item Coordinates)

    Qt Quick中使用的默认可视化坐标系统是项目坐标,这是一个笛卡尔坐标系统,在项目的左上角是原点 (0, 0),X轴向右增大,Y轴向下增大,所以项目的右下角是坐标 (width, height) 。而一个独立的项目的位置是由其父项目来指定的,简单来说,其父项目的左上角是其原点。

  • 场景坐标(Scene Coordinates)

    渲染场景的窗口的左上角是场景的原点 (0, 0),一般来说,场景坐标与窗口中的根项目的坐标相同。如果需要进行坐标转换,可以使用 Item::mapFromItemItem::mapToItem 方法进行。

下面再通过一段代码来具体看一下坐标系统:
Window {
    visible: true
    width: 200
    height: 200

    Rectangle {
        width: 200
        height: 200
        color: "red"

        Rectangle {
            x: 100
            y: 100
            width: 100
            height: 100
            color: "blue"

            Rectangle {
                width: 50
                height: 50
                color: "green"
            }
        }
    }
}

代码运行效果如下图所示。



红色矩形没有指定x、y属性,默认值均为0,所以其原点就在窗口的左上角,这时左上角也是场景的原点;蓝色矩形放置在了其父项目也就是红色矩形的 (100, 100) 点;绿色矩形也没有指定x、y属性,所以默认也会放置在(0, 0)点,但是因为它的父项目为蓝色矩形,所以它在蓝色矩形的左上角。

Rectangle


Rectangle可以说是Qt Quick中最简单的可视化项目之一,它可以使用纯色或渐变色来填充一个区域,并且可以提供一个矩形的边框。在帮助文档中索引关键字 Rectangle ,可以查看该项目的的介绍,开头如下图所示:



这里的 Import Statement: import QtQuick 2.12 表明要使用该项目需要添加 import QtQuick 2.12 导入语句;而 Inherits: Item 表明该项目继承自 Item ; 下面的 List of all members, including inherited members 表明可以点击查看该项目的包括从父项目继承过来的所有成员;而下面 Properties 中是Rectangle特有的属性。可以看到除了从Item继承过来的属性之外,它只包含下面几个属性:


  • antialiasing : bool

  • border

    • border.width : int

    • border.color : color

  • color : color

  • gradient : any

  • radius : real

先看 color 和 gradient 属性,前者用来设置纯色,后者用来设置渐变色;border 是属性组,包括边框宽度 border.width 和边框颜色 border.color ,默认是没有边框的,除非设置了边框宽度,但如果边框宽度设置为很大的值会怎样呢?大家先思考下;然后是 radius,用于绘制圆角矩形的角半径,四个角会同时使用相同的角半径,角半径要设置为多少合适呢?这个大家也可以自己研究下;当绘制圆角矩形时 antialiasing 属性默认为 true,用于抗锯齿,否则为 false,所以一般这个属性不用设置。

下面来看一个例子:
Window {
    visible: true
    width: 700
    height: 500

    Rectangle {
        anchors.fill: parent
        color: "red"

        Rectangle {
            x: 200
            y: 100
            width: 300
            height: 300
            color: "blue"
            border { color: "white"; width: 10 }

            Rectangle {
                width: 300
                height: 300
                color: "green"
                radius: 150
            }
        }
    }
}

代码运行效果如下图所示。



这里大家主要看一下绿色圆形的边界和蓝色正方形的边界,得到结论:边框会绘制在矩形的边界之内,所以边框的宽度并不影响矩形的位置和布局。

结语


本篇的内容比较简单,不过里面也包含了一些重要的技能,比如在帮助中查看一个项目的文档,以及如何来研究一个属性的具体使用及一些模糊问题。

相关文章


第6篇 Qt Quick入门教程之基础(六)Qt Quick模块之Item




----------------------------------------------------------------------------------------------------------------------
我们尊重原创,也注重分享,文章来源于微信公众号:yafeilinux和他的朋友们,建议关注公众号查看原文。如若侵权请联系qter@qter.org。
----------------------------------------------------------------------------------------------------------------------

鲜花

握手

雷人

路过

鸡蛋

yafeilinux和他的朋友们微信公众号二维码

微信公众号

专注于Qt嵌入式Linux开发等。扫一扫立即关注。

Qt开源社区官方QQ群二维码

QQ交流群

欢迎加入QQ群大家庭,一起讨论学习!

我有话说......