javascript - 在 Fabricjs v1.5 中克隆 svgs 组时，svgs 的颜色更改为黑色

Question

在fabricjs v1.5中，我加载了两个不同的svgs，颜色为红色，描边为黑色。现在选择任何 svg 并单击“克隆对象”按钮，它已正确克隆，但是当我选择两个 svg 并单击“克隆组”按钮时，克隆组的颜色变为黑色。这只是 v1.5 的问题。

我更改为fabricjs v1.4并尝试了相同的操作，一切都很完美。

这是我想要的fabricjs v1.5

但是，这是我在 Fabricjs v1.5 中得到的

如何在 v1.5 中解决此问题。您可以在这里尝试 - http://jsfiddle.net/0fbefh52/13/

$('#duplicate-group').on('click', function(event) {
event.preventDefault();

if(canvas.getActiveGroup()) {
    alert("yes");
  var actGrp = canvas.getActiveGroup();  
  actGrp.clone(function (clone) {
      clone.set({
          left: actGrp.left+Math.random()*10,
          top: actGrp.top+Math.random()*10
      });
    clone.setCoords();
    canvas.add(clone); 
    canvas.renderAll();
  });
}

});

Answer 1

这是1.5.0版本的一个错误。这个问题已在 1.6.0rc 中得到解决。

该组正在将填充属性委托(delegate)给子对象。请更新到最新版本即可解决，或者仅将这些更改应用于您的版本: https://github.com/sapics/fabric.js/commit/e07350c9e7cae222c8cf1b2b6196bd6c9b6d1151

已合并到正式版本中

这是一个补丁文件:

From e07350c9e7cae222c8cf1b2b6196bd6c9b6d1151 Mon Sep 17 00:00:00 2001
From: sapics <gv.nishino@gmail.com>
Date: Thu, 9 Apr 2015 14:45:32 +0900
Subject: [PATCH] fix group initialization

---
 src/shapes/group.class.js | 51 +++++++++++++++++++++++++++++++++--------------
 test/unit/group.js        | 12 ++++++++++-
 2 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/src/shapes/group.class.js b/src/shapes/group.class.js
index c6f1d65..4f394d7 100644
--- a/src/shapes/group.class.js
+++ b/src/shapes/group.class.js
@@ -52,11 +52,19 @@
      * Constructor
      * @param {Object} objects Group objects
      * @param {Object} [options] Options object
+     * @param {Boolean} [isAlreadyGrouped] if true, objects have been grouped already.
      * @return {Object} thisArg
      */
-    initialize: function(objects, options) {
+    initialize: function(objects, options, isAlreadyGrouped) {
       options = options || { };

+      this._objects = [];
+      // if objects enclosed in a group have been grouped already,
+      // we cannot change properties of objects.
+      // Thus we need to set options to group without objects,
+      // because delegatedProperties propagate to objects.
+      isAlreadyGrouped && this.callSuper('initialize', options);
+
       this._objects = objects || [];
       for (var i = this._objects.length; i--; ) {
         this._objects[i].group = this;
@@ -67,15 +75,20 @@
       if (options.originX) {
         this.originX = options.originX;
       }
-
       if (options.originY) {
         this.originY = options.originY;
       }

-      this._calcBounds();
-      this._updateObjectsCoords();
-
-      this.callSuper('initialize', options);
+      if (isAlreadyGrouped) {
+        // do not change coordinate of objects enclosed in a group,
+        // because objects coordinate system have been group coodinate system already.
+        this._updateObjectsCoords(true);
+      }
+      else {
+        this._calcBounds();
+        this._updateObjectsCoords();
+        this.callSuper('initialize', options);
+      }

       this.setCoords();
       this.saveCoords();
@@ -83,15 +96,28 @@

     /**
      * @private
+     * @param {Boolean} [skipCoordsChange] if true, coordinates of objects enclosed in a group do not change
      */
-    _updateObjectsCoords: function() {
-      this.forEachObject(this._updateObjectCoords, this);
+    _updateObjectsCoords: function(skipCoordsChange) {
+      for (var i = this._objects.length; i--; ){
+        this._updateObjectCoords(this._objects[i], skipCoordsChange);
+      }
     },

     /**
      * @private
+     * @param {Object} object
+     * @param {Boolean} [skipCoordsChange] if true, coordinates of object dose not change
      */
-    _updateObjectCoords: function(object) {
+    _updateObjectCoords: function(object, skipCoordsChange) {
+      // do not display corners of objects enclosed in a group
+      object.__origHasControls = object.hasControls;
+      object.hasControls = false;
+
+      if (skipCoordsChange) {
+        return;
+      }
+
       var objectLeft = object.getLeft(),
           objectTop = object.getTop(),
           center = this.getCenterPoint();
@@ -102,12 +128,7 @@
         left: objectLeft - center.x,
         top: objectTop - center.y
       });
-
       object.setCoords();
-
-      // do not display corners of objects enclosed in a group
-      object.__origHasControls = object.hasControls;
-      object.hasControls = false;
     },

     /**
@@ -558,7 +579,7 @@
   fabric.Group.fromObject = function(object, callback) {
     fabric.util.enlivenObjects(object.objects, function(enlivenedObjects) {
       delete object.objects;
-      callback && callback(new fabric.Group(enlivenedObjects, object));
+      callback && callback(new fabric.Group(enlivenedObjects, object, true));
     });
   };

diff --git a/test/unit/group.js b/test/unit/group.js
index 306a8ed..9a95c8b 100644
--- a/test/unit/group.js
+++ b/test/unit/group.js
@@ -16,6 +16,13 @@
     return new fabric.Group([ rect1, rect2 ], {strokeWidth: 0});
   }

+  function makeGroupWith2ObjectsWithOpacity() {
+    var rect1 = new fabric.Rect({ top: 100, left: 100, width: 30, height: 10, strokeWidth: 0, opacity: 0.5 }),
+        rect2 = new fabric.Rect({ top: 120, left: 50, width: 10, height: 40, strokeWidth: 0, opacity: 0.8 });
+
+    return new fabric.Group([ rect1, rect2 ], {strokeWidth: 0});
+  }
+
   function makeGroupWith4Objects() {
     var rect1 = new fabric.Rect({ top: 100, left: 100, width: 30, height: 10 }),
         rect2 = new fabric.Rect({ top: 120, left: 50, width: 10, height: 40 }),
@@ -363,7 +370,7 @@ test('toObject without default values', function() {
   });

   asyncTest('fromObject', function() {
-    var group = makeGroupWith2Objects();
+    var group = makeGroupWith2ObjectsWithOpacity();

     ok(typeof fabric.Group.fromObject == 'function');
     var groupObject = group.toObject();
@@ -375,6 +382,9 @@ test('toObject without default values', function() {

       ok(newGroupFromObject instanceof fabric.Group);

+      deepEqual(objectFromOldGroup.objects[0], objectFromNewGroup.objects[0]);
+      deepEqual(objectFromOldGroup.objects[1], objectFromNewGroup.objects[1]);
+
       // delete `objects` arrays, since `assertHashEqual` fails to compare them for equality
       delete objectFromOldGroup.objects;
       delete objectFromNewGroup.objects;