我正在使用FabricJs来创建在线图像编辑器 .
这是一个简单的事情,这个动作:缩放,旋转,flipX,撤消,重做 .
我首先尝试使用toJSON和fromJSON,但我看到当用户点击撤销按钮时,fabricjs重新加载图像,并且返回 canvas.toJSON()
的配置对象非常大,我想存储所有步骤一个数据库 .
我试图创建自己的配置对象,只存储以下属性:
{
filters: FabricFilter[];
rotation: number;
flipX: boolean;
position: {
top: number,
left: number
};
zoom: number;
}
单个鼠标事件是当用户在画布中移动/调整图像时,所有其他操作都是以编程方式进行的 .
我遇到的问题是,当用户旋转图像,然后尝试应用过滤器时,旋转将丢失,或者图像不在画布中 .
我在这里放置一些代码:
setConfig(canvasEl, imageEl, config) {
if (config.hasOwnProperty('zoom')) {
canvasEl.setZoom(config.zoom);
}
if (config.hasOwnProperty('flipX')) {
imageEl.flipX = config.flipX;
}
if (config.hasOwnProperty('position')) {
imageEl.top = position.top;
imageEl.left = position.left;
}
if (config.hasOwnProperty('rotation')) {
imageEl.angle = rotation;
}
if (config.hasOwnProperty('filters')) {
imageEl.filters = config.filters;
imageEl.applyFilters();
}
}
问题是我不知道如何存储配置
fabric canvas(与toJSON,loadFromJSON相同,但属性较少),然后根据存储的配置更新canvas对象 .
任何帮助将非常感激 . 也许我没有解释我的问题非常好,所以如果你们中的任何人不理解某些事情,我将非常乐意回答你们的问题并编辑帖子 .
谢谢