Скрыть вид сетки на canvs с помощью fabric.js

Question

Вот код точно придется удалить линии сетки на кнопку мыши, я использую холст с 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.clear (строка); 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

Вот общее решение. добавлять и удалять сетку в холсте fabric.js для добавления сетки в холсте создать кнопку сетку в ХТАХ мл и для удаления сетки создать кнопку ungrid в ХТАХ мл идентификатора и класс кнопки будет совпадать с именем

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