Qt Quick之可视化坐标系

概念----Qt Quick中的可视化坐标系

Item坐标系

在Qt Quick中，默认的可视化坐标系就是Item坐标系。该笛卡尔坐标系的原点在Item的左上角。X轴朝右，Y轴朝下，因此右下角点的坐标为(width,height)。

单个item的位置通过其父的坐标系统中指定。意味着对于非兄弟item的坐标值x,y需要通过转化到同一坐标系下。场景坐标系常常用作中间坐标系，来完成这个转换。

场景坐标系

场景坐标系坐标原点位于场景渲染的窗口的左上角。窗口中，场景坐标系常常与根节点的item坐标系重合。

使用item的函数可以将item坐标转化到场景坐标系下的坐标。详见Item::mapFromItem和Item::mapToItem实现到场景坐标系的转换或者到其他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坐标系的原点。如果红色矩形是场景的根Item，黑色的点也是场景坐标系的原点。

蓝色矩形的位置在白色的点处，坐标(100,100)是相对于红色矩形的左上角。

绿色矩形没有显式指定x,y值，默认位置为(0,0)。由于它处于其父坐标系的原点处，它处在蓝色矩形的左上角位置。也是白色的点所在的红色矩形坐标系下的(100,100)点。