在Fabricjs中的组中resize时无法保持strokeWidth的厚度
我正在编写代码以在Fabricjs中的所有对象上保持相同的strokeWidth。
我能够成功维护普通对象的strokeWidth，让它成为矩形或椭圆形（我编写代码来维护它们）。 但是当我使用group时，我无法保持strokeWidth。
这是小提琴 。
重现问题的步骤？
1）打开小提琴链接
2）调整圆的大小，检查边框的大小（ 重新调整大小时边框的厚度保持不变 ）
3）现在调整矩形和文本（组）的大小，预期结果是边框的厚度必须始终相同但不会发生 。
代码：`
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 (eg 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; } } `
这种方法不适用于所有形状。 面对文本或多边形时，您无法重新计算所有内容。
你可以这样做：
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结构的默认情况下，以处理所有类型，因为您找不到resize的解决方案。
编辑我添加了组处理。 关键是当组/对象缩放时产生较小的笔划宽度。 因为当您有多边形和折线以及路径时，更改宽度/高度/半径将无济于事。