在 Fabricjs 中的 Groups 的情况下，在调整大小时无法保持 strokeWidth 的厚度

Question

我正在编写代码以在 Fabricjs 中的所有对象之间保持相同的 strokeWidth。

我能够成功地维护普通 Objects 的 strokeWidth ，让它成为矩形或椭圆（我编写了代码来维护两者）。 但是当我使用 group 时，我无法保持 strokeWidth。

这是fiddle。

重现问题的步骤？
1）打开上面小提琴链接
2）调整圆的大小，检查边框的大小（调整大小时边框的厚度保持不变）
3)现在调整矩形和 text(group) 的大小，预期的结果是边框的粗细必须始终相同，但 不会发生。

代码： `

var gCanvas = new fabric.Canvas('canvDraw');
gCanvas.setWidth(700);
gCanvas.setHeight(700);
var text = new fabric.Text('test', {  fontSize: 30, top: 100, left : 100, fill : 'red'});
// add some shapes - these are examples, others should work too
var myRectangle = new fabric.Rect({
left: 100,
top: 100,
fill: '#999999',
width: 120,
height: 120,
strokeWidth: 3,
fill: '',
stroke: '#000000'
});
var group = new fabric.Group([ myRectangle, text ], {borderColor: 'black', cornerColor: 'green', lockScalingFlip : true});
gCanvas.add(group);

var myEllipse = new fabric.Ellipse({
top: 250,
left: 100,
rx: 75,
ry: 50,
fill: '',
stroke: '#000000',
strokeWidth: 3
});
gCanvas.add(myEllipse);
gCanvas.observe('object:scaling', function (e) {
        e.target.resizeToScale();
    });


fabric.Object.prototype.resizeToScale = function () {
// resizes an object that has been scaled (e.g. by manipulating the handles), setting scale to 1 and recalculating bounding box where necessary
switch (this.type) {
    case "ellipse":
        this.rx *= this.scaleX;
        this.ry *= this.scaleY;
        this.width = this.rx * 2;
        this.height = this.ry * 2;
        this.scaleX = 1;
        this.scaleY = 1;
        break;

    case "rect":
        this.width *= this.scaleX;
        this.height *= this.scaleY;
        this.scaleX = 1;
        this.scaleY = 1;
    default:
        break;
}
}

`

Answer 1

这种方法不适用于所有类型的形状。面对文本或多边形时，您无法重新计算所有内容。

你可以这样做：

fabric.Object.prototype.resizeToScale = function () {
  if  (this.type !=='group') {
    this.strokeWidth = this._origStrokeWidth / Math.max(this.scaleX, this.scaleY);
  }
  else {
    this._objects.forEach( function(obj){
      console.log(obj);
      obj.strokeWidth = obj._origStrokeWidth / Math.max(obj.group.scaleX, obj.group.scaleY);
    });
  }
}

如果您更喜欢解决方案的效果（边框始终是统一的），请将这行代码放在您的 switch 构造的默认情况下，以处理您无法找到调整大小解决方案的所有类型。

编辑我添加了组处理。 关键是在组/对象缩放时使笔划宽度更小。 因为当您将拥有多边形、折线和路径时，更改宽度/高度/半径将无济于事。

http://jsfiddle.net/y344vs5s/4/