Question

以下代码正好要删除点击按钮上的网格线我使用canvas with fabric.js here is link

   $("#ungrid").click(function() {


                var a= fabric.GetLine();  
              alert(a);

        var width = canvas.width;
        var height = canvas.height;

        var j = 0;
        var line = null;
        var rect = [];
        var size = 20;

        console.log(width + ":" + height);

        for (var i = 0; i < Math.ceil(width / 20); ++i) {
            rect[0] = i * size;
            rect[1] = 0;

            rect[2] = i * size;
            rect[3] = height;

            line = null;
            line = new fabric.Line(rect, {
                stroke: '#999',
                opacity: 0.5
            });

这是功能画布删除行 canvas.remove（线）; // canvas.clear（line）; line.selectable = false;

      canvas.remove(line);
            line.sendToBack();

        }

        for (i = 0; i < Math.ceil(height / 20); ++i) {
            rect[0] = 0;
            rect[1] = i * size;

            rect[2] = width;
            rect[3] = i * size;

            line = null;
            line = new fabric.Line(rect, {
                stroke: '#999',
                opacity: 0.5
            });
            line.selectable = false;

            canvas.remove(line);
            line.sendToBack();

        }
        canvas.remove(line);
        canvas.renderAll(); 

              }) ;

Answer 1

试试这段代码：

var canObject = new Array();
canObject = canvas.getObjects();
while(1){
    for(var tempObjNumber = 0;tempObjNumber<canObject.length;tempObjNumber++){
       if(canvas.item(tempObjNumber).type == 'line'){
            canvas.item(tempObjNumber).remove();
         canvas.renderAll();
        }
    }
    canvas.renderAll();
    canObject = canvas.getObjects();
    var lineStatus = false;
    for(var tempObjNumber = 0;tempObjNumber<canObject.length;tempObjNumber++){
        if(canvas.item(tempObjNumber).type == 'line'){
        lineStatus = true;
        }
    }
    if(lineStatus){
        canObject = canvas.getObjects();
        continue;
    }else{
        break;
    }       
}

Answer 2

这是整体解决方案。在canvas fabric.js中添加和删除网格以在画布中添加网格以ht ml创建按钮网格并删除ht ml中的网格创建按钮ungrid 按钮的id和类与名称

相同

     $("#grid").click(function() {
   var width = canvas.width;
var height = canvas.height;
var j = 0;
var line = null;
var rect = [];
var size = 20;
console.log(width + ":" + height);
 for (var i = 0; i < Math.ceil(width / 20); ++i) {
    rect[0] = i * size;
    rect[1] = 0;
    rect[2] = i * size;
    rect[3] = height;
    line = null;
    line = new fabric.Line(rect, {
        stroke: '#999',
        opacity: 0.5
    });
      line.selectable = false;
      canvas.add(line);
       line.sendToBack();
        }
for (i = 0; i < Math.ceil(height / 20); ++i) {
    rect[0] = 0;
    rect[1] = i * size;
    rect[2] = width;
    rect[3] = i * size;
    line = null;
    line = new fabric.Line(rect, {
        stroke: '#999',
        opacity: 0.5
    });
    line.selectable = false;
  canvas.add(line);
    line.sendToBack();
   }
   canvas.renderAll();
});
//************************Remove Grid***************
$("#ungrid").click(function () {
//alert("ungrid");
var canObject = new Array();
canObject = canvas.getObjects();
while(1){
    for(var tempObjNumber = 0;tempObjNumber<canObject.length;tempObjNumber++){
       if(canvas.item(tempObjNumber).type == 'line'){
            canvas.item(tempObjNumber).remove();
         canvas.renderAll();
        }
    }
    canvas.renderAll();
    canObject = canvas.getObjects();
    var lineStatus = false;
    for(var tempObjNumber = 0;tempObjNumber<canObject.length;tempObjNumber++){
        if(canvas.item(tempObjNumber).type == 'line'){
        lineStatus = true;
        }
    }
    if(lineStatus){
        canObject = canvas.getObjects();
        continue;
    }else{
        break;
    }       
}
});

使用fabric.js隐藏canv上的网格视图

2 个答案: