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删除item.remove().，而item是使用id的{{1}}来获取的。删除后，如果undoList的前一个元素具有相同的undoList，那么我将添加它（以便恢复先前的状态）。

现在，尽管我更改了颜色，但id中的两个项目都具有相同的颜色。因此，没有可见的变化。我认为这是因为它们都指向同一个对象。

我该如何克服这个问题？

Answer 1

您正在处理两个指向同一对象的引用。

您可以执行以下操作：

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

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

旁注：您可能希望改用Command Pattern；基本思想是，您存储对Item执行的操作，而不是每次撤消/重做时都快照其全部数据。

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

1 个答案: