选择并操作路径组fabric.js

Question

我正在制作一个涉及圆柱和盒子等形状的应用程序，并且需要能够使用fabric.js执行此操作。我知道three.js但是出于我的目的，它必须是2D。

最初我以为我会在3D软件中创建它们并渲染图像然后可以添加到画布中，我成功地做了...

然而，我遇到了障碍，织物只允许将图案填充到路径或对象（矩形，圆形等）上....而不是图像（png）。

由于我绝对需要模式，我现在需要在SVG中创建这些圆柱体。我已经在Illustrator中制作圆柱体，将它们保存为SVG，然后在画布上使用它们，然后在它们上添加填充图案。到现在为止还挺好。

现在我希望能够为圆柱顶部填充不同的图案，并且侧面的不同图案仍然将其作为一个对象。

那么......如何选择和操作路径组中的特定路径？无论如何，为组内的每条路径提供一个自定义属性（例如名称），然后我可以将其定位？我是否需要创建两个单独的SVG文件，然后单独添加它们，如果是这样，我该怎么做才能将它作为一个对象添加？

以下是我将svg添加到画布的方法......

fabric.loadSVGFromURL("/shapes/50-250R.png", function(objects) {
  var oImg = fabric.util.groupSVGElements(objects);

  oImg.perPixelTargetFind = true;
  oImg.targetFindTolerance = 4;
  oImg.componentType = "Shape";
  oImg.lockUniScaling = true;
  oImg.lockScalingX = true;
  oImg.lockScalingY = true;
  oImg.setControlsVisibility({'tl': false, 'tr': false, 'bl': false, 'br': false});

  canvas.add(oImg);
  canvas.renderAll();
});

以下是我添加模式的方法......

var textureIMG = new Image;
textureIMG.crossOrigin = "anonymous"; 
textureIMG.src = texture.image;

obj.setFill(); //For some reason, the fill doesn't happen without this line.

var pattern = new fabric.Pattern({
  source: textureIMG,
  repeat: 'repeat'
});

if (obj instanceof fabric.PathGroup) {
  obj.getObjects().forEach(function(o) {
    o.setFill(pattern);
  });
} else {
  obj.setFill(pattern);
}

canvas.renderAll();

提前致谢。

Answer 1

所以我设法解决了这个问题。路径组中的每个路径都存储在对象的“paths”数组中。

我现在可以使用...

在柱面顶部添加一个图案

var obj = canvas.getActiveObject();
obj.paths[0].fill = patternOne;

并使用......

obj.paths[1].fill = patternTwo;