前端进阶：在 Web 中使用 C++，我让学妹另眼相看 | 技术分享

.├── XXXX.cpp     // 算法本身的 cpp 文件├── XXXX.h    // 算法本身的头文件├── Warp.cc    // Warp文件，其中描述了需要导出的类和函数、枚举等├── compile.sh    // 编译脚本├── package.json  // package.json 文件，方便发布到 npm 仓库    

#include "Rect.cpp"// ... include<xxx.cpp> 引用各个算法的 cpp 文件#include "emscripten/bind.h"    // Emscripten Binding 需要的头文件
using namespace emscripten;    // Emscripten Binding 的命名空间using namespace std;      // C++ 标准库命名空间 ，主要是为了使用 vector（可以理解为 C++ 中的可变长度数组）using namespace rbp;      // 这个算法库的命名空间 RectangleBinPack
EMSCRIPTEN_BINDINGS(c)      // 表示我们开始编写 Emscripten 的 Binding{      // 下面只要是字符串里面的值都是在 wasm 里面的名字，可以自己取，不要求和 C++ 中的一样。      // 导出 Rect 和 RectSize 的 vector      register_vector<Rect>("VectorRect");  register_vector<RectSize>("VectorRectSize");
  // Rect.cpp  class_<RectSize>("RectSize")        // 导出 RectSize 类，他包括      .constructor<>()      // 一个没有参数的构造函数      .constructor<int, int>()    // 一个有 2 个参数的构造函数，参数的类型分别是 int 和 int      .property("width", &RectSize::width)  // 一个实例字段 width，对应的地址是 RectSize 的 width      .property("height", &RectSize::height);
           // ...
  emscripten::function("IsContainedIn", &IsContainedIn);  // 导出了一个全局的函数
  // SkylineBinPack.cpp      // 导出一个叫做 SkylineBinPack_LevelChoiceHeuristic 的枚举，      // 他有 2 个值 LevelBottomLeft、LevelMinWasteFit  enum_<SkylineBinPack::LevelChoiceHeuristic>("SkylineBinPack_LevelChoiceHeuristic")      .value("LevelBottomLeft", SkylineBinPack::LevelChoiceHeuristic::LevelBottomLeft)      .value("LevelMinWasteFit", SkylineBinPack::LevelChoiceHeuristic::LevelMinWasteFit);
  class_<SkylineBinPack>("SkylineBinPack")      .constructor<>()      .constructor<int, int, bool>()      .function("Init", &SkylineBinPack::Init) // 一个实例函数 Init              // 一个实例函数 Insert_Range，对应的是 Insert 函数的某个重载      .function("Insert_Range",select_overload<void(vector<RectSize> &, vector<Rect> &, SkylineBinPack::LevelChoiceHeuristic)>(&SkylineBinPack::Insert))       .function("Insert_Single",select_overload<Rect(int, int, SkylineBinPack::LevelChoiceHeuristic)>(&SkylineBinPack::Insert))      .function("Occupancy", &SkylineBinPack::Occupancy);}

emcc --bind -Oz Warp.cc -o dist/Warp.js \-s WASM=1 \-s MODULARIZE=1

