Question

在这里使用fabricjs我试图在计算价格按钮的点击事件上丢弃活动对象和组。当我在画布中添加一些文本或图像时，如果我选择该对象并按下Calulate Price按钮（＃chk-price所选对象正在屏幕上居中。在计算价格按钮时，我正在制作一组所有对象，在计算价格后，根据组高度和宽度计算设计价格，我已取消选择画布中的所有对象或组。 / p>

网站链接： - click here

Bellow是我用来丢弃对象的代码

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

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

Bellow是我用来计算相同按钮点击价格的代码（＃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();
    // }

});

Answer 1

不确定是什么导致了您的问题，但您的代码回答了我在谷歌上搜索的内容，所以我会开枪。

您正在使用1.4.0版本的结构，所以我的猜测是这是一个结构中的错误。我使用1.4.7的类似代码没有问题。

如果您无法升级，请尝试将您创建的群组对象更改为：

var group = new fabric.Group(objs);

默认情况下，Fabric不再使用中心原点，所以当您放弃活动组时，这可能会让您感到困惑吗？它是按group.width / 2移动吗？

===

这是我的面料1.4.7代码正常运行。我正在使用它来加载整个设计。

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

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

另请注意：我覆盖原点默认设置，将它们放回中心（而不是顶部/左侧）：

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

Fabric.js：在画布中显示丢弃活动组和对象的问题。

1 个答案: