npm 包 @interactjs/utils 使用教程

在前端的开发中，我们经常会需要使用一些小工具来完成某些任务，比如计算坐标、获取元素大小等。npm 上有很多这样的工具包，其中就包含了 @interactjs/utils。这个工具包提供了一系列常用的工具函数，可以使我们的开发变得更加便捷。

安装

首先，我们需要安装 @interactjs/utils。在项目根目录中运行以下命令：

npm install @interactjs/utils --save

使用

使用 @interactjs/utils 中的函数，只需要引入即可。以下是一个简单的例子：

import { getElementRect } from '@interactjs/utils'

const element = document.getElementById('myElement')
const rect = getElementRect(element)

console.log(rect.width, rect.height)

函数列表

@interactjs/utils 提供了非常多的函数，包括获取元素大小、计算坐标、判断鼠标位置、判断两元素是否相交等。这里列出一些常用的函数。

getElementRect(element)

获取元素大小和位置。

const rect = getElementRect(element)
console.log(rect.width, rect.height, rect.left, rect.right, rect.top, rect.bottom)

getClientRects(element)

获取元素每个子元素的大小和位置。

const rects = getClientRects(element)
console.log(rects.length, rects[0].width, rects[0].height)

getContainingElement(element)

获取元素所在的最近定位的祖先元素。

const parent = getContainingElement(element)
parent.style.position = 'relative'

getPageXY(event)

获取鼠标或触摸事件的页面坐标。

element.addEventListener('mousedown', event => {
  const { pageX, pageY } = getPageXY(event)
  console.log(pageX, pageY)
})

inRange(value, min, max)

判断一个数值是否在某一区间内。

if (inRange(mouseX, rect.left, rect.right) && inRange(mouseY, rect.top, rect.bottom)) {
  console.log('Mouse is inside the element.')
}

rectIntersects(rect1, rect2)

判断两个矩形是否相交。

const rect1 = { left: 0, right: 10, top: 0, bottom: 10 }
const rect2 = { left: 5, right: 15, top: 5, bottom: 15 }

if (rectIntersects(rect1, rect2)) {
  console.log('The two rectangles intersect.')
}

总结

@interactjs/utils 中的函数可以帮助我们在开发中快速解决一些问题，例如获取元素大小、计算坐标等。如果你对这个工具包感兴趣，可以去 npm 官网了解更多详情。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2b5bee3b0ab45f74a8bb30