javascript - 复制 Canvas 时禁用除 1 个 Canvas 之外的所有 Canvas 上的对象？

Question

我有这组 Canvas 和一个将第一个 Canvas 复制到其余 Canvas 的函数。如何使除第一个 Canvas 之外的所有 Canvas 都不可选择/不可编辑？

除了 c0 之外，我尝试向每个 Canvas 添加如下内容，但没有成功:

c1.selection = false;
c1.forEachObject(function(o) {
  o.selectable = false;
});

这是我的代码，here's a fiddle of the same :

var canvas = [];
for (i = 0; i <= 7; i++) {
  canvas.push(new fabric.Canvas('c' + i));
}

console.dir(canvas);

var rect = new fabric.Rect({
  left: 50,
  top: 50,
  fill: 'blue',
  width: 100,
  height: 100
});

canvas[0].add(rect);

$('#copyBtn').click(function() {
  var json = JSON.stringify(canvas[0]);
  for (i = 1; i <= 7; i++) {
    canvas[i].loadFromJSON(json);
  }
});

body {
  margin: 0;
}
canvas {
  border: 1px solid #dddddd;
}
table {
border-spacing: 0;
border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<button id="copyBtn">Copy</button>

<table>
  <tr>
    <td>
      <canvas id="c0" width="208" height="360"></canvas>
    </td>
    <td>
      <canvas id="c1" width="208" height="360"></canvas>
    </td>
    <td>
      <canvas id="c2" width="208" height="360"></canvas>
    </td>
    <td>
      <canvas id="c3" width="208" height="360"></canvas>
    </td>
  </tr>
  <tr>
    <td>
      <canvas id="c4" width="208" height="360"></canvas>
    </td>
    <td>
      <canvas id="c5" width="208" height="360"></canvas>
    </td>
    <td>
      <canvas id="c6" width="208" height="360"></canvas>
    </td>
    <td>
      <canvas id="c7" width="208" height="360"></canvas>
    </td>
  </tr>
</table>

Answer 1

如果您不需要任何用户交互，您可以创建 fabric.StaticCanvas 的对象。

演示

var canvas = [];
for (i = 0; i < 7; i++) {
  canvas.push(new fabric.Canvas('c' + i));
}
canvas.push(new fabric.StaticCanvas('sc1'));

var rect = new fabric.Rect({
  left: 50,
  top: 50,
  fill: 'blue',
  width: 100,
  height: 100
});

canvas[0].add(rect);

$('#copyBtn').click(function() {
  var json = JSON.stringify(canvas[0]);
  for (i = 1; i <= 7; i++) {
    canvas[i].loadFromJSON(json);
  }
});

body {
  margin: 0;
}
canvas {
  border: 1px solid #dddddd;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<button id="copyBtn">Copy</button>

<table>
  <tr>
    <td>
      <canvas id="c0" width="208" height="360"></canvas>
    </td>
    <td>
      <div style="width: 208px;height: 360px;position: relative;">
       <canvas id="sc1" width="208" height="360"></canvas>
      </div>
    </td>
    <td>
      <canvas id="c1" width="208" height="360"></canvas>
    </td>
    <td>
      <canvas id="c2" width="208" height="360"></canvas>
    </td>
  </tr>
  <tr>
    <td>
      <canvas id="c3" width="208" height="360"></canvas>
    </td>
    <td>
      <canvas id="c4" width="208" height="360"></canvas>
    </td>
    <td>
      <canvas id="c5" width="208" height="360"></canvas>
    </td>
    <td>
      <canvas id="c6" width="208" height="360"></canvas>
    </td>
  </tr>
</table>