example keep margins

by ps7566

HTML

<canvas id="c"></canvas>

JavaScript

var canvas = new fabric.Canvas("c",{
	width: 600,
  height: 500
});
var a = new fabric.Rect({
  left: 70,
  top: 70,
  fill: 'blue',
  width: 100,
  height: 100,
  strokeWidth: 0
});
var b = new fabric.Rect({
	top: a.top + a.height/2,
  left: a.left + a.width/2,
	width: 80,
  height: 60,
  fill: 'black',
  strokeWidth: 0,
  originX: 'center',
  originY: 'center',
});
var g=new fabric.Group([a,b]);
canvas.on('object:scaling',(p)=>{
  var outer_obj = p.target.item(0);
  var inner_obj = p.target.item(1);
  var target_scale_x = p.target.scaleX;
  var target_scale_y = p.target.scaleY;
  var new_inner_scale_x = ((outer_obj.width * target_scale_x)-20)/inner_obj.width;
  var new_inner_scale_y = ((outer_obj.height * target_scale_y)-40)/inner_obj.height;
  inner_obj.scaleX = new_inner_scale_x;
  inner_obj.scaleY = new_inner_scale_y;
});
g.noScaleCache = false;
canvas.add(g);