JavaScript Canvas flotan sobre un azulejo -- javascript campo con canvas campo con popup campo con tiles camp Relacionados El problema

Javascript canvas hover over a tile


-4
vote

problema

Español

Tengo un lienzo que estoy dibujando de ciertos azulejos (nueva imagen ()), digamos que hay, por ejemplo, las baldosas 10x10 en mi lienzo.

Cada baldosas tiene sus propios datos. Quiero mostrar "Popup" con información sobre este azulejo cada vez que se ciernen los dispositivos de usuario sobre la teja con el mouse, debe seguir el mouse hasta que el usuario salga de la baldosa.

Ejemplo de lo que quiero lograr sería Google Maps, pero debería seguir el mouse mientras muevo el mouse sobre la baldosa: https://i.gyazo.com/d32cd5869ae9b2e0d9a7053729e2d2aa.mp4

Original en ingles

I have a canvas which I am drawing from certain tiles (new Image()), lets say there are for example 10x10 tiles in my canvas.

Every tile has its own data I want to display "popup" with information about this tile everytime user hovers over the tile with mouse, it should be following the mouse until user leaves the tile.

Example of what I want to achieve would be google maps, but it should be following the mouse as I move the mouse over the tile: https://i.gyazo.com/d32cd5869ae9b2e0d9a7053729e2d2aa.mp4

           
 
 

Lista de respuestas

0
 
vote

Necesitará tres cosas para lograr esto:

  1. una forma de dibujar la imagen de fondo en su lienzo
  2. una forma de rastrear la posición del mouse sobre el lienzo
  3. una lista de "zonas" y una forma de determinar qué zona está "activada"