export interface CustomEmbindModule {   // ...}declare function factory(): Promise<CustomEmbindModule>;export default factory;
// =========>
export interface RectangleBinPackModule extends EmscriptenModule {  // ...}declare const factory: EmscriptenModuleFactory<RectangleBinPackModule>;export default factory;

import type { RectangleBinPackModule as PackModule } from 'rectanglebinpack-wasm'
// PackWasmInit 就是上面那个工厂函数import PackWasmInit from 'rectanglebinpack-wasm';
// 我们需要获取 wasm 文件的路径。我们不需要用打包器的 wasm loader，// 只需要这个wasm文件的 url 就行。这里是 vite 的写法，webpack 应该是 file-loaderimport PackWasm from 'rectanglebinpack-wasm/dist/Warp.wasm?url' 
// 方便获取枚举的值，主要是用来规避 ts 的类型检查const toEnumValue = (enumObj: any, value: any) => enumObj[value]
export class WasmPackService implements IPackService {
  private wasm?: PackModule;
  constructor() {    PackWasmInit({       // 这里非常重要，我们需要告诉工厂方法 wasm 文件的位置在哪，  // 如果不写，它会去网页的根目录下查找，一般情况下我们不希望这样         locateFile: (url) => url.endsWith('.wasm') ? PackWasm : url      }).then(wasm => {      this.wasm = wasm;  // 初始化完成后，就能获取到 wasm 模块的实例了    })  }      public async pack(    source: SourcePanelItem[], // width height 这里因为只考虑 1 个箱子的情况，所以这里肯定只有 1 个数据    target: TargetPanelItem[], // width height count    algorithms: Algorithms,  // 算法    setting: Record<string, boolean | string> // 算法设置  ) {      // ...      const m = this.wasm;            // 首先我们创建一个 RectSize 的 vector，然后把我们需要排版的小矩形都放进去      const targetSizes = new m.VectorRectSize();        target        .flatMap(t => range(0, Math.max(t.count, 0))          .map(_ => new m.RectSize(t.width, t.height)))        .forEach((i) => targetSizes.push_back(i));
      // ...      let resultRects = new m.VectorRect();  // 创建一个用来接收结果的 Rect 的 vector      switch (algorithms) {        // ...          case "Skyline":              // 调用天际线算法类的构造函数，并传递一些设置，创建一个算法对象              const skyline = new m.SkylineBinPack(sourceWidth, sourceHeight, setting['UseWasteMap'] as boolean);              // 调用批量添加函数，函数内部会把结果添加到 resultRects 里面              skyline.Insert_Range(                targetSizes,                resultRects,                toEnumValue(m.SkylineBinPack_LevelChoiceHeuristic, setting['LevelChoiceHeuristic'])              );              // 重要：手动释放 skyline 对象。因为 wasm 需要我们手动管理内存，        // 所以创建了对象后一定要回收，不存在自动垃圾回收。              skyline.delete();              break;      }      const result: Rect[] = []      for (let i = 0; i < resultRects.size(); i++) {        const item = resultRects.get(i);        result.push({ x: item.x, y: item.y, width: item.width, height: item.height })      }      // 获取结果后释放掉 targetSizes、resultRects      targetSizes.delete();      resultRects.delete();              return { result }  }}

 %module RectangleBinPack  %{ #include "Rect.h" #include "GuillotineBinPack.h" #include "SkylineBinPack.h" #include "ShelfNextFitBinPack.h" #include "ShelfBinPack.h" #include "MaxRectsBinPack.h" %}  %include <std_vector.i> %template(vector_Rect) std::vector<rbp::Rect>; %template(vector_RectSize) std::vector<rbp::RectSize>;  %include "Rect.h" %include "GuillotineBinPack.h" %include "SkylineBinPack.h" %include "ShelfNextFitBinPack.h" %include "ShelfBinPack.h" %include "MaxRectsBinPack.h"

swig -c++ -csharp Warp.idl

  public (double, List<Rect>) PackImplement(PackRequestDto dto)        {            // ...                var targets = new vector_RectSize(dto.Target.SelectMany(target =>                    Enumerable.Range(1, target.Count).Select(_ =>                        new RectSize {width = target.Width, height = target.Height})));
                var resultRects = new vector_Rect();                          // ...
                switch (dto.Algorithms)                {                    case PackAlgorithms.Skyline:                        var skylineBin = new SkylineBinPack(sourceWidth, sourceHeight,                            dto.SkylineSetting.UseWasteMap);                        skylineBin.Insert(targets, resultRects, dto.SkylineSetting.LevelChoiceHeuristic);                                               break;                   // ...                }                return (occupancy, resultRects.ToList());            }