Fabric JS resize group - html5-canvas

Question

I have Canvas with a few group. In group are two text and Line, i wanna resize selected Line with using Input Text. Now i have input text, and when i select a group in input text is actually height, but now i change value to text field and resize Group/Object but i have problems "border" this element which allows me resize and rotate Object. When i set SelectedObject.set({height: 300}); only border is resizing, scaledObject.item(0).set({height: 300}); only line without border, when i put this together everything is resized but border is not around object, how i can resize Object correctly with using Input Text?

Answer 1

I have this solution for a group that has a figure and text, I did this to maintain the text size and border width as well.
var canvas = new fabric.Canvas("c1");
reinit()
canvas.on({
'object:scaling': function(e) {
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)
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})
group = e.target
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], {
top: group.top,
left: group.left
}))
}
});
function reinit(){
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
});
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);
canvas.renderAll();
}
<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id="c1" width="600" height="500" style="border:1px solid #ccc"></canvas>
here the fiddle http://jsfiddle.net/davidtorroija/qs0ywh8k/1/
and if this is not useful to you also you have other ways in this answers:
how to display size on shape after scaled using fabric js?
Rect with stroke, the stroke line is mis-transformed when scaled
EDIT:
Here you have another perfect example!
also uses ellipses and triangles etc
http://jsfiddle.net/GrandThriftAuto/6CDFr/15/