找回密码
 立即注册
收起左侧

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

2
回复
30771
查看
[复制链接]
累计签到:1608 天
连续签到:1 天
来源: Qt教程 2019-3-14 18:25:59 显示全部楼层 |阅读模式


导语

这一篇我们来看一下前面经常用到的 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
            }
        }
    }
}

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

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

结语

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



返回目录

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

累计签到:12 天
连续签到:1 天
2019-3-27 11:08:22 显示全部楼层
打卡,等着更新,
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

公告
可以关注我们的微信公众号yafeilinux_friends获取最新动态,或者加入QQ会员群进行交流:190741849、186601429(已满) 我知道了