Scale some object but not others in a Fabric group?

Question

I have a group that contains a text object and a rectangle object. When the group is scaled I want the rectangle object to change size but the text object to remain the same size.

Any way to accomplish this?

Answer 1

Mathematics! to the rescue!

look the fiddle!

http://jsfiddle.net/davidtorroija/w64bsnon/2/

  var line;
  var canvas = this.__canvas = new fabric.Canvas('c');
  fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

  canvas.on({
    'object:scaling': function(p){
    	console.log('p',p.target.ScaleX )
      //p.target._objects[0].scaleX = p.target.scaleX
      //p.target._objects[0].scaleY = p.target.scaleY
      
      //p.target.scaleX = 1
      //p.target.scaleY = 1
			if (p.target.scaleX < 1)
      	p.target._objects[1].scaleX = 1 + (1 -p.target.scaleX )
      else
	      p.target._objects[1].scaleX = 1 / (p.target.scaleX)
      if (p.target.scaleY < 1)
      	p.target._objects[1].scaleY = 1 + (1 -p.target.scaleY)
      else
	      p.target._objects[1].scaleY = 1 / (p.target.scaleY)
  
      canvas.renderAll()
    },
  });
  
  var rect = new fabric.Rect({top: 110, left:110, height: 100, width: 100, fill:'#ccc'})
  
   var text = new fabric.IText('pepe',{text: 'pepe',top: 110, left:110, height: 100, width: 100, fill:'#000'})
  
  var group = new fabric.Group([rect,text])
  
  canvas.add(group)


 

<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>