第7篇 Qt Quick入门教程之基础（七）Rectangle和坐标系统
http://files.qter.org/forum/201902/18/111113cqvyyamqcic8r5yk.jpg.thumb.jpg## 导语
这一篇我们来看一下前面经常用到的 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
}
}
}
}
```
代码运行效果如下图所示。
这里大家主要看一下绿色圆形的边界和蓝色正方形的边界，边框会绘制在矩形的边界之内，所以边框的宽度并不影响矩形的位置和布局。
## 结语
本篇的内容比较简单，不过里面也包含了一些重要的技能，比如在帮助中查看一个项目的文档，以及如何来研究一个属性的具体使用及一些模糊问题。
返回目录
打卡 打卡，等着更新，:loveliness:
页:
[1]