javascript - 无法维护fabric.js组元素的strokeWidth

嗨，我正在fabricjs库上工作，并遇到了一个错误。

我正在绘制一组文本和矩形，然后重新调整其大小。
但我看到@borders组的大小随着调整大小而增加。
但我希望strokeWidth始终是相同的。

这是Fiddle!。

代码：
`

var gCanvas = new fabric.Canvas('canvDraw');
 gCanvas.setWidth(500);
 gCanvas.setHeight(500);

var myEllipse = new fabric.Ellipse({
top: 250,
left: 100,
rx: 75,
ry: 50,
fill: '#999999',
stroke: '#000000',
strokeWidth: 2
});

var myText = new fabric.Text("Some text", {
top: 250,
left: 250,
});


// set up a listener for the event where the object has been modified
gCanvas.observe('object:modified', function (e) {
var objects = gCanvas.getObjects();
for (i in objects) {
    console.log(objects[i]);
    objects[i].strokeWidth = 2;
}
});
var group = new fabric.Group([ myEllipse, myText ], {borderColor: 'black', cornerColor: 'green'});
gCanvas.add(group);`

最佳答案

硒更新小提琴
http://jsfiddle.net/6CDFr/264/
用于动态笔划宽度更改。

gCanvas.observe('object:modified', function (e) {
var myObject = e.target;

if (!myObject._objects) {
  return;
}
for (i in myObject._objects) {
    objects[i].strokeWidth = 2 / Math.sqrt(myObject.scaleX * myObject.scaleY);
}
});

请小心，我删除了几个canvas.add();。您不应同时在画布和组中添加对象。

还保留TEXT尺寸：

gCanvas.observe('object:added', function (e) {
    if (e.target.type === 'text' || e.target.type === 'i-text') {
        e.target.originalFontsize = e.target.fontSize;
    }
});
gCanvas.observe('object:modified', function (e) {
var myObject = e.target;

if (!myObject._objects) {
  return;
}
for (i in myObject._objects) {
    var obj = myObject._objects[i];
    var scaleFactor = Math.sqrt(myObject.scaleX * myObject.scaleY);
    obj.strokeWidth = 2 / scaleFactor;
    if (obj.type === 'text' || obj.type === 'i-text') {
        obj.fontSize = obj.originalFontsize / scaleFactor;
    }
}
});

查看更新的小提琴http://jsfiddle.net/6CDFr/269/

关于javascript - 无法维护fabric.js组元素的strokeWidth，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33913185/