Desplazamiento del mouse en el lienzo [fabric.js]

Question

He leído de 3 a 5 temas sobre el desplazamiento del mouse, pero todavía no puedo ver dónde está el desorden.

En mi caso, todo funciona bien en un 60%. En otro 40%, el mouse está compensado. Demo here.

A veces la posición del objeto no se relaciona con el comportamiento del mouse. (IE & Chrome tiene el desastre más grande)

He intentado editar las hojas de estilo y div principal pero nada. Lo peor: no veo ninguna regularidad. Estaré agradecido por cualquier ayuda.

Answer 1

¡Es increíble! He solucionado el error. Nunca me vas a creer ...

En la parte superior de la página era un código como:

<div class="logo"> 
<a href="/"><img src="logo.png" alt="" /></a> 
</div> 

Este código no tiene ninguna relación razonable con la lona. Esta clase tiene css simple: {float: left; margin: 10px 0 0 0;}

Pero por alguna razón este ratón forzada de código diferente en lienzo. Rehice este código como:

<div class="logo"> 
<a href="/" class="logoHref"></a><!--- image is in css bg ---> 
</div> 

... y ahora todo parece funcionar bien.

no veo ninguna corelation entre estos eventos, pero el hecho es el hecho. Ese fue un día muy duro para mí ...

Answer 2

Debido a la colocación de otros elementos de la página el valor de desplazamiento de la lona puede cambiar.

Sólo necesita llamar canvas.calcOffset() después de añadir un elemento en el lienzo que causó el problema, o después de llamar al método canvas.renderAll() en el código.

Answer 3

Usted puede hacer esto:

canvas.on("after:render", function(){ canvas.calcOffset() }); 

sólo hago esto después creo lienzo. Esta es una llamada provisional cuando no hay un evento de cambio de tamaño. Entonces es cuando aparece el error.

Answer 4

Este problema se produce esta compensación siempre que la tela se mueve dentro del documento HTML. Por ejemplo, si agrega un elemento de 10 px de altura sobre el lienzo, después de que el lienzo se represente por primera vez, sus objetos se compensarán en 10 píxeles. Añadir el código cada vez que el lienzo se vuelve a colocar dentro del documento HTML, y se debe volver a calcular la interactividad del ratón:

canvas.on("after:render", function(){ 
    canvas.calcOffset(); 
}); 

Fabric.js llama automáticamente a este método cada vez que se cambia el tamaño de la ventana, por lo que usted no ve la problema en ese evento.

Answer 5

posicionamiento Desplazamiento de un objeto dentro de un lienzo es muy probablemente causado por las coordenadas originales de la tela y objetos secundarios se cambió por la manipulación del DOM.

Una solución sencilla que he encontrado es para asegurarse de que me puse las coordenadas de cualquier objeto que añado a la lona inmediatamente después de la adición.Por ejemplo, si supone que el objeto es una imagen, haría lo siguiente:

var canvas = new fabric.Canvas(); 
var image = new Image(); 

canvas.add(image); 
image.center() // Optional if you wish the object centered on canvas 
image.setCoords(); 

Espero que esto ayude. ¡Buena suerte!