Fabric.js 3.4 - 在 Group 或 Polygon 上动态调整 SVG strokeWidth答案

【问题标题】：Fabric.js 3.4 - Dynamically adjusting SVG strokeWidth on Group or PolygonFabric.js 3.4 - 在 Group 或 Polygon 上动态调整 SVG strokeWidth
【发布时间】：2020-11-19 19:43:26
【问题描述】：

我有一个应用程序（基于 fabric.js 3.4），它允许用户通过滑块实时调整 SVG（组或多边形）的 strokeWith。然而，这似乎打破了形象。因此，例如，如果我有一个笑脸的 SVG（组），其中有 2 个圆圈（笔划）用于眼睛、一个笔划嘴巴和外圈——更新滑块以增加笔划宽度，使图像变形，使眼睛等开始重叠/移动（即不作为一个单元/图像一起缩放）或者，图像“闪烁” - 随着滑块的移动消失/重新出现。

用于更新的代码是：

 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();

这是错误的做法吗？任何帮助将不胜感激。

【问题讨论】：

标签： javascript svg fabricjs stroke

【解决方案1】：

缩放组内元素的正确方法是改变组本身的scale值：

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

但是，如果您需要更改组内对象的某些值，请确保在您调用 canvas.renderAll() 附近调用 addWithUpdate 以更新组的所有必要值。请参阅我最近的回复fabric.js 3.6 - Bounding box for group doesn't update when grouped objects are changed 了解更多详情。

【讨论】：

感谢亚当的回复。虽然我不想缩放 SVG。换句话说，如果我的 SVG 位于 400 像素 x 400 像素的画布上，我希望笔画根据滑块输入变得更粗/更细，而不会影响比例。（仍然想要它 400x400px ）。不确定我将如何使用 AddWithUpdate，因为我没有向画布添加任何新内容，只是更改了已有内容的 storkeWidth。
嗯，实际上，我不介意尺寸是否必须增大/缩小以适应更粗/更细的笔划宽度，但缩放不是我的主要目标。
我尝试在整个组上设置 strokeWidth -- obj.set({ strokeWidth: value });-- 但这似乎只是增加了 SVG 周围的填充区域而不影响 SVG 本身。