0
321
ViewsLa activación del evento Mouseout depende del tamaño de la ventana
Quiero dibujar en un lienzo transformado en 3D, pero tengo algunos problemas extraños con el evento mouseout en Chrome.
Cuando configuro el tamaño de la ventana JSFiddle en 2100 px, el evento mouseout funciona como excepción.
Sin embargo, cuando configuro el tamaño de la ventana en 1900 px, el evento del mouse se activa aproximadamente en la línea roja.
Esto es realmente extraño, ya que el tamaño de la ventana JSFiddle determina si el evento de mouse out se activa correctamente.
Hasta aquí, el evento de mouse out se activa correctamente en Firefox y Edge, ¡pero no funciona correctamente en Chrome! Además, vimos un comportamiento extraño al jugar con la posición de desplazamiento (p. ej., al agregar algunos <br> y el desplazamiento afecta la posición del evento con el mouse fuera), los tamaños de ventana (ver imágenes de arriba) o el ancho del lienzo (p. ej. establecer el ancho del lienzo en 200 activa el evento de salida del mouse correctamente).
¿Hay alguien que pueda ayudarme a resolver este error, de modo que el navegador active el evento mouseout correctamente independientemente del tamaño de la ventana o la posición de desplazamiento?
Código: JSFiddle
Demostración: YouTube
Fragmento de código en violín:
$(".dynamic-drawing-canvas").on("mouseout", function(e) { console.log(e.clientX, e.clientY) }) #container { pointer-events: none; margin-left: 400px; } .dynamic-drawing-canvas { pointer-events: auto; background-color: blue; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <canvas class="dynamic-drawing-canvas" width="1200" height="300" style=" transform: matrix3d(1.0303, 0.00317459, 0, 2.13211e-05, -0.68458, -0.165542, 0, -0.00111181, 0, 0, 1, 0, -34.7412, 264.118, 0, 1); transform-origin: left top; "></canvas> </div>1 answers
Answer question0
Parece que tiene un problema con el contenedor del lienzo.
Algunas notas sobre lo que está sucediendo: el lienzo se genera a 1200 px y 300 px para ancho/alto usando las propiedades en el marcado: width="1200" height="300" Puede anular esto en la etiqueta <canvas> directamente o con JavaScript . Por qué el cambio de tamaño de CSS tiene problemas: lo que hace el CSS es cambiar el tamaño del lienzo existente a un nuevo tamaño. Cuando se cambia el tamaño de un componente HTML típico/la mayoría, el navegador lo maneja bien. La diferencia es que <canvas> es una colección de píxeles. Cuando cambia con CSS, estos píxeles se modifican (se estiran o se encogen) y la imagen en el lienzo adquiere un aspecto diferente. Tenga en cuenta también que el lienzo en blanco también se estira, por lo que dibujar en él presenta desafíos y puede/no funciona como se esperaba.
Aquí ajusto su lienzo para que se ajuste al contenedor usando JavaScript en estas propiedades, pero en realidad solo como ejemplo: su tamaño variará.
Agregué algunos bordes para que pueda ver las cosas: puse algunos registros en su lugar para mostrar dónde 1.1 y el mouseout se activa ya que ahora cabe dentro del contenedor. podría agregar comentarios de antes a después.
console.clear(); let canvas = document.getElementById("c"); let width = canvas.width; let height = canvas.height; console.log("CW:", width, "CH:", height); let rect = canvas.parentNode.getBoundingClientRect(); canvas.width = rect.width; canvas.height = rect.height; width = canvas.width; height = canvas.height; let r = canvas.getBoundingClientRect(); let ctop = r.top; let cleft = r.left; console.log("T:", ctop, "L:", cleft, "W:", width, "H:", height); $(".dynamic-drawing-canvas") .on("mouseout", function(e) { // console.log(e.clientX, e.clientY); console.log("Screen X/Y:", e.screenX, e.screenY, "Client X/Y:", e.clientX, e.clientY); console.log("X:", e.screenX - e.clientX); console.log("Y:", e.screenY - e.clientY); }); #container { pointer-events: none; position: absolute; top: 0; left: 0; margin-left: 0px; width: 90%; height: 100%; border: solid red 3px; } .dynamic-drawing-canvas { pointer-events: auto; background-color: blue; object-fit: none; object-position: top left; transform-origin: left top; /* pulled out of markup, alter for 2.13211e-5 */ /* transform: matrix3d( 1.0303, 0.00317459, 0, 0.0000213211, -0.68458, -0.165542, 0, -0.00111181, 0, 0, 1, 0, -34.7412, 264.118, 0, 1 ); THEN adjusted the following transformations: 0, 30, 0, 1.1 Translates every X point by 0px Translates every Y point by 30px Translates every Z point by 0 Scales down by 10% */ transform: matrix3d(1.0303, 0.00317459, 0, 0.0000213211, 0.68458, 0.165542, 0, 0.00111181, 0, 0, 1, 0, 0, 30, 0, 1.1); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <canvas id="c" class="dynamic-drawing-canvas" width="1200" height="300"></canvas> </div>