Mecanismo de funcionamiento: El cliente utiliza canvas para convertir los nodos del lienzo actual en datos base64, crea un elemento HTML imagen con estos datos y, en el navegador WeChat, al mantener presionada la imagen se activa la barra de menú para realizar la acción de compartir.
(El proceso se explica directamente con código)
- Primero, obtenemos los datos base64 mediante el método toDataURL de canvas (aquí hay un punto importante: solo se pueden obtener los datos base64 después de que la renderización se complete; si se llama directamente a la interfaz con datos de renderización grandes, los datos obtenidos serán una pantalla negra). Por lo tanto, escuchamos la devolución de llamada de renderización de cocos cc.Director.EVENT_AFTER_DRAW para obtener los datos base64 dentro de esta devolución de llamada y luego eliminamos el监听.
// Función para captura y compartir
mostrarCapturaPantalla: function() {
cc.eventManager.addCustomListener(cc.Director.EVENT_AFTER_DRAW, function(event) {
var lienzo = document.getElementById("gameCanvas");
var base64 = lienzo.toDataURL("image/png");
cc.eventManager.removeCustomListeners(cc.Director.EVENT_AFTER_DRAW);
this._guardarCaptura(base64);
}.bind(this));
},
- Diseño de dimensiones para la captura de pantalla (modificar según tus necesidades)
// Obtener escala para la captura
_obtenerEscalaCaptura: function(){
var tamanoVisible = cc.view.getVisibleSize();
var tamanoDiseño = cc.director.getVisibleSize();
var escalaAncho = tamanoVisible.width / tamanoDiseño.width;
var escalaAlto = tamanoVisible.height / tamanoDiseño.height;
return Math.max(escalaAncho, escalaAlto) * 0.85;// 85% del tamaño original
},
- Crear la captura correspondiente (aquí es importanet que la propiedad overflow del div no sea "hidden", de lo contrario es posible que no se vea la captura)
// Guardar captura
_guardarCaptura : function(datosImagenWeb){
var escalaAjustada = this._obtenerEscalaCaptura();
var contenedorJuego = document.getElementById('Cocos2dGameContainer');
var imagenGrande = document.createElement("img");
contenedorJuego.style.overflow = "auto"; // Modificar configuración del div (no ocultar contenido que excede)
imagenGrande.id = 'capturaPantalla';
imagenGrande.src = datosImagenWeb;
imagenGrande.alt = "imagenGrande";
imagenGrande.width = parseInt(contenedorJuego.style.width.replace(/px/,'')) * escalaAjustada;
imagenGrande.height = parseInt(contenedorJuego.style.height.replace(/px/,'')) * escalaAjustada;
imagenGrande.style.position = 'absolute';
imagenGrande.style.top = "0px";
imagenGrande.style.left = parseInt(contenedorJuego.style.width.replace(/px/, '')) /2 - imagenGrande.width / 2 + "px";
contenedorJuego.appendChild(imagenGrande);
},
Hasta aquí la funcionalidad está implementada. A continuación se muestra una operación posterior (según las necesidades personales de referencia), donde he creado una capa de máscara debajo de la imagen con un mensaje de operación.
- Capa de máscara y mensaje de operación
// Mensaje de captura
_mostrarCapaMensaje: function(contenedorJuego){
var escenaActual = cc.director.getRunningScene();
var tamanoDiseño = cc.director.getVisibleSize();
var capaMensaje = new cc.LayerColor(cc.color(0, 0, 0, 200), tamanoDiseño.width, tamanoDiseño.height)
.addToEx(escenaActual, 9999999,"capaMensaje")
.anchorEx(Layout.center)
.layoutEx(Layout.center)
.enableTouchEvent(true, function()
{
// Eliminar captura
var imagen = document.getElementById("capturaPantalla");
imagen.parentNode.removeChild(imagen);
// Restaurar configuración del div
contenedorJuego.style.overflow = "hidden";
// Eliminar capa de máscara
capaMensaje.removeFromParentAndCleanup(true);
});
capaMensaje.ignoreAnchorPointForPosition(false);
// Agregar mensaje de texto
var textoAviso = cc.LabelTTF.create("Mantén presionada la imagen para compartir, haz clic en el área en blanco para cancelar", "Arial", 40);
textoAviso.setPosition(cc.p(tamanoDiseño.width/2, 35));
textoAviso.setAnchorPoint(cc.p(0.5, 0));
capaMensaje.addChild(textoAviso, 0, "textoAviso");
},
Las coordenadas del texto deben calcularse dinámicamente, aquí simplemente he seleccionado una posición para agregarlo.