更新 paperjs 中的路径并恢复以前的状态

Question

我正在尝试使用 paperjs 来创建形状。我还想实现撤消功能，所以当创建形状时，我将它推入 undoList

        const myCircle =  new Path.Ellipse({
            point: firstPoint,
            size: calculateSize(firstPoint, secondPoint)
        });
        this.undoList.push({
            name: myCircle.name,
            id: myCircle.id,
            type: "shape",
            object: myCircle
        });

然后我更改这个创建的圆圈的颜色并再次推送到 undoList。

        myCircle.strokeColor = "#ffffff;

        this.undoList.push({
            name: myCircle.name,
            id: myCircle.id,
            type: "shape",
            object: myCircle
        });

在我的撤消功能中，我尝试使用 item.remove(). 删除 item 此 item 是使用 undoList 的 id 获取的。删除后，我添加 undoList 的前一个元素，如果它具有相同的 id （以便恢复以前的状态）。

现在虽然我已经改变了颜色，但是 undoList 中的两个项目具有相同的颜色。所以，没有可见的变化。我认为这是因为它们都指向同一个对象。

我该如何解决这个问题？

Answer 1

您正在操作 2 个指向同一个对象的引用。

您可以做的是：

每次更改 Item 时，请执行 Item.exportJSON() 并将 JSON 存储在撤消列表中。这样您就可以将 Item 的数据存储为 String，而不是引用。
当你想 undo/redo 离开你的堆栈时 .pop() 然后做 myCircle.importJSON(json).

这只是一种方法，但在内存消耗方面并不是很有效。

旁注：您可能想改用 Command Pattern；基本思想是存储对 Item 执行的操作，而不是每次 undo/redo.

时都对它们的整个数据进行快照

更新 paperjs 中的路径并恢复以前的状态

Updating path in paperjs and restoring previous state

canvas

paperjs