javascript - scale image by scaling rectangle without group fabric.js

Question

I am new in fabric.js and want to achieve one functionality I added image and one rectangle same size of image, now I want to scale image while scaling rectangle. I don't want to group objects , image should scale by scaling rectangle with previous left, top position of image

below is my code

var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';

var canvas = new fabric.Canvas('canvas');
var pug;
var pugImg = new Image();
pugImg.onload = function (img) {    
    pug = new fabric.Image(pugImg, {
        angle: 0,
        width: 500,
        height: 500,
        left: 50,
        top: 70,
        scaleX: .25,
        scaleY: .25,
        selectable: false
    });
    var rect = new fabric.Rect({
      top: 65,
      left: 200,
      width: 150,
      height: 150,
      fill: 'red',
    });
    canvas.sendToBack(rect);
    canvas.bringToFront(pug);
    
    canvas.add(rect);
    canvas.add(pug);
    canvas.renderAll();
    
};
pugImg.src = imgURL; 
canvas.on('object:scaling', function(e) {
  var bounds = e.target.getBoundingRect();
  pug.set({
    width: bounds.width,
    height: bounds.height,
    top: bounds.top,
    left: bounds.left
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.js"></script>
<canvas id="canvas" width=400 height=400></canvas>

question from:https://stackoverflow.com/questions/65950627/scale-image-by-scaling-rectangle-without-group-fabric-js

Answer 1

I added image and one rectangle same size of image

In your example the rectangle is not the same size as the image

rect = {
  width: 150,
  height: 150,
  scaleX: 1,
  scaleY: 1,
}
pug = {
    width: 500,
    height: 500,
    scaleX: .25,
    scaleY: .25
});

To achieve the desired effect, you need to give theme the same (width, height, scaleX, scaleY), then just copy the rect (scaleX, scaleY) to the pug. otherwise if they're not the same size you'll need to compute the scale ratio between the two.

var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';

var canvas = new fabric.Canvas('canvas');
var pug, rect;
var pugImg = new Image();
pugImg.onload = function (img) {    
    pug = new fabric.Image(pugImg, {
        angle: 0,
        width: 500,
        height: 500,
        left: 50,
        top: 70,
        scaleX: .25,
        scaleY: .25,
        selectable: false
    });
    rect = new fabric.Rect({
      top: 65,
      left: 200,
      width: 500,
      height: 500,
      scaleX: .25,
      scaleY: .25,
      fill: 'red',
    });
    canvas.sendToBack(rect);
    canvas.bringToFront(pug);
    
    canvas.add(rect);
    canvas.add(pug);
    canvas.renderAll();
    
};
pugImg.src = imgURL; 
canvas.on('object:scaling', function(e) {
  pug.set({
    scaleX: rect.scaleX,
    scaleY: rect.scaleY,
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.js"></script>
<canvas id="canvas" width=400 height=400></canvas>