$localStorage 值随 fabric js 发生变化

Question

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

一旦 fabric 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 观察这个对象，从而防止它被进一步修改。

$localStorage 值随 fabric js 发生变化

$localStorage value got change with fabric js

javascript

fabricjs

angularjs