Qt Quick自学子路(二)-Qt Quick画布

Qt Quick提供了一个画布的概念，这个画布是一个二维画布，所有控件都是在画布中绘制的。

一、Qt Quick坐标系统

1、Item坐标系统

每个可视项都有一个局部坐标系，这个坐标系是一个以可视项左上角为原点，x轴指向右方，y轴指向下方的笛卡尔坐标系。

每一个可视项的位置都是在它的父可视项的坐标系中指定的。如果一个可视项想要读取它的兄弟可视项坐标系中的一个点的坐标，则需要将这个点的坐标进行转换。可以选择一个包含两个可视项的一个公共坐标系作为转换的目标坐标系。这样才能对这个点的坐标进行处理。通常会选用场景坐标系作为中间转换坐标系。

2、场景坐标系

场景坐标系是以当前显示可视项的窗体的左上角为原点，x轴指向右侧，y轴指向下方的一个笛卡尔坐标系。通常场景坐标系与窗体的根可视项的Item坐标系相同。

下面结合一个QML程序来讲解这两个坐标系统：

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"
        }
    }
}

在这个例子中，红色方框为根可视项，因此它的坐标系与场景坐标系相同。图中的黑点在红色方框Item坐标系和场景坐标系中的坐标都是(0,0)。蓝色方框的父可视项为红色方框。蓝色方框的x属性及y属性都是100，因此，它左上角坐标在红色方框Item坐标系统中的坐标为（100，100）。绿色方框的父可视项为蓝色方框，因为没有指定绿色方框的x及y属性，因此绿色方框左上角在蓝色方框Item坐标系中的坐标为（0，0）。图中，白色点在蓝色及绿色方框Item坐标系中的坐标都是（0，0），在红色方框Item坐标系及场景坐标系中的坐标都是（100，100）。

二、Qt Quick视觉父项

在Qt Quick模块中，Item对象类型是所有其他对象类型的基础类型。在Qt Quick模块中，所有对象类型都是从Item对象类型派生的。Item类型有一个parent属性。所有Qt Quick对象类型都继承了这个parent属性。这个parent属性描述了一个可视项的父项。前面Item坐标系中提到过，所有可视项的位置都是在它的父项Item坐标系中描述的。这里提到的父项就是通过可视项的parent属性指定的。所有可视项对象通过这个parent属性形成了一个可视层级。在一个窗体中，窗体的QQuickWindow::contentItem属性指向可视层级的根可视项。只有在这个层级中的子项才会在窗体中显示。

Item对象类型有一个data默认属性。当把子对象赋值给data属性时，这个子对象也会被加入到Item::children 属性中。因此，这个子对象会被挂接到当前可视项所在的可视层级中。因为data是一个默认属性，因此，通常不需要显示将子对象赋值给data属性。

当一个可视项成为另一个可视项的子项时，这个可视项的parent属性指向另一个可视项，另一个可视项的Item::children属性包含这个可视项。

QObject类也有一个parent成员变量，这个成员变量和Item对象类型的parent属性是相互独立的。QObject类的parent成员变量确定了一个QObject对象层级，当一个对象的父对象被析构时，子对象也会相应被析构。

除了特殊对象类型外（如Row对象类型），父可视项通常不会对子可视项的位置进行调整。如果父项没有将clip属性设置为true，那么他也不会对子项进行裁剪。

当可视项相互重叠，哪个可视项在上，哪个可视项在下是通过一套规则控制的：可视项间上下关系取决于它们的父项是谁，以及兄弟可视项的先后创建顺序，以及可视项的z属性值。

如果不设置z属性，那么子可视项会出现在父可视项的上方，后创建的兄弟可视项出现在先创建的兄弟可视项的上方。以下是一个例子：

Rectangle {
    color: "#272822"
    width: 320
    height: 480

    Rectangle {
        y: 64
        width: 256
        height: 256
        color: "green"
    }

    Rectangle {
        x: 64
        y: 172
        width: 256
        height: 256
        color: "blue"
    }
}

在这个例子中，深色方框是绿色及蓝色方框的父可视项，因此它出现在最下方。绿色方框与蓝色方框互为兄弟可视项。绿色方框比蓝色方框先创建，所以它出现在蓝色方框的下面。

当可视项设置了z属性，那么他与兄弟项及父项的上下关系将受z属性值影响。z属性大的兄弟项出现在上方，z属性小的兄弟项出现在下方。如果z属性小于零，那么它将出现在父可视项的下方。z属性只是影响可视项与父项及兄弟项间的上下关系，不影响他与其他可视项之间的上下关系。以下是一个通过z属性值影响可视项上下关系的例子：

Rectangle {
    color: "#272822"
    width: 320
    height: 480

    Rectangle {
        y: 64
        z: 1
        width: 256
        height: 256
        color: "green"

        Rectangle {
            x: 192
            y: 64
            z: 2000
            width: 128
            height: 128
            color: "red"
        }
    }

    Rectangle {
        x: 64
        y: 192
        z: 2
        width: 256
        height: 256
        color: "blue"
    }
}

在以上这个例子中，虽然红色方框比蓝色方框z属性值大。但是，他仍然出现在蓝色方框下方，因为蓝色方框既不是它的兄弟可视项也不是它的父可视项，因此，z属性不影响他们之间的上下关系。