FabricJs:从JSON保存和加载动态模式(patternSourceCanvas) [英] FabricJs: Saving and loading dynamic patterns from JSON (patternSourceCanvas)

问题描述

我在保存和加载应用于对象的动态模式时遇到问题.

I am having a problem saving and loading dynamic patterns that are applied to objects.

我已经在网上搜索了解决方案，但无济于事.我了解发生的原因，但不知道如何解决.

I have searched online for a solution to this to no avail. I understand why it is happening, but do not understand how to resolve it.

这基本上就是我在做什么...

Here is basically what I am doing...

1. 将动态模式应用于对象.
2. 使用...'JSON.stringify(canvas.toJSON([...]))'将画布保存到MongoDB
3. 使用"loadFromJSON"加载画布
4. 获取错误未捕获的ReferenceError:patternSourceCanvas未定义"

我在此问题上发现的所有内容都可以追溯到至少2年前(甚至在2013年)，没有可靠的示例代码.

Everything I have found on this issue dates back to at least 2 years ago (some even 2013), with no solid working example with code.

更新

这是我用来在路径上应用图案的功能...

This is the function I am using to apply patterns on paths...

function applyPatternOnPath(p, image, width, patternRepeat, patternPadding) {

    if (patternRepeat) {
      var r = 'repeat'
    } else {
      var r = 'no-repeat'
    }

    fabric.Image.fromURL(image, function(img) {

      var padding = 0 + patternPadding;

      img.scaleToWidth(width);

      var patternSourceCanvas = new fabric.StaticCanvas();

      patternSourceCanvas.add(img);
      patternSourceCanvas.renderAll();

      var pattern = new fabric.Pattern({
        source: function() {
          patternSourceCanvas.setDimensions({
            width: img.getScaledWidth() + padding,
            height: img.getScaledHeight() + padding
          });
          patternSourceCanvas.renderAll();
          return patternSourceCanvas.getElement();
        },
        repeat: r
      });

      p.set('fill', pattern);
      canvas.renderAll();

    }, { crossOrigin: 'Anonymous' });
  }

推荐答案

我已经通过一些解决方法解决了我的问题.我不确定这是否是处理用JSON保存的动态模式的正确"方法，但它对我有用.

I have solved my problem with a little workaround. I am not sure if this is the "correct" way to handle dynamic patterns being saved with JSON but it works for me.

这就是我在做什么...

Here's what I am doing...

1. 将动态模式应用于对象.

2. 就在将画布(JSON字符串)保存到MongoDB之前，我正在做两件事...

1. Applying the dynamic pattern onto an object.

2. Right before saving the canvas (JSON string) to MongoDB, I am doing 2 things...

a)将对象信息(包括模式src，宽度，填充等)保存在mongoDB文档的一个名为"canvasLayers"的字段中.

a) Saving the objects information (which include pattern src, width, padding etc.) on one of the fields of the mongoDB document called 'canvasLayers'.

b)通过将填充"属性设置为"，清除应用了动态模式的路径的所有填充"属性.

b) Clearing all the 'fill' properties of the paths that have dynamic patterns applied by setting the 'fill' property to "".

因此，当JSON保存到数据库时，它不包含任何模式信息.

So the JSON does not include any pattern information when saved to the DB.

在加载先前保存的画布时，我将基于为每个对象保存在'canvasLayers'字段中的图案信息重新应用图案.

When loading a previously saved canvas, I am re-applying the patterns based on pattern information that was saved on the 'canvasLayers' field for each object.

基本上，我不是用JSON字符串保存模式信息，而是将模式数据存储在单独的对象(mongodb字段)上，然后在画布加载时重新应用模式.

Basically, I am not saving the pattern info with the JSON string, but rather storing the pattern data on a separate object (mongodb field), and then re-applying the patterns when the canvas loads.

这篇关于FabricJs:从JSON保存和加载动态模式(patternSourceCanvas)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！