通过组放置在画布上时，线条具有不同的笔画宽度答案

【问题标题】：Line has different strokeWidth when placed on a canvas via group通过组放置在画布上时，线条具有不同的笔画宽度
【发布时间】：2016-12-01 15:21:01
【问题描述】：

为什么下面的代码

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

var line = new fabric.Line([100, 50, 100, 100], {
  stroke: 'black',
  strokeWidth: 1
});
canvas.add(line);

var groupLine = new fabric.Line([100, 50, 100, 100], {});
var group = new fabric.Group([groupLine], {
  top: 50,
  left: 200,
  stroke: 'black',
  strokeWidth: 1
});
canvas.add(group);

导致两条宽度不同的线？

https://jsfiddle.net/pyoq5410/

两行都有相同的strokeWidth，唯一的区别是其中一行是通过Group对象添加的。

【问题讨论】：

标签： html canvas html5-canvas fabricjs

【解决方案1】：

看起来您正在将笔划应用于整个组。试试这个：

var groupLine = new fabric.Line([150, 50, 150, 100], {
  stroke: 'black', 
  strokeWidth: 1
});
var group = new fabric.Group([groupLine], {});

【讨论】：

在组上添加 strokeWidth 确实会改变行的宽度，但不会更改为 1，这听起来仍然很奇怪。
是的，看起来像 Fabric 中的一个小错误。