Pobre Pan, Escala de rendimiento en la vista Web de Android con HTML5 Canvas y KineticJS

Nuestra aplicación web móvil incluye un diseñador interactivo que hemos realizado utilizando lienzo HTML5 y Kinetic.js . Estamos tratando de procesar dinámicamente alrededor de 353 objetos sobre el lienzo, de los cuales 178 son texto y el resto son líneas y rectángulos.

Durante una operación de panorámica o escala, el lienzo deja de responder. Parece que este comportamiento se muestra sólo en un dispositivo Android como el mismo funciona excepcionalmente bien en IOS. También probamos la misma aplicación a través de los navegadores directamente y nos dimos cuenta de un comportamiento similar no responde en el navegador android y cromo. Firefox es comparativamente sensible.

Hemos probado las opciones proporcionadas en los siguientes enlaces pero el problema persiste (es decir, varias capas de lienzo) 1) Rendimiento lento con kineticjs 2) Problemas de rendimiento con HTML5 Canvas en algunos navegadores móviles.

El enfoque especificado en los enlaces KineticJS – Mover 4000 azulejos con Stage.draggable , ¿Cómo almacenar en caché una capa completa justo antes de dragstart y volver a invertir en dragend? Parece prometedor, pero es posible que no podamos ir con esto, ya que nuestro diseñador contendrá bastantes interacciones de usuario (como secciones de dibujo de arrastrar y soltar).

También encontré otra pregunta aquí citando un problema similar https://stackoverflow.com/questions/18853952/kinectic-js-performance-on-android-4-1-devices-especially-pan-and-zoom-is-unre

¿Hay otras posibles soluciones / correcciones para mejorar este rendimiento, por favor, ayude.

EDIT : Probamos nuestra aplicación en los siguientes dispositivos 1) Samsung Nota 800 (Android 4.1.2) 2) Samsung Tab 2 (Android 4.1.2) 3) ASUS transformador Pad TF300TG (Android 4.2.1) y 4) Nexus 7 Android 4.3).

Definitivamente necesitará almacenar en caché el escenario como una imagen inmediatamente antes de arrastrar y soltar porque si intenta renderizar cientos de elementos de texto en el lienzo muy rápidamente (canvas nativo o KineticJS) el rendimiento será lento, especialmente en Android. En el extremo de arrastrar, puede destruir la imagen almacenada en caché con destroy ().