使用fabric.js隐藏画布上的网格视图答案

【问题标题】：Hide grid view on canvs using fabric.js使用fabric.js隐藏画布上的网格视图
【发布时间】：2013-09-25 23:05:03
【问题描述】：

这里是删除点击按钮上的网格线的代码，我正在使用带有 fabric.jshere 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.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(); 

              }) ;

【问题讨论】：

标签： jquery canvas fabricjs

【解决方案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;
    }       
}

【讨论】：

【解决方案2】：

这里是完整的解决方案。在 canvas fabric.js 中添加和删除网格以在画布中添加网格在 ht ml 中创建按钮网格并删除网格在 ht ml 中创建按钮 ungrid 按钮的 id 和 class 将与 name 相同

     $("#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;
    }       
}
});

【讨论】：