在前端开发中，有时需要对路径进行计算或绘制，point-at-length 是一个可以用于计算路径点位置的 npm 包。通过它，我们可以用代码精确计算出路径的任意一点位置，进而将其用于绘制或其他操作。
安装
要使用 point-at-length，首先要进行安装。可以通过 npm 进行安装：
npm install point-at-length
安装完成后，即可通过 require 等方式引用此包。
使用方法
point-at-length 主要提供了 pointAtLength 方法，该方法用于计算路径上某一长度对应的点坐标。具体使用方法如下：
-- -------------------- ---- ------- ----- ------------- - --------------------------- -- ---- ---- -- ----- ---- - --- ---------------------------------------- -- ------- ----- ---------- - ---------------------- -- -------- ---- ---------- --- ------------ ----- ----- - ------------------- ---------- - --- - ------------- -------------------- --------- -- ------ --
pointAtLength 方法接受两个参数：
- path：表示路径对象，必须是一个 Path2D 类型的对象
- length：表示路径上的长度，单位与 path 结构所表示的长度单位一致
示例
以下示例演示了如何使用 point-at-length 来绘制曲线上的圆点，并在鼠标移到圆点上时高亮显示该点。
<canvas id="myCanvas"></canvas>
-- -------------------- ---- -------
----- ------------- - ---------------------------
----- ------ - ------------------------------------
----- --- - ------------------------
-- ----
----- ---- - --- --------------------- ------ --------------- ----------
-- ----
----------------
-----------------
-- -------
----- ---------- - ----------------------
-- ------------
--- ---- - - -- - - --- ---- -
----- ----- - ------------------- ---------- - -- - -----
----------------
---------------- -------- -- -- - - ---------
-----------
-
-- ------------------------
------------------------------------ ------- -- -
----- ---- - -------------------------------
----- - - ------------- - ----------
----- - - ------------- - ---------
--- ---- - - -- - - --- ---- -
----- ----- - ------------------- ---------- - -- - -----
-- ----------------- - -- -- - -- ---------------- - -- -- -- -
----------------
---------------- -------- -- -- - - ---------
------------- - ---------- -- -- ------
-----------
-
-
---以上示例中，我们用 point-at-length 计算了曲线上各个位置的点坐标，然后在 canvas 上绘制了这些点。并通过监听鼠标事件，判断当前鼠标是否在圆点上，如果是，则在该点周围绘制一个较大的圆圈，以达到高亮显示的效果。
总结
通过 point-at-length，我们可以在前端开发中更精确地计算路径上的点位置，而不需要手动拆分路径来做逼近计算。它为路径绘制等功能提供了很大帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/point-at-length