Fabric.js 动态图案砖布局

Question

我目前正在使用 Fabric.js 的动态模式功能将图像对象转换为模式对象。但是，我遇到了默认情况下使用网格布局创建图像的问题，而我希望它们使用垂直或水平砖布局创建。不幸的是，我无法为每一行单独设置偏移值，也无法找到这样做的方法。理想情况下，我想将此偏移量定义为可调整的，但我不确定如何实现。

var imageObj = canvas.getActiveObject();

fabric.Image.fromURL(imageObj.img_data.src, function (img) {

  var padding = 0;
  var canvas = canvas;
  var imageObj = canvas.getActiveObject();
  img.scaleToWidth(50);
  var patternSourceCanvas = new fabric.StaticCanvas();
  patternSourceCanvas.add(img);
  patternSourceCanvas.renderAll();
  var pattern = new fabric.Pattern({
      source: patternSourceCanvas.getElement(),
      repeat: 'repeat',
  });
  var rect = new fabric.Rect({
      id: imageObj.id,
      width: imageObj.width, 
      height: imageObj.height,
      fill: pattern
  });
  document.getElementById('img-width').oninput = function () {
      img.scaleToWidth(parseInt(this.value, 10));
      patternSourceCanvas.setDimensions({
        width: img.getScaledWidth() + padding,
        height: img.getScaledHeight() + padding,
      });
      canvas.requestRenderAll();
    };
    document.getElementById('img-angle').oninput = function () {
      img.set('angle', this.value);
      patternSourceCanvas.renderAll();
      canvas.requestRenderAll();
    };
    document.getElementById('img-padding').oninput = function () {
      padding = parseInt(this.value, 10);
      patternSourceCanvas.setDimensions({
        width: img.getScaledWidth() + padding,
        height: img.getScaledHeight() + padding,
      });
      canvas.requestRenderAll();
    };
    document.getElementById('img-offset-x').oninput = function () {
      pattern.offsetX = parseInt(this.value, 10);
      canvas.requestRenderAll();
    };
    document.getElementById('img-offset-y').oninput = function () {
      pattern.offsetY = parseInt(this.value, 10);
      canvas.requestRenderAll();
    };
    document.getElementById('img-repeat').onclick = function () {
      pattern.repeat = this.checked ? 'repeat' : 'no-repeat';
      canvas.requestRenderAll();
    };
  canvas.add(rect);
  canvas.remove(imageObj);
  canvas.setActiveObject(rect);
  canvas.renderAll();
 });

偏移值应用于整个图案，我尝试为每一行或每一列单独创建它，但失败了。 我想分别为每一行或每一列设置一个偏移值。所以我想创建砖布局。