Question

我将多边形值保存在angular $ localStorage中。

一旦织物js绘制物体。我的$ localStorage已更改。

var arr = [{
        x: 81,
        y: 58
    }, {
        x: 221,
        y: 23
    }, {
        x: 247,
        y: 158
    }, {
        x: 100,
        y: 219
    }, {
        x: 81,
        y: 58
    }];

    if(!$localStorage.mask)
      $localStorage.mask = arr;

这是一个错误吗？

这里是plunker

Answer 1

实际上，FabricJS似乎为了内部目的（即偏移）修改了给定的点数组，特别是在这段代码中（来自https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.js）：

...  
  //misko321: only for reference of what minX, minY, width and height are
  _calcDimensions: function() {

      var points = this.points,
          minX = min(points, 'x'),
          minY = min(points, 'y'),
          maxX = max(points, 'x'),
          maxY = max(points, 'y');

      this.width = (maxX - minX) || 0;
      this.height = (maxY - minY) || 0;

      this.minX = minX || 0,
      this.minY = minY || 0;
    },

  _applyPointOffset: function() {
      // change points to offset polygon into a bounding box
      // executed one time
      this.points.forEach(function(p) {
        p.x -= (this.minX + this.width / 2);
        p.y -= (this.minY + this.height / 2);
      }, this);
    },

...

与 ngStorage 观察添加的对象的任何更改这一事实一起，它会更新那些经过修改的内容（内部由 Fabric.js ）坐标。

目前我想到的最干净的解决方案是复制 arr 对象（参考Most elegant way to clone a JavaScript object）并将其中一个对象发送到 ngStorage 和另一个 FabricJS 。

然而，如果 ngStorage 支持某种 freeze（）方法，那将会很好，这会禁用 AngularJS 观察此对象的，从而防止其进一步修改。

使用fabric js改变$ localStorage值

1 个答案: