1

我正在使用 FabricJs 创建一个在线图像编辑器。

是一个简单的东西，这个动作：缩放、旋转、flipX、撤消、重做。

我首先尝试使用 toJSON 和 fromJSON，但是我看到当用户单击撤消按钮时，fabricjs 会重新加载图像，并且返回的配置对象canvas.toJSON()非常大，我想将所有步骤存储在一个数据库。

我尝试创建自己的配置对象，仅存储以下属性：

    {
        过滤器：织物过滤器[]；
        轮换：数字；
        翻转X：布尔值；
        位置： {
            顶部：数字，
            左：数字
        };
        缩放：数字；
    }

单个鼠标事件是当用户在画布中移动/调整图像时，所有其他操作都以编程方式进行。

我遇到的问题是，当用户旋转图像，然后尝试应用过滤器时，旋转丢失，或者图像超出画布。

我在这里放了一些代码：

    setConfig(canvasEl, imageEl, 配置) {
        if (config.hasOwnProperty('zoom')) {
            canvasEl.setZoom(config.zoom);
        }
        如果（config.hasOwnProperty（'flipX'））{
            imageEl.flipX = config.flipX;
        }
        if (config.hasOwnProperty('position')) {
            imageEl.top = 位置.top;
            imageEl.left = 位置.left;
        }
        if (config.hasOwnProperty('rotation')) {
            imageEl.angle = 旋转；
        }
        if (config.hasOwnProperty('filters')) {
            imageEl.filters = config.filters;
            imageEl.applyFilters();
        }
    }

问题是我不知道如何存储
织物画布的配置（与 toJSON、loadFromJSON 相同，但属性较少），然后根据存储的配置更新画布对象。

任何帮助将不胜感激。也许我没有很好地解释我的问题，所以如果你们中的任何人有不明白的地方，我会很乐意回答你们的问题，并编辑帖子。

谢谢

4

0 回答 0