0

这是代码必须删除单击按钮上的网格线我正在使用带有fabric.js的画布这里是链接 

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

              }) ;
4

2 回答 2

3

试试这个代码：

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;
    }       
}
于 2013-09-12T10:51:56.800 回答
3

这是完整的解决方案。在 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;
    }       
}
});
于 2013-09-13T08:27:29.417 回答