撤销与重做

diy.js作为一个业务级图形库，自带了完整的撤销与重做功能。

介绍

diy.js提供了一些撤销与重做相关的基础API：

/* 存储可撤销数据的对象 */
const z = stage.z;
/* 存储可重做数据的对象 */
const z = stage.y;

/* 记录当前所有素材状态，到可撤销的数据对象 */
stage.r();

/* 导出代表当前所有素材状态的快照，但不进行记录 */
const snap = stage.snap();
/* 导入素材状态 */
stage.alter(snap);

/* 导出代表当前舞台状态的快照 */
const snap = stage.snap(true);
/* 将舞台替换为指定状态 */
stage.alter(snap, true);

/* 手动记录 */
stage.r(snap);

/* 撤销 */
stage.undo();
/* 重做 */
stage.redo();

/* 清空所有快照数据 */
stage.clearSnap();

/* 监听快照变化 */
stage.on('snapTest', (e) => {
    console.log(e);
})

举例

一些不会触发舞台事件的场景需要主动保存快照，比如：

/* 获取被激活的图形 */
const active = stage.getActive();

/* 调整 */
if (active && active.canFlip) {
    /* 记录快照 */
    stage.r();
    /* 按Y轴翻转图形 */
    active.flipY();
}

/* 撤销，恢复到未翻转前的状态 */
stage.undo();

/* 重做，恢复到翻转后的状态 */
stage.redo();

大部分场景都可以通过舞台事件来实现自动记录：

/* 改变图层、移除图形、复制图形 */
stage.on(['before-sort', 'before-add', 'before-delete', 'before-copy'], () => {
    stage.r();
});

在线演示

你可以访问我们的演示案例来体验DIY.JS的功能。