Question

我需要两个按钮，一个用于添加网格，另一个用于删除网格。当我点击添加按钮时，我正在编写以下代码行：

array:30 [
  0 => array:26 [
    "ci" => array:3 [
      "url" => null
      "provider" => null
      "buildNumber" => "15718"
    ]
    "commit" => array:6 [
      "authorName" => null
      "authorEmail" => null
      "message" => null
      "branch" => "master"
      "sha" => null
      "url" => null
    ]
    "id" => null
    "projectId" => null
    "projectName" => null
    "buildNumber" => 39399
    "cypressVersion" => "2.1.0"
    "totalPassed" => 1
    "totalFailed" => 0
    "totalPending" => 0
    "totalSkipped" => null
    "totalDuration" => 15228
    "completedAt" => "2018-05-30T02:05:59.727Z"
    "createdAt" => "2018-05-30T02:05:44.499Z"
    "updatedAt" => "2018-05-30T02:05:59.727Z"
    "status" => "passed"
    "specPattern" => null
    "runUrl" => null
    "projectUrl" => null
    "specIsolation" => false
    "loadBalancing" => false
    "instances" => array:1 [
      0 => array:19 [
        "platform" => array:7 [
          "browserName" => "Electron"
          "browserVersion" => "59.0.3071.115"
          "osCpus" => null
          "osMemory" => null
          "osName" => "linux"
          "osVersion" => "Debian - 8.10"
          "osVersionFormatted" => "Debian - 8.10"
        ]
        "createdAt" => "2018-05-30T02:05:44.648Z"
        "claimedAt" => null
        "completedAt" => "2018-05-30T02:05:59.694Z"
        "error" => null
        "failed" => 0
        "id" => "d941be0c-27a7-41e9-b26f-bdaaedc494be"
        "machineId" => null
        "passed" => 1
        "pending" => 0
        "status" => "passed"
        "stdout" => null
        "skipped" => null
        "spec" => "/root/app/cypress/integration/api/intent-match_spec.js"
        "wallClockDuration" => 2785
        "wallClockStartedAt" => null
        "wallClockEndedAt" => null
        "videos" => null
        "screenshots" => null
      ]
    ]
    "failedTests" => null
    "orgId" => null
    "orgName" => null
    "orgDefault" => false
  ]
]

使用这些代码，只需单击按钮即可显示网格，但是我还想在单击另一个按钮后删除网格，而不对画布中的其他对象进行任何更改。因为我这里没有选择任何物体。 remove（）也无效。请帮忙。

Answer 1

创建一组网格，然后添加到画布，同时删除删除组对象;

<强> 样本

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>

如何在fabric.js画布中单击按钮删除网格线

1 个答案: