FabricJS 在 canvas 个元素之间交替？

Question

假设我有两个 canvas 元素：

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

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

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

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

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

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

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

在您回复之前，请注意我很清楚我可以对 c2 元素使用相同的方法，但我想在 canvas 元素之间切换，而不是我有一些计划。

Answer 1

我不完全确定 canvas 元素之间交替的意思，但这是我的建议。

首先初始化所有canvases:

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 操作时引用适当的 canvas：

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

FabricJS 在处理多个 canvases 时没有内置的 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 变量将始终引用您鼠标最后输入的 canvas。显然，如果您想支持触摸设备，使用 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

的回答是一个很棒的解释，我建议您阅读它，但我想以他所说的一件事为基础。您可以像这样初始化它们：

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);
});

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

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

FabricJS 在 canvas 个元素之间交替？

FabricJS Alternating between canvas elements?

javascript

html

canvas

html5-canvas

fabricjs