一、锚点

Node元素的锚点决定了Node上的哪个点的位置在Node的坐标上。
锚点取值于Node本地坐标系，(0, 0) ~ (1, 1)之间。
一般Node元素的锚点都在(0.5, 0.5)，即元素的中心在节点的坐标位置上。
锚点和position决定了元素在屏幕上的区域。锚点还决定了元素的变换操作，如旋转，缩放。
点击查看【processon】

二、坐标系

1、世界坐标系（OpenGL坐标系）

屏幕左下角为原点，右手坐标系。
点击查看【processon】

2、本地坐标系（相对坐标系）

即元素相对于父元素的坐标。一般，我们都是设置元素相对于父节点的位置。在绘制的时候，引擎会根据UI树对每个元素执行坐标变换，得到世界坐标，然后将位置信息发送给OpenGL ES，在正确的区域绘制元素。
点击查看【processon】

3、屏幕坐标系

屏幕左上角为原点。
点击查看【processon】

三、坐标转换

1、世界坐标 -> 本地坐标

  2. // 世界坐标转成node1的本地坐标
  3. node1->convertToNodeSpace(const Vec2& worldPoint) const;
  5. // 世界坐标转成node1锚点为原点坐标系中的坐标。
  6. node1->convertToNodeSpaceAR(const Vec2& worldPoint) const;

2、本地坐标 -> 世界坐标

  2. // node1的本地坐标nodePoint转成世界坐标
  3. node1->convertToWorldSpace(const Vec2& nodePoint) const;
  4. node1->convertToWorldSpace(Vec2::ZERO);        //node1左下角的世界坐标。
  6. // node1锚点为原点坐标系中的坐标nodePoint转成世界坐标
  7. node1->convertToWorldSpaceAR(const Vec2& nodePoint) const;
  8. node1->convertToWorldSpaceAR(Vec2::ZERO);    //node1的世界坐标。

3、本地坐标 -> UI坐标

  2. // 将node1为本地坐标转成UI坐标，UI坐标系如下：
  3. // UI.x:    屏幕X方向上的坐标
  4. // UI.y:    屏幕Y方向上的坐标
  5. // 0 <= UI.x <= designSize.x * contentScaleFactor
  6. // 0 <= UI.y <= designSize.y * contentScaleFactor
  7. // 坐标原点在屏幕的左上角
  8. node1->convertToWindowSpace(const Vec2& nodePoint) const;

4、UI坐标 -> GL坐标

  2. Director::getInstance()->convertToGL(const Vec2 &uiPoint);