Aquí hay una implementación de los puntos anteriores:

  var GridOverlay = /** @class */ (function () {      /**       * Creates an instance of GridOverlay.       * @param {string} imageSrc       * @param {{       *   position: IPoint,       *   size: IPoint,       *   message: string       *  }[]} [zones=[]]       * @memberof GridOverlay       */      function GridOverlay(imageSrc, zones) {          if (zones === void 0) { zones = []; }          var _this = this;          this.zones = zones;          /**           * The last registered position of the cursor           *           * @type {{ x: number, y: number }}           * @memberof GridOverlay           */          this.mousePosition = { x: 0, y: 0 };          //Create an image element          this.img = document.createElement("img");          //Create a canvas element          this.canvas = document.createElement("canvas");          //When the image is loaded          this.img.onload = function () {              //Scale canvas to image              _this.canvas.width = _this.img.naturalWidth;              _this.canvas.height = _this.img.naturalHeight;              //Draw on canvas              _this.draw();          };          //Set the "src" attribute to begin loading          this.img.src = imageSrc;          //Listen for "mousemove" on our canvas          this.canvas.onmousemove = this.mouseMove.bind(this);      }      /**       * Registers the current position of the cursor over the canvas, saves the coordinates and calls "draw"       *       * @param {MouseEvent} evt       * @memberof GridOverlay       */      GridOverlay.prototype.mouseMove = function (evt) {          this.mousePosition.x = evt.offsetX;          this.mousePosition.y = evt.offsetY;          this.draw();      };      /**       * Clears and redraws the canvas with the latest data       *       * @memberof GridOverlay       */      GridOverlay.prototype.draw = function () {          //Get drawing context          var ctx = this.canvas.getContext("2d");          //Clear canvas          ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);          //Draw background          ctx.drawImage(this.img, 0, 0);          //Loop through zones          for (var zoneIndex = 0; zoneIndex < this.zones.length; zoneIndex++) {              var zone = this.zones[zoneIndex];              //Check for cursor in zone              if (zone.position.x <= this.mousePosition.x &&                  zone.position.x + zone.size.x >= this.mousePosition.x &&                  zone.position.y <= this.mousePosition.y &&                  zone.position.y + zone.size.y >= this.mousePosition.y) {                  //Display zone message on cursor position                  ctx.fillText(zone.message, this.mousePosition.x, this.mousePosition.y);                  //Break so that we only show a single message                  break;              }          }          return this;      };      return GridOverlay;  }());  //TEST  var grid = new GridOverlay("https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=500&h=500", [      { message: "Zone 1", position: { x: 10, y: 10 }, size: { x: 100, y: 100 } },      { message: "Zone 2", position: { x: 80, y: 80 }, size: { x: 100, y: 100 } },  ]);  document.body.appendChild(grid.canvas);  
 

You will need three things to achieve this:

  1. A way to draw the background image on your canvas
  2. A way to track mouse position over the canvas
  3. A list of "zones" and a way to determine which zone is "triggered"

Here is an implementation of the above points:

var GridOverlay = /** @class */ (function () {      /**       * Creates an instance of GridOverlay.       * @param {string} imageSrc       * @param {{       *   position: IPoint,       *   size: IPoint,       *   message: string       *  }[]} [zones=[]]       * @memberof GridOverlay       */      function GridOverlay(imageSrc, zones) {          if (zones === void 0) { zones = []; }          var _this = this;          this.zones = zones;          /**           * The last registered position of the cursor           *           * @type {{ x: number, y: number }}           * @memberof GridOverlay           */          this.mousePosition = { x: 0, y: 0 };          //Create an image element          this.img = document.createElement("img");          //Create a canvas element          this.canvas = document.createElement("canvas");          //When the image is loaded          this.img.onload = function () {              //Scale canvas to image              _this.canvas.width = _this.img.naturalWidth;              _this.canvas.height = _this.img.naturalHeight;              //Draw on canvas              _this.draw();          };          //Set the "src" attribute to begin loading          this.img.src = imageSrc;          //Listen for "mousemove" on our canvas          this.canvas.onmousemove = this.mouseMove.bind(this);      }      /**       * Registers the current position of the cursor over the canvas, saves the coordinates and calls "draw"       *       * @param {MouseEvent} evt       * @memberof GridOverlay       */      GridOverlay.prototype.mouseMove = function (evt) {          this.mousePosition.x = evt.offsetX;          this.mousePosition.y = evt.offsetY;          this.draw();      };      /**       * Clears and redraws the canvas with the latest data       *       * @memberof GridOverlay       */      GridOverlay.prototype.draw = function () {          //Get drawing context          var ctx = this.canvas.getContext("2d");          //Clear canvas          ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);          //Draw background          ctx.drawImage(this.img, 0, 0);          //Loop through zones          for (var zoneIndex = 0; zoneIndex < this.zones.length; zoneIndex++) {              var zone = this.zones[zoneIndex];              //Check for cursor in zone              if (zone.position.x <= this.mousePosition.x &&                  zone.position.x + zone.size.x >= this.mousePosition.x &&                  zone.position.y <= this.mousePosition.y &&                  zone.position.y + zone.size.y >= this.mousePosition.y) {                  //Display zone message on cursor position                  ctx.fillText(zone.message, this.mousePosition.x, this.mousePosition.y);                  //Break so that we only show a single message                  break;              }          }          return this;      };      return GridOverlay;  }());  //TEST  var grid = new GridOverlay("https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=500&h=500", [      { message: "Zone 1", position: { x: 10, y: 10 }, size: { x: 100, y: 100 } },      { message: "Zone 2", position: { x: 80, y: 80 }, size: { x: 100, y: 100 } },  ]);  document.body.appendChild(grid.canvas);
 
 

Relacionados problema

0  Redirigir en las baldosas de primavera, lo que hace que los parámetros sean adjuntos a la URL  ( Redirect on spring tiles causing parameters to be appended to the url ) 
Estoy usando la primavera 3 y las baldosas 3. A continuación se muestra un ejemplo simplificado que hice. Tengo un controlador de prueba donde enumero todos l...

1  Struts 2 Integración con temas de azulejos  ( Struts 2 integration with tiles issue ) 
Comencé a integrar Struts 2 con azulejos en el entorno Intellij. Busqué en varios tutoriales en la web, pero todavía veo un problema de símbolo extraño. E...

3  Android - Fondos de baldosas ocasionalmente se estiran  ( Android tiled backgrounds occasionally get stretched ) 
Uso varios sorteos en azulejos que se utilizan como fondos para varios diseños. En su mayor parte, los azulejos funcionan correctamente, pero ocasionalmente (...

1  Strustres Configure con azulejos  ( Struts config with tiles ) 
My Struts-Config.xml tiene algunas acciones hacia adelante que apuntan a las definiciones de azulejos. Todo parece estar bien hasta que el delantero se resuel...

13  ¿Cómo obtener la URL de solicitud real en puntales con azulejos?  ( How to get the real request url in struts with tiles ) 
Cuando estás usando azulejos con puntales y hazlo ... request.getRequestURL() ... obtienes la URL a e.g. /WEB-INF/jsp/layout/newLayout.jsp En lugar d...

0  Azulejos Apache Problema en la primavera MVC (vistas Redacción de la ruta en lugar de contenido)  ( Apache tiles issue in spring mvc view rendering path instead of content ) 
Estoy trabajando en mi primer proyecto MVC de primavera con azulejos de Apache. Sin embargo, estoy teniendo un problema con lo que se está diciendo para ver. ...

1  Uso de la memoria - Imágenes grandes  ( Memory usage large images ) 
Estoy usando A Tiled para cortar mis grandes imágenes para guardar la memoria, ¡pero usa la misma cantidad? Mi imagen es 1986 x 1562 Píxeles en formato PNG y ...

0  Código fuente Azulejos de abeto Struts-Tiles2-1.4.0-Snapshot  ( Source code fir tiles struts tiles2 1 4 0 snapshot ) 
No puedo encontrar el código fuente de Struts-Tiles2-1.4.0-Snapshot.jar versión de los azulejos. Los archivos JAR están presentes en http://people.apache.org...

3  ¿Hay algún motor de plantilla para NOde.js Express achitablemente a JSP?  ( Is there any template engine for node js express quitely like jsp ) 
Necesito un verdadero motor de plantilla de modo JSP, no como JADE y EJS: Solo coloque un nuevo archivo de página en la carpeta de la página web, escriba s...

8  Azulejo (escalable) Algoritmo de apilamiento  ( Tile scalable stacking algorithm ) 
Aquí está el problema. Tengo lienzo rectangular que tiene un tamaño de 1. por lo que tiene coordenada Sistem de (0.0 ... 1.0 - x y 0.0 ... 1.0 - y). También...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos