Question

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

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

这是fiddle。

重现此问题的步骤？
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 (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/

如果Fabricjs中的组调整大小，则无法保持strokeWidth的厚度

1 个答案: