0

我想使用 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 演示

4

2 回答 2

0

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

此外，在设置其默认值之前，您需要 localStorage 中的 init 行，或者稍后尝试存储未定义的值时会引发错误。

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

于 2016-01-25T12:47:07.180 回答
0

在范围内设置变量

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

于 2016-01-25T13:03:43.523 回答