Skip to content

坐标转换

世界坐标page 坐标本地坐标内部坐标box 坐标 的互相转换。

支持 转换移动距离、 在 Leafer 中 转换浏览器坐标。另提供了 快速转换 的高性能方法。

关键方法

page 坐标

getPagePoint ( worldPoint: IPointData ): IPointData

获取 page 坐标(传入一个 世界坐标 转换)。

getWorldPointByPage ( pagePoint: IPointData ): IPointData

获取世界坐标(传入一个 page 坐标 转换)。

box 坐标

getBoxPoint ( worldPoint: IPointData ): IPointData

获取 box 坐标(传入一个 世界坐标 转换)。

getBoxPointByInner ( innerPoint: IPointData ): IPointData

获取 box 坐标(传入一个 内部坐标 转换)。

内部坐标

getInnerPoint ( worldPoint: IPointData ): IPointData

获取内部坐标(传入一个 世界坐标 转换)。

getInnerPointByLocal ( localPoint: IPointData ): IPointData

获取内部坐标(传入一个 本地坐标 转换)。

getInnerPointByBox ( boxPoint: IPointData ): IPointData

获取内部坐标(传入一个 box 坐标 转换)。

本地坐标

getLocalPoint ( worldPoint: IPointData ): IPointData

获取本地坐标(传入一个 世界坐标 转换)。

getLocalPointByInner ( innerPoint: IPointData ): IPointData

获取本地坐标(传入一个 内部坐标 转换)。

世界坐标

getWorldPoint ( innerPoint: IPointData ): IPointData

获取世界坐标(传入 内部坐标 转换)。

getWorldPointByLocal ( localPoint: IPointData ): IPointData

获取世界坐标(传入 本地坐标 转换)。

getWorldPointByBox ( boxPoint: IPointData ): IPointData

获取世界坐标(传入 box 坐标 转换)。

可选参数

所有转换方法都支持。

相对元素

第二个可选参数:relative?: UI

将 relative 元素假设为世界坐标系,可以实现子级到任意一个父级坐标系之间的转换。

转换移动距离

第三个可选参数: distance?: boolean

直接修改坐标

第四个可选参数:change?: boolean

直接修改传入的坐标返回,可以节省创建新对象的开销。

相关

在 Leafer 中 转换浏览器坐标

归属

UI

示例

获取内部坐标

ts
const rect = new Rect({ x: 50, y: 50, scale: 5 })

const worldPoint = { x: 100, y: 100 }
const innerPoint = rect.getInnerPoint(worldPoint) // {x: 10, y: 10}

获取 frame 坐标

使用第二个可选参数:relative?: UI

将 relative 元素假设为世界坐标系,可以实现子级到任意一个父级坐标系之间的转换。

ts
const frame = new Frame({ x: 200, y: 100, width: 600, height: 800 })

const rect = new Rect({ x: 50, y: 50, scale: 5 })
frame.add(rect)

const innerPoint = { x: 10, y: 10 }
const worldPoint = rect.getWorldPoint(innerPoint) //  {x: 300, y: 200}
const framePoint = rect.getWorldPoint(innerPoint, frame) //  {x: 100, y: 100}

获取内部移动距离

使用第三个可选参数: distance?: boolean

可以转换移动距离、长度。

ts
const rect = new Rect({ x: 50, y: 50, scale: 5 })

const worldMove = { x: 100, y: 100 }
const innerMove = rect.getInnerPoint(worldMove, null, true) // {x: 20, y: 20}

Released under the MIT License.