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.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

これが完全な解決策です。キャンバスにグリッドを追加および削除するには、キャンバスにグリッドを追加し、html にボタン グリッドを作成し、グリッドを削除するには、ht ml にボタン 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;
    }       
}
});
于 2013-09-13T08:27:29.417 に答える