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.