html5 - example - ¿Cómo almacenar en caché toda una capa justo antes de dragstart y revertirla en dragend?

drag and drop jquery ejemplos

Question

Actualmente estoy intentando acelerar un poco mi aplicación web para dispositivos móviles, pero ahora estoy atrapado en la parte más importante: el almacenamiento en caché. ¿Cómo es posible almacenar en caché toda una capa justo antes de que el usuario empiece a arrastrarla y volverla a utilizar Kinetic.Nodes cuando se detuvo la acción de arrastre?

En este momento empiezo a almacenar en caché

stage.on(''mousedown touchstart'', function(){ // CACHING})

pero el problema aquí es que el usuario tiene que realizar un segundo evento mousedown touchstart para "agarrar" la imagen en caché, lo que, por supuesto, inicia un nuevo almacenamiento en caché.

En este caso, mis preguntas serían:

1. ¿Cómo puedo pasar el evento mousedown touchstart a la imagen en caché, para que el usuario pueda arrastrarlo con un movimiento fluido?

2. ¿Cómo puedo acelerar el almacenamiento en caché? (La imagen en caché tarda 1-2 segundos en aparecer. ¿Es útil almacenarla en un setInterval después de cada, digamos 4 segundos, y usar esta imagen precadenada o causar un drenaje de alto rendimiento?)

Agradezco cualquier tipo de sugerencias con respecto a mi problema o más consejos y trucos para acelerar las cosas.

Answer 1

Basado en esta declaración:

stage.on(''mousedown touchstart'', function(){ // CACHING})

Supongo que al mousedown touchstart usted llama a layer.toImage() o stage.toImage() y desea arrastrar la nueva imagen en ese clic / toque.

1. Puede invocar el evento de arrastre en la nueva imagen generada utilizando la función .startDrag() : Kinetic.Shape # startDrag

   A continuación, puede invocar .stopDrag() en mouseup touchend para detener el arrastre. Kinetic.Shape # stopDrag

   Algo como:

   var image, ox, oy;
   
   stage.on(''mousedown touchstart'', function(){
     // CACHING
     stage.toImage({
       width: stage.getWidth(),
       height: stage.getHeight(),
       callback: function(img) {
         var image = new Kinetic.Image({
           image: img,
           draggable: true
         });
         ox = image.getX();
         oy = image.getY();
         image.startDrag();
       }            
     });
   });
   
   stage.on(''mouseup touchend'', function(){
     image.stopDrag();
   
     //Calculate dx, dy to update nodes.
     var newX = image.getX();
     var newY = image.getY();
     var dx = newX-ox;
     var dy = newY-oy;
   
     var children = layer.getChildren();
     for (var i=0; i<children.length; i++) {
       children.setX(children.getX()+dx);
       children.setY(children.getY()+dy);
     }
   
     image.hide(); //or remove() or destroy()
     layer.draw();
   });

   Tenga en cuenta que necesita actualizar sus nodos originales después de arrastrar la capa en caché.

   Otra nota No he probado el código, pero creo que podrías hacer algo como lo que tengo allí arriba.

   ACTUALIZACIÓN pequeña : ¡también debería hide() la capa original mientras arrastraba la imagen de capa en caché! :) Y luego show() nuevamente cuando oculta la capa de imagen en caché.

2. Honestamente, no estoy seguro de cómo acelerarías ese tiempo de caché a menos que puedas predecir cuándo el usuario necesita hacer clic / tocar el escenario para moverte. Creo que su sugerencia costaría más rendimiento del que ahorraría.

   ¿Supongo que el escritorio guarda en caché la imagen más rápido que en tu móvil? Podría caer en ser solo una limitación del rendimiento de KineticJS en Mobile vs Desktop ...

ACTUALIZAR

De acuerdo, tengo una idea para el n . ° 2 , no es exactamente una solución, pero podría funcionar mejor para ti.

1. Separe su evento de mousedown escenario con su evento touchstart . mousedown será el mismo, pero el touchstart queremos manejarlo de manera diferente.

2. En el touchstart escenario, queremos arrastrar todo el escenario como normal, pero mientras tanto, ejecute el código del mousedown original para almacenar en caché la capa.

3. Cuando la imagen almacenada en la memoria caché termine de cargarse (demora entre 1 y 2 segundos), use .stopDrag() en el escenario original y .stopDrag() . En este momento, desea almacenar los valores x e y actuales de la etapa, de modo que aún pueda calcular dx, dy . A continuación, llame inmediatamente a .startDrag() en la nueva imagen en caché y continúe como lo hicimos para el mousedown .

¿Cómo saber cuándo termina la carga de la imagen en caché? Creo que para eso toImage() callback function toImage() . De lo contrario, esperamos que un evento de onload JavaScript funcione para determinar cuándo termina la generación de la imagen.

El resultado final será que obtendrás un lento arrastre entrecortado en el escenario para eventos táctiles HASTA QUE la imagen esté en caché. A continuación, activamos el interruptor y dejamos de arrastrar el escenario, comenzamos a arrastrar la imagen en caché y luego revertimos / actualizamos el escenario en touchend .

Espero que funcione como una semi-solución para su problema ...

OTRA ACTUALIZACIÓN

De acuerdo, aquí hay otra idea que en realidad podría ayudar a tu rendimiento.

Si su etapa no está modificando los nodos muy a menudo, puede .hide() la imagen de la etapa para que ya esté generada, y. .hide() . Luego, cuando necesite arrastrarlo, solo necesita establecer la x, y de la imagen almacenada en caché para que coincida con la x, yy luego, .show() la .show() la imagen en caché. Esto eliminará el tiempo necesario para esperar / cargar la imagen en caché cuando empiece a arrastrar.

Si agregas un nodo o mueves un nodo o algo, luego de eso guarda la imagen en caché. Esperamos que esto sea manejable, ya que no queremos almacenar en caché la imagen con demasiada frecuencia (reduce el rendimiento). De nuevo, la imagen almacenada en caché estará lista para su evento stage.drag antemano.

El objetivo es tener la etapa en la mousedown touchstart caché antes de hacer el mousedown touchstart y comenzar a arrastrar. Espero que esto ayude.