CODEWITHSUNDEEP
fabricjs
Sanjay Nakate
Sanjay Nakate

Reputation: 2098

Fabric.js: Issue with discard active group and object presented in the canvas.

Working on fabricjs here i am trying to discard active object and groups on click event of Calculate Price button.When i add some text or image into the canvas and if i select that object and press Calulate Price button(#chk-price) selected object is going centering off-screen.On calculate price button i am making a group of all object to calculate the price of design according to group height and width after calculate price i have deselect the all object or group in the canvas.

Site Link:- click here

Bellow is the code which i am using for discard the object

$('#chk-price').click(function(e) {

        canvas.discardActiveGroup();
        canvas.discardActiveObject();
         canvas.renderAll();
    });

Bellow is the code which i am using to calculate price on same button click(#chk-price)

document.getElementById('chk-price').addEventListener('click', function (e) {
    //function calculate_final_design_price()
 //{
   var objs = canvas.getObjects().map(function(o) {

  return o.set('active', true);
});
//alert("logo" + globl_id_logo + "text" + globl_Text_id + "svg" + globl_id );
var group = new fabric.Group(objs, {
  originX: 'center', 
  originY: 'center',
   //id: globl_Text_id
});
//globl_Text_id++;
canvas.activeObject = null;


     var grup_width=group.getWidth();
     var grup_height=group.getHeight();
     var txt_width=$('#input-value').val();
     grup_width=grup_width.toFixed(2);
      grup_height=grup_height.toFixed(2);
     parseFloat(txt_width);
    // alert(txt_width);
     var width= txt_width*price_unit;   
     var  inchweight=width; //1.042/100*width;
     inchweight=inchweight.toFixed(2);

     var get_left = function_getheight(grup_width,grup_height,txt_width);
     //alert(get_left);
     var left= get_left*price_unit;
     var inchieght=left;//1.042/100*left;
    inchieght=inchieght.toFixed(2);

      //alert(inchweight);
      //alert(inchieght);
     var total= inchieght * inchweight;
     var x=total/144;



//Calculate price if text only
if(globl_Text_id>1 && globl_id==1){

    var type="Text Only";
        var sf="$40";
         var ftotal = x * SF_A;
          ftotal=ftotal.toFixed(2);

}
//Calculate price if svg image only
if(globl_Text_id==1 && globl_id>1){
    var type="Svg Only";
        var sf="$50";
     var ftotal = x * SF;
      ftotal=ftotal.toFixed(2);
}
//Calculate price if text + svg image
if(globl_Text_id>1 && globl_id>1){

    var type="Both Text and Svg";
            var sf="$60";
            var ftotal = x * SF_TS;
      ftotal=ftotal.toFixed(2);

}

//Calculate price if custom logo only
if(globl_Text_id==1 && globl_id==1 && globl_id_logo>1){

    var type="Custom Logo";
            var sf="$55";
            var ftotal = x * SF_C;
      ftotal=ftotal.toFixed(2);

}
//Calculate price if text + svg image + custom logo only

if(globl_Text_id>1 && globl_id>1 && globl_id_logo>1 ){
    var type=" text ,svg image,custom logo";
            var sf="$75";
            var ftotal = x * SF_SCT;
      ftotal=ftotal.toFixed(2);

}

//Calculate price if text + custom logo only
if(globl_Text_id>1 && globl_id_logo>1 && globl_id==1){

    var type=" Text ,Custom Logo";
            var sf="$65";
            var ftotal = x * SF_TC;
      ftotal=ftotal.toFixed(2);


}
//Calculate price if svg image + cutom logo only
if(globl_id>1 && globl_id_logo>1 && globl_Text_id==1 ){

    var type=" Svg ,Custom Logo";
            var sf="$70";
            var ftotal = x * SF_SC;
      ftotal=ftotal.toFixed(2);
}

if(ftotal<50)
{
    ftotal=50;
}
$('#toatl_price').html(ftotal); 
$('#finl_price').html(ftotal);  
$('#design_size_height').html(inchieght);   
$('#design_size_width').html(inchweight);   

//if(globl_Text_id==1 && globl_id==1 && globl_id_logo==1 ){

    //alert("Can not calculate price with blank canvas");
//}
//else{
alert("Final Product contains  "+ type +" And Finale product total width "+ grup_width+" PX And Height "+ grup_height+" PX So  Total square foot Height = "+inchieght + " Width = "+ txt_width+ "So Total price is : (HxW of area)/144 x S.F. price) = $"+ftotal) ; 

    canvas.setActiveGroup(group.setCoords()).renderAll();
    canvas.discardActiveGroup();



      canvas.renderAll();
    // }

});

Upvotes: 0

Views: 2789

Answers (1)

Cory Mawhorter
Cory Mawhorter

Reputation: 1821

Not sure what's causing you problems, but your code answered what I was googling, so I'll take a shot.

You're using version 1.4.0 of fabric, so my guess is that this is a bug in fabric. I'm using similar code with 1.4.7 with no problems.

If you can't upgrade, try changing your Group object creation to:

var group = new fabric.Group(objs);

Fabric no longer uses center origin by default, so maybe this is confusing it when you discard the active group? Is it shifting by group.width / 2?

===

Here's my fabric 1.4.7 code that's working. I'm using it to scale an entire design on load.

var objs = canvas.getObjects()
  , group = new fabric.Group(objs);

canvas._activeObject = null;
canvas.setActiveGroup(group.scale(1.4).setCoords()).renderAll();
canvas.discardActiveGroup();

Also note: I override the origin defaults to put them back to center (and not top/left) with:

fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

Upvotes: 1

Related Questions