坐标系

概述

在 G6 5.0 中主要会涉及三个坐标系：画布坐标系(Canvas)、视口坐标系(Viewport)和浏览器坐标系(Client)。

G6 元素绘制时所使用的坐标系，其不受相机缩放、平移的影响，要改变一个元素的位置，需要直接修改元素的位置属性(x/y/z)。

画布空间理论上是无限大的，在初始状态下（无平移、缩放倍率为1），画布坐标系的原点位于视口左上角位置。

视口坐标系是相机坐标系的投影，当相机发生平移、缩放时，画布中元素位置在视口坐标系中的位置也会发生变化。

视口的大小即画布 DOM 容器的大小，视口坐标系的原点位于视口左上角位置，x 轴正方向向右，y 轴正方向向下。

viewport

浏览器坐标系以浏览器左上角为原点，x 轴正方向向右，y 轴正方向向下。

下图描述了视口坐标系和浏览器坐标系之间的关系：

G6 提供了坐标系转换的方法，可以方便地在不同坐标系之间进行转换。

另外还提供了其他相关 API：