0

tengo un problema al querer hacer el canvas a pantalla completa, el problema es que quiero hacerlo sin transformaciones de escala css, lo quiero hacer desde css y js con tamaños definidos

function autoScale(id) {
var d = document, E, iw = window.innerWidth,
ih = window.innerHeight, X, Y, scale;
if(typeof id == 'object') E = id;
else E = d.getElementById(id);

X = iw/2 - E.width/2; // centro en x
Y = ih/2 - E.height/2;// centro en y

if (iw/E.width > ih/E.height) {
    scale = ih/E.height;
} else if (iw/E.width < ih/E.height) {
    scale = iw/E.width;
} else {
    scale = 1;
}
document.getElementsByTagName("html")[0].style.overflow = "hidden";

// acomodar en el centro y escalar a pantalla completa
E.style.transform = 'translate('+X+'px,'+Y+'px) scale('+scale+')';
document.body.width = iw;

// para que se ejecute al cambiar el tamaño de la ventana
window.onresize = function (event) {
    autoScale(id);
}}

El problema es que al querer usar el mouse para seleccionar coordenadas del canvas estas cambian la posición al estar reescalado La verdadera pregunta ¿es como le hago para poder poner escala y que funcionen las coordenadas del mouse sin problemas y a pantalla completa?

1 respuesta 1

1

Varias cosas:

  1. El evento resize se dispara con una frecuencia muy alta, y esto lo hace inapropiado para tareas complicadas como recalcular tamaños y posiciones de elementos DOM. Para poder hacerlo es recomendable utilizar el método setTimeout o requestAnimationFramestar para reducir la frecuencia con la cual se dispara el evento resize.

  2. Cada vez que la ventana cambia de tamaño, JavaScript calcula las de nuevo las dimensiones del canvas. Si tienes algo dibujado por ejemplo varios objetos que tienes guardados en un array, JavaScript tiene que (según el caso) vaciar el array y recalcular la posición de los objetos y dibujarlos de nuevo. También habra que recalcular cualquier variable cuyo valor depende del tamaño del canvas. A continuación viene un ejemplo muy sencillo:

const output = document.getElementById("output");
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
let cw = (canvas.width = window.innerWidth);
let ch = (canvas.height = window.innerHeight);

canvas.addEventListener(
  "mousemove",
  function(evt) {
    let m = oMousePos(canvas, evt);
    marcarCoords(output, m);
  },
  false
);

canvas.addEventListener(
  "mouseout",
  function(evt) {
    limpiarCoords(output);
  },
  false
);

function marcarCoords(output, m) {
  output.innerHTML = "x: " + m.x + ", y: " + m.y;
}

function limpiarCoords(output) {
  output.innerHTML = "";
}

function init() {
  cw = canvas.width = window.innerWidth;
  ch = canvas.height = window.innerHeight;
}

setTimeout(function() {
  init();
  addEventListener("resize", init, false);
}, 15);

function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
  return {
    //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  };
}
body {
  overflow: hidden;
}
canvas {
  background-color: #000;
  cursor:pointer;
}
#output{
  color:white;
  font-family:verdana;
  font-size:1.5em;
  position:absolute; 
  width:10em;
  height:1.5em;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:transparent;
  pointer-events:none;
}
<div id="output"></div>
<canvas></canvas>

Por favor ábrelo en página completa.

2

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.