导语
这一篇我们来看一下前面经常用到的 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::mapFromItem 和 Item::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
}
}
}
}
代码运行效果如下图所示。
这里大家主要看一下绿色圆形的边界和蓝色正方形的边界，边框会绘制在矩形的边界之内，所以边框的宽度并不影响矩形的位置和布局。
结语
本篇的内容比较简单，不过里面也包含了一些重要的技能，比如在帮助中查看一个项目的文档，以及如何来研究一个属性的具体使用及一些模糊问题。
返回目录
| 
