FabricJS - 捕捉到画布外的对象

Question

我正在使用以下库在项目中创建一些标尺：

https://github.com/MrFrankel/ruler

当我创建标尺时，我的HTML结构看起来像这样：

遵循farbricjs演示“与画布外的对象交互”，并且认为此代码允许我将对象捕捉到标尺：

var grid = document.getElementsByClassName('rul_line')


canvas.on('object:moving', function(options) {
  if (Math.round(options.target.left / grid * 4) % 4 == 0 &&
    Math.round(options.target.top / grid * 4) % 4 == 0) {
    options.target.set({
      left: Math.round(options.target.left / grid) * grid,
      top: Math.round(options.target.top / grid) * grid
    }).setCoords();
  }
});

显然我错过了一些东西。或者这根本不可能？

编辑：根据请求，这里是HTML部分

<div id="wrapper" class="image-builder" parent-click="fabric.deactivateAll()" style="">
    <div class="fabric-container">
        <div class="canvas-container" style="width: 1024px; height: 768px; position: relative; user-select: none;">
            <canvas id="canvas" width="1024" height="768" class="lower-canvas" style="position: absolute; width: 1024px; height: 768px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
            <canvas class="upper-canvas " width="1024" height="768" style="position: absolute; width: 1024px; height: 768px; left: 0px; top: 0px; touch-action: none; user-select: none; cursor: default;"></canvas>
        </div>
    </div>
    <div class=" rul_wrapper">
        <canvas class=" rul_ruler rul_ruler_Horizontal rul_align_top" width="4436" height="25" style="left: -2193px;"></canvas>
        <canvas class=" rul_ruler rul_ruler_Vertical rul_align_left" width="4436" height="25" style="left: -2193px; top: -26px; transform: rotate(90deg); transform-origin: 2193px 100% 0px;"></canvas>
        <div title="Clear Guide lines" class=" rul_corner rul_cornerTL" style="width: 26px; height: 25px;"></div>
        <div title="Double click to delete" class=" rul_line rul_lineVer  " data-tip="X: 232 px" style="left: 258px; top: 0px;"></div>
        <div title="Double click to delete" class=" rul_line rul_lineHor    " data-tip="Y: 232 px" style="top: 258px; left: 0px;"></div>
    </div>
    <div class=" rul_tracker" style="height: 25px; left: 1035px;"></div>
    <div class=" rul_tracker" style="width: 25px; top: 247px;"></div>
</div>