FabricJS 在画布元素之间交替？

Question

假设我有两个画布元素：

<canvas id="c1" width="400" height="300"></canvas>
<canvas id="c2" width="400" height="300"></canvas>
<canvas id="c3" width="400" height="300"></canvas>

通过查看文档，它告诉我可以使用它来将画布转换为 FabricJS 画布。

var c = new fabric.Canvas('c1', {
    preserveObjectStacking: true,
    isDrawingMode: false
});

现在，如果我想对这个新画布做点什么，例如添加一个圆圈，我可以使用这个函数：

function AddCircle() {
  var object = new fabric.Circle({
      radius: 15,
      fill: 'blue',
      left: 100,
      top: 100
  });
  c.add(object);
}

现在，这对c1 来说很好，但c2 和c3 不会做任何事情，因为它从未被初始化。那么是否可以在 FabricJS 画布元素之间交替使用？

我希望功能类似于activeCanvas.add(object) 而不仅仅是c.add(object)。

在您回复之前，请注意，我很清楚我可以对 c2 元素使用相同的方法，但我想在画布元素之间交替使用，因为我有一些计划。

Answer 1

我不完全确定您在画布元素之间交替是什么意思，但这是我的建议。

先初始化所有画布：

var options = { preserveObjectStacking: true, isDrawingMode: false };
var c1 = new fabric.Canvas('c1', options),
    c2 = new fabric.Canvas('c2', options),
    c3 = new fabric.Canvas('c3', options);

在执行 Fabric 动作时引用适当的画布：

c1.add(object1);
c2.add(object2);
c3.add(object3);

FabricJS 在处理多个画布时没有内置的 activeCanvas 变量，但您可以使用事件来实现。

//declare global activeCanvas variable and allCanvas array
var activeCanvas,
    allCanvas = [c1,c2,c3];

//create function for updating activeCanvas variable
function setActiveCanvas(canvas) {
   activeCanvas = canvas;
}

//adds event to each canvas to update the activeCanvas variable when the mouse enters any canvas
allCanvas.forEach(function(item,index){
    item.on('mouse:over', setActiveCanvas(this));
});

现在您的 activeCanvas 变量将始终引用您鼠标输入的最后一个画布。如果您想支持触摸设备，显然使用mouse:over 事件将不起作用，因此您可能需要选择最适合您的项目的another event。

现在您可以修改您的AddCircle() 函数以引用activeCanvas。

function AddCircle() {
  var object = new fabric.Circle({
      radius: 15,
      fill: 'blue',
      left: 100,
      top: 100
  });
  activeCanvas.add(object);
}

Answer 2

Melciar 的回答是一个很棒的解释，我建议你阅读它，但我想建立在他所说的一件事上。你可以像这样初始化它们：

var options = { preserveObjectStacking: true, isDrawingMode: false };
var c1 = new fabric.Canvas('c1', options),
    c2 = new fabric.Canvas('c2', options),
    c3 = new fabric.Canvas('c3', options),
    allCanvas = [c1, c2, c3];

现在您可以全部或单独修改它们。如果你想同时修改它们，你可以这样做：

allCanvas.forEach(function(item,index){
      var myCircle = new fabric.Circle({
          radius: 15,
          fill: 'blue',
          left: 100,
          top: 100
      });
      item.add(myCircle);
});

当然，您仍然可以按照melchair 的精彩解释单独修改它们：

c1.add(object1);
c2.add(object2);
c3.add(object3);