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

プランカーデモ

4

2 に答える 2

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 に答える
0

ボタンをクリックすると、lastX変数が定義されていません。しかし、貼り付けたコードをコピーして値を手動で入力したところ、機能しているように見えるので、変数を保存する前に変数が定義されているかどうかを確認する必要があると思います。

また、デフォルト値を設定する前に localStorage に init 行が必要です。そうしないと、後で未定義の値に格納しようとしてエラーがスローされます。

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

于 2016-01-25T12:47:07.180 に答える