替换fabricjs中的对象？答案

【问题标题】：Replace an object in FabricJS?替换fabricjs中的对象？
【发布时间】：2020-04-09 01:05:13
【问题描述】：

为了实现撤消/重做功能，我构建了一个数组“history”，其中填充了基于canvas.on() 事件的最新更改。

console.log 转储：

History: 
(3) […]

0: Object { target: {…} } //first object added

1: Object { e: mouseup, target: {…}, transform: {…}, … } //first object modified

2: Object { target: {…} } //another object added

length: 3

要退回更改堆栈，我想使用history[step].target，它包含现阶段修改后的对象 (step)。

我现在正在寻找一种方法来覆盖 fabric 对象数组中的一个对象。

canvas.item(0) 函数给出了当前画布上位置 0 的对象，但我如何用不同的对象（来自 history[].target 数组）覆盖该对象？

注意：我为撤消/重做找到的解决方案似乎是基于将整个画布序列化为 JSON 并将其保存到 JSON 数组中。我不想这样做，因为总是序列化/反序列化带有 x 个对象的整个画布似乎有点简单，只是为了撤消一个小的更改，并且历史记录包含许多关于更改的内容和对象等的有用信息。

注意 2：当然我可以先 canvas.remove(canvas.item(0)) 然后 canvas.add(history[x].target)，但是不幸的是，当有多个对象时，这会弄乱我的对象堆栈，因为 canvas.item(1) 变为 canvas.item(0) 并且还原的更改现在变为 @ 987654333@（或 2、3... 等，具体取决于画布上的项目数量）。然后，当我根据对象堆栈中的位置显示对象列表时，它会重新排列，可能会使用户感到困惑。

【问题讨论】：

你看过fabricjs.com/docs/fabric.Canvas.html#insertAt吗？

标签： javascript fabricjs

【解决方案1】：

这是一个简单的例子。

给定画布上的 2 个矩形，一个函数将在这 2 个中间添加一个，另一个将替换位置 0 的那个。

canvas#insertAt 确实按照@gabriele-petroli 的建议工作

var c = new fabric.Canvas('c');

c.add(new fabric.Rect({ fill: 'blue', width: 100, height: 100 }));
c.add(new fabric.Rect({ fill: 'green', left: 150, width: 100, height: 100 }));

var redRect = new fabric.Rect({ fill: 'red', left: 75, width: 100, height: 100 });
var purpleRect = new fabric.Rect({ fill: 'purple', left: 0, 
width: 100, height: 100 });

setTimeout(function() {
  c.insertAt(purpleRect, 0, true);
  c.insertAt(redRect, 1);
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.5.0/fabric.min.js"></script>
<canvas id="c" width="500" height="500" ></canvas>

【讨论】：

接受了这个。只是为了添加到示例以使其更接近我的问题，它可以与 c.item(number) 一起使用，但必须记住，number 以零开头，如数组索引并访问 number 越界崩溃应用程序。

【解决方案2】：

据我所知，无法覆盖对象。

但这可能对您的 Note2 有所帮助：

除了 Gabriele Petrioli 注释外，您还可以在插入后将对象定位在堆栈中：

Canvas.moveTo()
Canvas.bringToFront()
Canvas.bringForward()
Canvas.sendBackwards()
Canvas.sendToBack()

见：http://fabricjs.com/docs/fabric.Canvas.html

【讨论】：