坐标转换

这部分主要是说明视口坐标、Canvas 坐标和页面坐标之前的相互转换。其中视口坐标和 Canvas 坐标的示意图如下所示。

getPointByClient(clientX, clientY)

将屏幕/页面坐标转换为视口坐标。

参数

返回值

• 返回值类型：Object；
• 包含的属性：x 和 y 属性，分别表示视口的 x 、y 坐标。

用法

const point = graph.getPointByClient(e.clientX, e.clientY);
console.log('视口x/y坐标分别为:', point.x, point.y);

getClientByPoint(x, y)

将视口坐标转换为屏幕/页面坐标。

参数

返回值

• 返回值类型：Object；
• 包含的属性：x 和 y 属性，分别表示屏幕/页面的 x、y 坐标。

用法

const point = graph.getClientByPoint(100, 200);
console.log('屏幕/页面x/y坐标分别为:', point.x, point.y);

getPointByCanvas(canvasX, canvasY)

将 Canvas 画布坐标转换为视口坐标。

参数

返回值

• 返回值类型：Object；
• 包含的属性：x 和 y 属性，分别表示视口的 x、y 坐标。

用法

const point = graph.getPointByCanvas(100, 200);
console.log('视口x/y坐标分别为:', point.x, point.y);

getCanvasByPoint(x, y)

将视口坐标转换为 Canvas 画布坐标。

参数

返回值

• 返回值类型：Object；
• 包含的属性：x 和 y 属性，分别表示 Canvas 画布的 x、y 坐标。

用法

const point = graph.getCanvasByPoint(100, 200);
console.log('Canvas画布的x/y坐标分别为:', point.x, point.y);