在Fabricjs中的组中调整大小时无法保持strokeWidth的厚度 [英] Unable to maintain thickness of strokeWidth while resizing in case of Groups in Fabricjs

问题描述

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

I am writing code to maintain same strokeWidth across all the objects in Fabricjs.

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

I am able to successfully maintain strokeWidth for normal Objects , let it be rectangle or ellipse(I wrote code to maintain both). But when I use group , I am unable to maintain the 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 (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;
}
}

`

推荐答案

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

this approach will not work for all kind of shapes. when facing text or polygons you cannot recalculate everything.

你可以这样做：

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结构的默认情况下，以处理所有类型，因为你找不到调整大小的解决方案。

if you prefer the effect of your solution (border is always uniform) put this line of code in the default case of your switch construct to handle all the types for wich you cannot find a resizing solution.

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

edit i added group handling. The point is to make smaller strokewidth when the group / object scale. Because when you will have polygons and polylines and paths, changing width / height /radius will not help.

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

这篇关于在Fabricjs中的组中调整大小时无法保持strokeWidth的厚度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！