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

Store canvas coordinates to local storage using angular.js

本文关键字：存储 坐标 布坐标 js      更新时间：2023-09-26

我想使用角度将绘图画布坐标存储到本地存储.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 对我不起作用，当我单击按钮时，lastX 变量未定义。但是我复制粘贴的代码并手动输入值，似乎它可以工作，所以我认为问题是您应该在存储它们之前检查变量是否已定义。

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

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

在

作用域设置变量

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

相关文章：