我有幾組畫布。在組中有兩個文字和線條，我想用選定的文字調整選中的線條的大小。現在我已經輸入文本，並且當我在輸入文本中選擇一組時，實際上是高度，但現在我將值更改爲文本字段並調整了組/對象的大小，但是我有問題「邊框」允許我調整大小和旋轉對象的這個元素。當我設置SelectedObject.set({height: 300});只有邊框正在調整大小，scaledObject.item(0).set({height: 300});只有線沒有邊框，當我把它放在一起時，一切都調整大小，但邊框不是圍繞對象，我怎麼可以調整對象正確使用輸入文本？面料JS調整大小組
我有這樣的解決方案，具有數字和文字一組，我這樣做是爲了保持文本大小和邊框寬度爲好。
var canvas = new fabric.Canvas("c1");
reinit()
canvas.on({
'object:scaling': function(e) {
\t
var obj = e.target,
w = obj.width * obj.scaleX,
h = obj.height * obj.scaleY,
s = obj.strokeWidth;
console.log(obj.width, obj.scaleX, h,w,s)
\t \t
obj._objects[0].set({
'height' : obj.height,
'width' : obj.width,
'scaleX' : 1,
'scaleY' : 1,
h: h,
w: w
//top: 1,
//left: 1,
});
/*e.target.set({
'height' : h,
'width' : w,
'scaleX' : 1,
'scaleY' : 1
});*/
}
});
canvas.on({
'object:modified': function(e) {
console.log(e)
//e.target.set({scaleX:1, scaleY:1})
\t group = e.target
\t rect = e.target._objects[0]
rect.set({height:rect.h, width: rect.w})
console.log('r',rect.width, group.width)
text = group._objects[1]
canvas.remove(group)
canvas.add(new fabric.Group([rect,text], {
\t top: group.top,
left: group.left
}))
}
});
function reinit(){
\t var el = new fabric.Rect({
originX: "left",
originY: "top",
stroke: "rgb(0,0,0)",
strokeWidth: 1,
fill: 'transparent',
opacity: 1,
width: 200,
height: 200,
cornerSize: 6
\t });
var text = new fabric.IText('test', { fontSize: 16});
var group = new fabric.Group([ el, text ], {
width: 200,
height: 200,
left: 5,
top: 5,
});
canvas.add(group);
\t canvas.renderAll();
}<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id="c1" width="600" height="500" style="border:1px solid #ccc"></canvas>這裏的小提琴http://jsfiddle.net/davidtorroija/qs0ywh8k/1/
，如果這是不是對你有用，你也有這個答案的其他方式：
how to display size on shape after scaled using fabric js?
Rect with stroke, the stroke line is mis-transformed when scaled
編輯： 在這裏你有另一個完美的例子！ 也使用橢圓和三角形等 http://jsfiddle.net/GrandThriftAuto/6CDFr/15/