概述

本文档主要向大家介绍 G6 的坐标转换，如有描述不清楚、有误的地方欢迎大家在 GitHub 上提 Issue 指正，或是直接 PR 修缮。根据您的贡献度，我们会视情况将您加入 AntV 共建者名录 :-)

概念坐标详解 - 图2

在使用 G6 的过程中，如果你需要结合自定义的 dom 元素做一些额外的订制。你可能需要知道三个坐标系：

  • 窗口坐标系，其定义和原生 dom 事件的定义一致，用 (clientX, clientY) 表示。

  • 容器坐标系，指 graph 所在容器的坐标系，在 G6 中这部分坐标会用 (domX, domY)表示，单位是像素。

  • 图坐标系是最关键的坐标，也是 G6 使用过程中最常用、最一般的坐标系，它决定了图项之间基本的位置关系。

接口介绍

G6 提供了一套图坐标系与其它坐标系之间相互转换的接口。开发者可以通过这些接口轻易地完成其它坐标与图坐标系之间的正向转换和反向转换。

正向变换 — 其它坐标系到图坐标系

  1. getPointByDom(domPoint);        // dom 坐标转换为图坐标
  2. getPointByClient(clientPoint);  // client 坐标转换为图坐标

反向变换 — 图坐标系到其它坐标系

  1. getDomPoint(domPoint);         // 图坐标转换为 dom 坐标
  2. getClientPoint(clientPoint);   // 图坐标转换为窗口坐标