Как удалить линии сетки с помощью нажатия кнопки в canvas.js - PullRequest
Новая
       7

Как удалить линии сетки с помощью нажатия кнопки в canvas.js

0 голосов
/ 31 мая 2018

У меня есть две кнопки, одна для добавления сеток и другая для удаления сеток.Когда я нажимаю кнопку «Добавить», я пишу следующие строки кода: 

   var gridsize = 5;
   var gridoption={ stroke: "#000000", strokeWidth: 1, selectable:false, strokeDashArray: [5, 5],evented:false};

   for(var x=1;x<(canvas.width/gridsize);x++)
   {
    canvas.add(new fabric.Line([100*x, 0, 100*x, 600],gridoption));
    canvas.add(new fabric.Line([0, 100*x, 600, 100*x],gridoption));
   }

. С этими кодами сетки появляются при нажатии кнопки, но я также хочу удалить сетки при нажатии другой кнопки.без внесения каких-либо изменений в другие объекты на холсте.Так как я не выбираю здесь ни одного объекта.remove () тоже не работает.Пожалуйста помоги.

1 Ответ

0 голосов
/ 31 мая 2018

Создайте группу сеток, затем добавьте на холст, удаляя удалить объект группы;

DEMO 

var canvas = new fabric.Canvas('c', {
  width: 600,
  height: 600
})
var gridGroup;

function addGrid() {
  if (gridGroup) return;
  var gridsize = 5;
  var gridoption = {
    stroke: "#000000",
    strokeWidth: 1,
    strokeDashArray: [5, 5]
  };
  var gridLines = [];
  for (var x = 1; x < (canvas.width); x += 100) {
    gridLines.push(new fabric.Line([x, 0, x, canvas.width], gridoption));
  }
  for (var x = 1; x < (canvas.height); x += 100) {
    gridLines.push(new fabric.Line([0, x, canvas.height, x], gridoption));
  }
  gridGroup = new fabric.Group(gridLines, {
    selectable: false,
    evented: false
  })
  gridGroup.addWithUpdate();
  canvas.add(gridGroup);
}

function removeGrid() {
  gridGroup && canvas.remove(gridGroup);
  gridGroup = null;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<button onclick='addGrid()'>Add</button>
<button onclick='removeGrid()'>Remove</button>
<canvas id="c" style="border:1px solid black"></canvas>
...