Skip to content

快速转换

世界坐标本地坐标内部坐标的快速转换, 直接修改传入的坐标,另提供了 简易转换 的方法。

关键方法

worldToInner ( worldPoint:IPointData )

转换为内部坐标, 直接修改 world。

worldToLocal ( worldPoint: IPointData )

转换为本地坐标, 直接修改 world。

innerToWorld ( innerPoint: IPointData )

转换为世界坐标, 直接修改 inner。

localToWorld ( localPoint: IPointData )

转换为世界坐标, 直接修改 local。

可选参数

所有转换方法都支持。

不直接修改坐标

第二个可选参数:to?: IPointData 用于存储转换后的结果

转换距离、长度

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

相对元素

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

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

归属

UI

示例

转换为本地坐标

ts
import { Group, Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const group = new Group({ x: 100, y: 100, scaleX: 2, scaleY: 2 })
const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })

leafer.add(group)
group.add(rect)

const point = { x: 100, y: 100 } 
rect.worldToLocal(point)

console.log('local', point)

转换为本地移动距离

ts
import { Group, Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const group = new Group({ x: 100, y: 100, scaleX: 2, scaleY: 2 })
const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })

leafer.add(group)
group.add(rect)

const worldMove = { x: 10, y: 10 }  
const localMove = { x: 0, y: 0 }
rect.worldToLocal(worldMove, localMove, true)

console.log('local move', localMove)

Released under the MIT License.