CODEWITHSUNDEEP
html5-canvasfabricjs
user2866205
user2866205

Reputation: 79

Fabric JS resize group

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?

sample image

Upvotes: 0

Views: 2857

Answers (1)

David Torroija
David Torroija

Reputation: 623

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/

Upvotes: 1

Related Questions