快速转换
世界坐标与本地坐标、内部坐标的快速转换, 直接修改传入的坐标,另提供了 简易转换 的方法。
关键方法
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)