时间戳

首页 > 解决方案 > 单击按钮存储后如何存储X和Y坐标

javascript - 单击按钮存储后如何存储X和Y坐标

问题描述

我试图在单击画布后存储 x 和 y 坐标，我可以设置标记位置，我可以在该位置显示 x 和 y 坐标和标记的图片，但现在我想存储这些坐标以便当您重新加载网络浏览器时，标记位置仍将位于您第一次放置它的位置。

完整的代码下来..

var context = (this.canvas.nativeElement as HTMLCanvasElement).getContext("2d")

//Map sprite
var mapSprite = new Image();
mapSprite.src = "http://antyradar.info/wp-content/uploads/commercial-tumilty-design-commercial-floor-plans.jpg";

var Marker = function () {
this.Sprite = new Image();
this.Sprite.src = "https://www.lasvegas-waterdelivery.com/wp-content/uploads/2016/07/5gal-cropped.png"
this.Width = 12;
this.Height = 20;
this.XPos = 0;
this.YPos = 0;
}

  var Markers = new Array();
  var rect = (this.canvas.nativeElement as HTMLCanvasElement).getBoundingClientRect();

  var mouseClicked = function (mouse) {
  // Get current mouse coords
  var mouseXPos = (mouse.x - rect.left);
  var mouseYPos = (mouse.y - rect.top);



  console.log("x: " + mouseXPos);
  console.log("y: " + mouseYPos)
  console.log("Marker added");

  // Move the marker when placed to a better location
  var marker = new Marker();
  marker.XPos = mouseXPos - (marker.Width * 37.7);
  marker.YPos = mouseYPos - (marker.Height * 7);

  Markers.push(marker);

  for (var i = 0; i < Markers.length; i++) {
    if(i > 1){
      Markers.splice(marker);
    }
  }


  sessionStorage.setItem('Marker', JSON.stringify(marker));
  let store = sessionStorage.getItem('Marker');

  console.log(store);

  var remember = function(){
    return store;
  }
}

// Add mouse click event listener to canvas
/* (this.canvas.nativeElement as HTMLCanvasElement).addEventListener("mousedown", mouseClicked, false); */

var firstLoad = function () {
  context.font = "15px Georgia";
  context.textAlign = "center";
}

firstLoad();

var main = function () {
  draw();
};

var width = (this.canvas.nativeElement as HTMLCanvasElement).width
var height = (this.canvas.nativeElement as HTMLCanvasElement).height
var draw = function () {
  // Clear Canvas
  context.fillStyle = "#000";
  context.fillRect(0, 0, width, height);

  // Draw map
  // Sprite, X location, Y location, Image width, Image height
  // You can leave the image height and width off, if you do it will draw the image at default size
  context.drawImage(mapSprite, 0, 0, 700, 700);

  // Draw markers
  for (var i = 0; i < Markers.length; i++) {
    var tempMarker = Markers[i];
    // Draw marker
    context.drawImage(tempMarker.Sprite, tempMarker.XPos, tempMarker.YPos, tempMarker.Width, tempMarker.Height);
  }
};

setInterval(main, (1000 / 10)); // Refresh 60 times a second

}

标签： javascriptionic-framework

解决方案

您可以使用Window.sessionStorage来存储您的坐标。

sessionStorage.setItem('Marker', JSON.stringify(marker));

推荐阅读