前言
前端开发中，图像素材在项目中占有非常重要的地位。如何高效地对素材进行管理和压缩成为了所有前端开发者需要考虑的重要问题。而对于大量小图的合并，maxrects-packer 便是这个问题的一个解决方案。
本文会介绍 npm 包 maxrects-packer 的使用方法，包括如何安装及 API 方法，并提供使用示例。希望能够帮助读者加深对前端 image sprite 的认知。
安装
通过 npm 进行安装：
npm install maxrects-packer --save
如下是 npm 包在使用前需要引入的模块：
const MaxRectsPacker = require("maxrects-packer").MaxRectsPacker;API 方法
create(width, height, maxWidth, maxHeight, allowRotation)
构造函数，创建一个新的 packer 实例
参数：
- width：目标图集的宽度
- height：目标图集的高度
- maxWidth：单个图块的最大宽度（可选，默认为 width）
- maxHeight：单个图块的最大高度（可选，默认为 height）
- allowRotation：是否允许旋转（可选，默认为 true）
返回值：
maxrects-packer 函数的返回值即为 packer 实例本身，不需要额外赋值。
示例代码：
let packer = new MaxRectsPacker(2048, 2048, 512, 512);
addBin(binWidth, binHeight)
添加一个新的目标矩形到 packer 实例中
参数：
- binWidth：目标矩形的宽度
- binHeight：目标矩形的高度
返回值：
返回添加的目标矩形对象，其属性包括：
- x：目标矩形在目标图集中的 x 坐标
- y：目标矩形在目标图集中的 y 坐标
示例代码：
let bin1 = packer.addBin(1024, 1024); let bin2 = packer.addBin(1024, 1024);
addRect(rectWidth, rectHeight, data)
将一个新矩形添加到 packer 实例中
参数：
- rectWidth：矩形的宽度
- rectHeight：矩形的高度
- data：矩形的元数据（可选）
返回值：
返回添加的矩形对象，其属性包括：
- x：矩形在目标图集中的 x 坐标
- y：矩形在目标图集中的 y 坐标
- w：矩形的宽度
- h：矩形的高度
- rotated：是否旋转
- data：矩形元数据
示例代码：
let rect1 = packer.addRect(128, 128, { name: "icon1" });
let rect2 = packer.addRect(256, 256, { name: "icon2" });getJSON()
返回目标图集中所有矩形的数据
返回值：
包含所有矩形数据的数组，每一个矩形的数据都是上述 addRect 方法返回的数据结构。
示例代码：
let atlasData = packer.getJSON(); console.log(atlasData);
pack()
开始压缩目标矩形
返回值：
如果 packer 实例中有目标矩形，则返回 true，否则返回 false。
示例代码：
packer.pack();
示例
下面是使用 maxrects-packer 创建一个简单的 image sprite 图集的示例。首先创建一个 packer 实例：
const packer = new MaxRectsPacker(2048, 2048, 512, 512);
然后添加需要合并的矩形，例如一些图片：
const images = [{ name: "icon1", width: 256, height: 256 }, { name: "icon2", width: 128, height: 128 }, { name: "icon3", width: 512, height: 256 }];
const rects = images.map((img) => {
return packer.addRect(img.width, img.height, { name: img.name });
});执行打包命令：
packer.pack();
打包成功后获取图集中所有矩形的数据，以及生成的每个矩形所在的 x 和 y 坐标。
const atlasData = packer.getJSON(); console.log(atlasData); console.log(rects);
最终图集的数据结构为：
-- -------------------- ---- -------
-
-
---- --
---- --
---- ----
---- ----
---------- ------
------- -
------- -------
-
--
-
---- ----
---- --
---- ----
---- ----
---------- ------
------- -
------- -------
-
--
-
---- ----
---- ----
---- ----
---- ----
---------- ------
------- -
------- -------
-
-
-最后，我们可以根据图集中的矩形数据绘制 sprite 图。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64585