Javascript 使用angular.js将画布坐标存储到本地存储

我想使用angular.js将图形画布坐标存储到本地存储。我获得了坐标，但无法将值推送到本地存储

从中获取价值

draw(lastX, lastY, currentX, currentY);

并将值存储到本地存储

app.controller('app', function ($scope, $http, $localStorage) {
    // Set a default
    $scope.$storage = $localStorage.$default({
        "lines": [] 
    });

    $scope.cloneItem = function () {
        $scope.$storage.lines.push({
            "lastX":lastX ,
            "lastY": lastY,
            "currentX": currentX,
            "currentY": currentY
        });
    }
}); 

我无法获取值

lastX lastY currentY x currentY

---

Plunker不适用于我，单击按钮时lastX变量未定义。但我复制粘贴的代码并手动输入值，看起来它是有效的，所以我认为问题在于，在存储变量之前，您应该检查变量是否已定义

此外，在设置其默认值之前，您需要在localStorage中使用init行，否则在稍后尝试存储在未定义的值中时将抛出错误

---

在范围内设置变量

app.controller('app', function($scope, $http, $localStorage) {
  // Set a default
  $scope.$storage = $localStorage.$default({
    "lines": []
  });

  $scope.cloneItem = function() {
    $scope.$storage.lines.push({
      "lastX": $scope.lastX,
      "lastY": $scope.lastY,
      "currentX": $scope.currentX,
      "currentY": $scope.currentY
    });
    alert('$scope.lastX11111 -' + $scope.lastX)

  }
});

到

---

我知道如何将值存储到本地，但我的问题是无法获取值。。这不是一个有效的答案

app.directive("drawing", function() {

  return {
    restrict: "A",
    link: function(scope, element) {
      var ctx = element[0].getContext('2d');

      // variable that decides if something should be drawn on mousemove
      var drawing = false;

      element.bind('mousedown', function(event) {
        if (event.offsetX !== undefined) {
          scope.lastX = event.offsetX;
          scope.lastY = event.offsetY;
        } else {
          scope.lastX = event.layerX - event.currentTarget.offsetLeft;
          scope.lastY = event.layerY - event.currentTarget.offsetTop;
        }

        // begins new line
        ctx.beginPath();

        drawing = true;
      });

      element.bind('mousemove', function(event) {
        if (drawing) {
          // get current mouse position
          if (event.offsetX !== undefined) {
            scope.currentX = event.offsetX;
            scope.currentY = event.offsetY;
          } else {
            scope.currentX = event.layerX - event.currentTarget.offsetLeft;
            scope.currentY = event.layerY - event.currentTarget.offsetTop;
          }

          draw(scope.lastX, scope.lastY, scope.currentX, scope.currentY);
          // console.log(lastX, lastY, currentX, currentY);
          // set current coordinates to last one
          scope.lastX = scope.currentX;
          // console.log(lastX, lastY, currentX, currentY);
          scope.lastY = scope.currentY;
        }

      });

      element.bind('mouseup', function(event) {
        // stop drawing
        drawing = false;
      });

      // canvas reset
      function reset() {
        element[0].width = element[0].width;
      }

      function draw(lX, lY, cX, cY) {
        // line from
        ctx.moveTo(lX, lY);
        // to
        ctx.lineTo(cX, cY);
        // color
        ctx.strokeStyle = "#4bf";
        // draw it
        ctx.stroke();
      }
    }
  };
});