Question

我已经在SVG对象和SVG对象中的路径上设置了自定义属性。

我添加到画布的每个对象也会被赋予一个“id”属性，以及我用来与应用程序中的对象进行交互的其他一些属性。

到目前为止，当我克隆这些对象时，我能够通过在克隆之前将它们存储在会话变量中来保留SVG对象上的属性，然后在克隆之后将它们添加回来。

我的问题是在每个object.paths上设置的属性。我为每个路径都有一个'id'属性，我将其用于一些可以操纵对象内路径的函数。

例如，在我对对象进行分组之前，object.paths属性看起来像这样......

paths: Array(4)
0: klass {id: "_25mm_x_400mm_ROUND", d: "M400.5,60.5A21.52,21.52", fill: "#ccc", dirty: false, stroke: "#000", …}
1: klass {id: "_25mm_x_400mm_ROUND", d: "M400.5,60.5v25c0", stroke: "#000", dirty: false, strokeMiterLimit: 10, …}
2: {id: "shapeTopColor", d: "M400.5,60.5A21.52,21.52", fill: "rgba(0, 0, 0, 0)", dirty: false, stroke: "#000", …}
3: {id: "shapeSideColor", d: "M400.5,60.5v25c0", stroke: "#000", dirty: false, strokeMiterLimit: 10, …}

然后，在取消组合对象后，object.paths属性看起来像这样......

paths: Array(4)
0: klass {type: "path", originX: "left", originY: "top", left: 0.4999999999999982, top: 0.5, …}
1: klass {type: "path", originX: "left", originY: "top", left: 0.5, top: 60.5, …}
2: klass {type: "path", originX: "left", originY: "top", left: 0.4999999999999982, top: 0.5, …}
3: klass {type: "path", originX: "left", originY: "top", left: 0.5, top: 60.5, …}

这会破坏一些使用'shapeTopColor和'shapeSideColor'ids的函数来更改每个路径的填充属性。因此，如果用户对一个对象进行分组，然后对其进行取消分组，则它们将无法再更改该对象的颜色。

以下是我用来分组对象的代码......

export function groupSelectedItems() {

  canvas = document.getElementById("c").fabric;

  var activegroup = canvas.getActiveGroup();
  var objectsInGroup = activegroup.getObjects();

  var objectIds = [];

  activegroup.clone(function(newgroup) {

      canvas.discardActiveGroup();
      objectsInGroup.forEach(function(object) {
          objectIds.push({
            'id':object.id,
            'componentType':object.componentType,
            'shape': object.shape,
            // paths = object.paths //Tried this but causes errors.
           });
          canvas.remove(object);
      });

      newgroup.setControlsVisibility({'tl': false, 'tr': false, 'bl': false, 'br': false, 'ml': false, 'mr': false, 'mb': false, 'mt': false});
      canvas.add(newgroup);

      //Store the objects id's on to a session variable.
      Session.set('objectIds', objectIds);

      //put original objects id's back onto the new groups objects respectively.
      var objectsInNewGroup = newgroup.getObjects();
      objectsInNewGroup.forEach(function(object, key) {
          Session.get('objectIds').forEach(function(o, i) {
            if (key == i) {
              object.id = o.id
              object.componentType = o.componentType,
              object.shape = o.shape
              // object.paths = o.paths
            }
          });
      });

  });
}

所以我的问题是，如何克隆一个对象或组，而不是丢失我设置的任何自定义属性？

Answer 1

<强>样本

＆＃13;

var canvas = new fabric.Canvas('c');
var rect1 = new fabric.Rect({
  id: 1,
  width: 100,
  height: 100,
  fill: 'red',
  componentType: 'a1',
  shape: 'round1'
});
var rect2 = new fabric.Rect({
  id: 2,
  left:10,
  top:20,
  width: 100,
  height: 100,
  fill: 'magenta',
  componentType: 'a2',
  shape: 'round2'
});
var rect3 = new fabric.Rect({
  id: 3,
  left:30,
  top:30,
  width: 100,
  height: 100,
  fill: 'yellow',
  componentType: 'a3',
  shape: 'round3'
});
var group = new fabric.Group([rect1, rect2, rect3]);
canvas.add(group)
canvas.setActiveObject(group);

function cloneObj() {
  group.clone(function(newgroup) {
    canvas.add(newgroup.set({
     left: newgroup.left + 10,
     top: newgroup.top + 10
    }));
    console.log(newgroup);
  }, ['id', 'componentType', 'shape']);
}

＆＃13;

canvas {
    border: 1px solid #999;
}

＆＃13;

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick='cloneObj()'>Clone</button>
<canvas id="c" width="700" height="400"></canvas>

＆＃13;

clone接受一个回调和数组，以包含在克隆对象中的其他属性。

Answer 2

使用此代码在组件初始化时保存和获取自定义属性

    fabric.Object.prototype.toObject = (function (toObject) {
      return function (propertiesToInclude) {
        propertiesToInclude = (propertiesToInclude || []).concat(
          ["data", "name", "lockRotation"] // custom attributes
        );
        return toObject.apply(this, [propertiesToInclude]);
      };
    })(fabric.Object.prototype.toObject);

FabricJs-克隆对象失去自定义属性

2 个答案: