复制画布时禁用除1画布以外的所有对象？

Question

我有这组画布和一个将第一个画布复制到其余画布的功能。除了第一张画布以外，我怎能拍出不可选择/不可编辑的画布？

我尝试在每个画布上添加以下内容，除了c0，没有运气：

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>