Fabric.js: Problem while resizing the rectangle

Code: https://codepen.io/eajithkumar128/pen/poNwJJv?editors=0010

I have a table like structure in the canvas drawn using a rectangle, I have drawn lines in the row and column ends like below (lines in blue color are rectangle and red color lines are the fabric line object)

enter image description here

I am trying to adjust the size of the rectangles by moving the lines, whenever I am moving the column lines I could see the entire rectangle itself moving wherein I am only trying to update the width, Also I could see an imaginary rectangle drawn behind it which has correct width, but the original rectangle is not resizing correctly. Please refer to the image below.

enter image description here

Code to get the rect object before and after lines while selecting the line:

canvas.on('selection:created', function(e){
        let targetEle = e.target;
    initialPosition = e.left;
    selectedBoxesLeft = []
        selectedBoxesRight = []
    canvas.forEachObject((v)=>{
        if(v.left+v.width === targetEle.left && v.type==="rect"){
        selectedBoxesLeft.push(v);
      }
      if(v.left === targetEle.left && v.type==="rect"){
        selectedBoxesRight.push(v);
      }
    });
    console.log(selectedBoxesLeft);
    console.log(selectedBoxesRight);
});

Code to resize while moving:

canvas.on('object:moving',function(e){
    let target = e.target;
  if(target.left < initialPosition){
    selectedBoxesLeft.forEach((v)=>{
      v.width =target.left - v.left
    })
    
    selectedBoxesRight.forEach((v)=>{
      let left = v.left
      v.left = target.left;
      v.width = v.width + (left- target.left)
    });
    canvas.renderAll()
  }else{
    // selectedBoxesLeft.forEach((v)=>{
    //   v.width = v.width + (target.left - v.width)
    // })
    // selectedBoxesRight.forEach((v)=>{
    //   // v.width = v.width + (v.left - target.left)
    //   v.left = target.left;
    //   v.width = v.width - target.left;
    // })
  }
});

10 thoughts on “Fabric.js: Problem while resizing the rectangle”

  1. While Resizing the rectangle instead of using

    v.width =target.left - v.left
    

    changed it to

    v.set('width', target.left - v.left)
    

    resolved the issue

    Reply
  2. current interest rate to borrow money i need loan [url=https://ineedloan.me/#]need loan[/url] personal loans bad credit unsecured. can you get a loan online quick loans nyc, how to get a loan without credit or bank account. get a payday loan online now [url=http://www.daggerbay.com/forum/viewtopic.php?f=5&t=35238&p=142321#p142321]get a loan today with no guarantor new[/url] 4635f4d personal loan rates unsecured, home improvement loans secured or unsecured, apply for a loan online with no credit. unsecured loans for new business in india unsecured loans instant approval, personal loan with kotak mahindra bank unsecured business loans uk bad credit. unsecured loan in guwahati get a low interest personal loan, vmbs unsecured loan interest rates secured vs unsecured loan interest rates. unsecured personal loan calculator unsecured loans 10 year term.

    Reply

Leave a Comment