Fabric.js 3.4 - 动态调整组或多边形上的 SVG strokeWidth

Question

I have an app (based on fabric.js 3.4) that allows the user to adjust the strokeWith of an SVG ( Group or Polygon ) in real-time via a slider. However, this a seems to break the image. So, for example if I have an SVG (Group) of a smiley face with 2 circles (strokes) for eyes, a stroked mouth and outer circle -- updating the slider to increase stroke width with deforms the image such that eyes, etc start overlapping/shifting (ie do not scale together as a unit/image) or, the image "flashes" - disappearing/reappearing as the slider is moved.

The code being used to update is:

 var value = //get value from slider widget
 var obj = canvas.getActiveObject();
   if (obj && obj.type == "group") {          
        for (i = 0; i < obj._objects.length; i++) {
            if (obj._objects[i]) {
                obj._objects[i].set({ strokeWidth: value });
            }
        }      
    } else if (obj && obj.type == "polygon") {
        obj.set({ strokeWidth: value });
    }
    canvas.renderAll();

Is this the wrong way to go about it? Any help would be greatly appreciated.

Answer 1

the right way of scaling the elements inside the group is to change the scale value of the group itself:

group.set({ scaleX: value, scaleY: value })

If however you need to change some values of the objects inside the group, then assure to call addWithUpdate near you call to canvas.renderAll() to update all the necessary values of the group. Please refer to my recent reply fabric.js 3.6 - Bounding box for group doesn't update when grouped objects are changed for some additional details on that.