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

【问题标题】：Updating path in paperjs and restoring previous state更新paperjs中的路径并恢复以前的状态
【发布时间】：2019-03-29 06:48:25
【问题描述】：

我正在尝试使用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 中的两个项目颜色相同。因此，没有可见的变化。我认为这是因为它们都指向同一个对象。

我该如何解决这个问题？

【问题讨论】：

标签： canvas paperjs

【解决方案1】：

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

你可以做的是：

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

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

旁注：您可能想考虑改用Command Pattern；基本思想是，您将在 Item 上执行的操作存储起来，而不是在每次撤消/重做时对它们的全部数据进行快照。

【讨论】：