坐标体系
用模拟现实世界的思考方式，以绿色小圆形作为参照物（背景大圆形和绿色小圆形组成一个 Group），由近及远，按层级定义为内部坐标、本地坐标、世界坐标，以方便在不同层级中进行坐标计算。
坐标类型
inner
内部坐标: 元素内的坐标， 如绘制路径的坐标点。
ts
const path = new Path({
x: 100,
y: 100,
path: 'M 0 0 L 100 100 L 0 100 Z',
stroke: 'black',
})local
本地坐标: 相对于父元素的坐标，如 position。
ts
const path = new Path({
x: 200,
y: 300,
path: 'M 0 0 L 100 100 L 0 100 Z',
stroke: 'black',
})world
世界坐标: 相对于应用视图的坐标位置。
ts
path.worldRenderBounds // 世界坐标坐标矩阵属性
布局和坐标转换的基础。
localTransform: IMatrixData
相对于父元素的变换矩阵。
worldTransform: IMatrixData
相对于世界坐标的变换矩阵。
ts
path.worldTransform坐标转换方法
worldToLocal
worldToLocal(world: IPointData, to?: IPointData, isMovePoint?: boolean)
将世界坐标转换为本地坐标。
to 不存在时会直接修改 world 属性，isMovePoint 表示坐标是否为移动距离。
localToWorld
localToWorld(local: IPointData, to?: IPointData, isMovePoint?: boolean)
将本地坐标转换为世界坐标。
worldToInner
worldToInner(world:IPointData, to?: IPointData, isMovePoint?: boolean)
将世界坐标转换为内部坐标。
innerToWorld
innerToWorld(inner: IPointData, to?: IPointData, isMovePoint?: boolean)
将内部坐标转换为世界坐标。
示例
转换为本地坐标
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)