Question

我想使用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 currentX currentY

Plunker Demo

Answer 1

Plunker对我不起作用，当我点击按钮时，lastX变量未定义。但我复制粘贴的代码，我手动设置值，似乎它的工作原理，所以我认为问题是你应该检查变量是否在存储之前定义。

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

http://embed.plnkr.co/kbrRd2fYlL3oW07iI8Hm/

Answer 2

在范围

设置变量

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();
      }
    }
  };
});

http://plnkr.co/edit/Qcqua0gjoAfya6xkQFiX?p=preview

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

2 个答案: