MotionPathPlugin.convertCoordinates
MotionPathPlugin.convertCoordinates( fromElement:Element | window, toElement:Element | window, point:Object ) : Object(点或Matrix2D)
将一个点从某个元素的局部坐标系统转换为另一个元素的局部坐标系统中的对应位置,无论多少嵌套变换影响着这些元素!
参数
fromElement: 元素 | window
本地坐标作为输入的元素输入。该
point
(第三个参数)是根据此元素的本地坐标定义的。toElement: 元素 | window
本地坐标作为输入的元素输出。换句话说,
point
将被转换为此元素的本地坐标系统。这应该是一个元素引用(例如 myElem),而不是选择器字符串点: 对象
[可选] 一个具有 x 和 y 属性的对象,例如
{x:100, y:200}
它用于定义在fromElement
中需要转换到toElement
本地坐标中的坐标。
返回值:对象(点或 Matrix2D)
如果提供了point
参数,它将被转换,并返回一个新的点,例如{x: 100, y: 200}
表示在toElement
中转换后的坐标。如果没有提供point
,则会返回一个Matrix2D对象,这样你就可以通过它的apply()
方法快速转换任何坐标。
细节
将一个点从一个元素的本地坐标转换为另一个不同元素的本地坐标系中的位置,无论有多少嵌套变换影响这些元素!例如,如果某个元素在其父容器内被旋转和缩放,并且用户点击了它,你可以将事件的 pageX 和 pageY 坐标转换为该嵌套元素坐标系中的位置。
示例代码
let fromElement = document.querySelector("#from"),
toElement = document.querySelector("#to"),
point = { x: 100, y: 0 },
convertedPoint = MotionPathPlugin.convertCoordinates(
fromElement,
toElement,
point
);
// or if you want to convert multiple points, don't pass one to the function and it'll return a Matrix2D
let matrix = MotionPathPlugin.convertCoordinates(fromElement, toElement), // no point parameter!
p1 = matrix.apply({ x: 100, y: 0 }),
p2 = matrix.apply({ x: 0, y: 200 }),
p3 = matrix.apply({ x: 50, y: 50 });