跳过主要内容

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 });

视频

演示

加载中...

无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