时间戳

首页 > 解决方案 > FabricJS 2-只有单个路径时在 SVG 路径上设置填充

fabricjs - FabricJS 2-只有单个路径时在 SVG 路径上设置填充

问题描述

因此，将 SVG 添加到画布中，如下所示：

// load the svg
fabric.loadSVGFromURL(self.currentDraggedIcon, function(objects, d) {

  var iconGroup = fabric.util.groupSVGElements(objects, d);
  iconGroup.set({
    left: e.layerX,
    top: e.layerY,
    width: d.width,
    height: d.height,
    lockUniScaling: true,
    //  scaleY:self.currentObjectDesigner.scaleFactor,
    // scaleX:self.currentObjectDesigner.scaleFactor,
    dtype: 'UserIcon'
  });

  self.currentObjectDesigner.fabric.add(iconGroup);
  self.currentObjectDesigner.fabric.bringToFront(iconGroup);
  self.currentObjectDesigner.fabric.renderAll();
});

稍后有一个按钮可以将组内的路径颜色更改为红色，执行此操作的代码是：

for (var i = 0; i < self.currentObjectDesigner.selectedObject._objects.length; i++) {

  if (self.currentObjectDesigner.selectedObject.item(i).fill == findColor || self.currentObjectDesigner.selectedObject.item(i).fill == findColorAlt) {
    self.currentObjectDesigner.selectedObject.item(i).fill = color;

  }
}

self.currentObjectDesigner.selectedObject.addWithUpdate();

如果 SVG 有多个路径，这非常有效，但是当只存在一个路径时，_objects 属性不存在，因此我们无法执行循环和 item(i) 部分来设置路径上的填充。

问题是：当 _objects 不存在并且 item() 方法不存在因为它只是一个单一的路径时，我们现在如何设置填充？- 即它不是一个组。

标签： fabricjsfabricjs2

解决方案

如果存在多个路径groupSVGElements返回组对象，否则返回单个对象。

演示

var canvas = new fabric.Canvas('c');

function loadSvg(url, left, top) {
  fabric.loadSVGFromURL(url, function(objects, d) {
    var iconGroup = fabric.util.groupSVGElements(objects, d);
    //for more than one path
    iconGroup.set({
      left: left,
      top: top
    })
    if (iconGroup.type == 'group') {
      //do your logic for group object
      iconGroup.item(0).fill = 'yellow';
      iconGroup.addWithUpdate();
    } else {
      iconGroup.fill = 'red';
    }
    iconGroup.set({
      scaleX: 150 / iconGroup.width,
      scaleY: 150 / iconGroup.height,
    })
    canvas.add(iconGroup);
  }, function() {}, {
    crossOrigin: 'anonymous'
  });

}
loadSvg('https://upload.wikimedia.org/wikipedia/commons/2/22/Wikimapia_logotype.svg', 10, 20);
loadSvg('https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg', 200, 50);
canvas{
 border:2px solid #000;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='c' width=400 height=400></canvas>

推荐阅读