Para el procesamiento de píxeles en HTML5, debe usar dos funciones getimagedata y putimagedata. Primero use GetImagedata para copiar los datos de píxeles en el lienzo de lienzo, luego procese los datos de píxeles obtenidos y finalmente pegue los datos procesados en el lienzo de lienzo a través de Putimagedata . También podríamos llamar al proceso de procesamiento de píxeles en el medio de procesamiento de lotes de píxeles. Dado que copiar y pegar píxeles son dos procesos que requieren mucho tiempo, para procesar los píxeles de manera más eficiente, debemos procesar la mayor cantidad de datos de píxeles como sea posible en un proceso por lotes para reducir las dos operaciones de copia y pegar píxeles.
Esto suena como un proceso muy problemático. Algunos amigos pueden ser impacientes con solo ver las oraciones anteriores. De hecho, creo que sí, así que encapsulé este problema problemático en la clase LBITMAPDATA en el motor Lufylegend. Puede manejar el lienzo en HTML5 como píxeles en flash. ¿No suena muy interesante? Si está interesado, sígueme para echar un vistazo a esta pequeña característica divertida. Primero, conozcamos LBITMAPDATA, que generalmente se usa para guardar objetos de imagen. No hablaré sobre el uso específico. Puede echar un vistazo a la documentación de la API. Aquí presentaré principalmente cómo usarlo para lotes de los píxeles de proceso.
A continuación hay dos funciones en LbitMapData
| función | Función |
|---|
| GetPixel (X, Y, Colortype) | Devuelve una matriz que representa los valores de píxeles RGB en un objeto BitMapData en un punto específico (x, y). donde Colortype es el formato de los datos de píxeles a recuperar, y el valor predeterminado es una matriz de píxeles. Cuando se establece en un número de cadena, devuelve un píxel del tipo de número. |
| setPixel (x, y, datos) | Establece un solo píxel del objeto LBITMAPDATA. Donde los datos son un valor de píxel (admite tres formatos: matriz de píxeles, #FF0000, 0xff000, etc.) |
Las dos funciones anteriores deben obtener y establecer un solo píxel. Cuando necesitamos obtener o establecer un píxel en un área a la vez, las dos funciones correspondientes son las siguientes
| función | Función |
|---|
| getpixels (rect) | Devuelve una matriz que representa los valores de píxeles RGB en un área específica en un objeto BitMapData. Donde Rect es un objeto Lrectangle, que es un rectángulo. |
| setPixels (rect, datos) | Convierte y pasea la matriz de datos de píxeles al área del rectángulo especificado. Donde los datos son un valor de píxel (admite tres formatos: matriz de píxeles, #FF0000, 0xff000, etc.) |
Preparemos una imagen primero, como el guapo avatar de mi hombre a continuación, no vomiten ...
Si desea copiar la cara hermosa en el medio a través de GetPixels, puede hacerlo así
[JavaScript] Ver PlainCopy
- bitmapData = newLBitMapData (imglist [cara]);
- bitmapData.lock ();
- varimg = bitmapData.getPixels (newLrectangle (75,50,100,100));
A veces necesitamos copiar y pegar píxeles en LBITMAPDATA varias veces. En este momento, podemos usar la función de bloqueo, que puede almacenar en caché de la matriz de píxeles. En este proceso, todas las operaciones de píxeles realizadas se operan en esta matriz de caché. Una vez completada la operación, se llama a la función de desbloqueo correspondiente para pegar los datos de píxeles de operación en LBITMAPDATA.
Por ejemplo, como se muestra a continuación, pegamos parte de la matriz copiada en cuatro ubicaciones diferentes en otro LBITMAPDATA en cuatro veces.
[JavaScript] Ver PlainCopy
- bitmapData2 = newLBitMapData (nulo, 0,0,500,400, LBITMAPDATA.DATA_CANVAS);
- bitmapData2.lock ();
- bitmapData2.setPixels (newLrectangle (50,30,50,50), IMG);
- bitmapData2.setPixels (newlrectangle (100,30,50,50), IMG);
- bitmapData2.setPixels (newLrectangle (150,30,50,50), IMG);
- bitmapData2.setPixels (newLrectangle (200,30,50,50), IMG);
- bitmapData2.unlock ();
El código anterior primero crea un objeto LBITRMAPDATA vacío. El último parámetro es una nueva característica en la versión Lufylegend-1.8.8, convirtiendo los datos guardados en el objeto LBITRMAPDATA en un objeto Canvas, que puede mejorar la eficiencia de las operaciones de píxeles.
El efecto del código de ejecución es el siguiente
Por supuesto, también puede procesar algo de procesamiento en estos píxeles, como los siguientes
[JavaScript] Ver PlainCopy
bitmapData2.lock (); varrect = newlrectangle (50,100,100,100); varrect1 = newlrectangle (150,100,100,100); para (varar = 0; y <rect.height; y ++) { for (varx = 0; x <rect.width; x ++) { vari = y*4*100+x*4; bitmapData2.setPixel (rect.x+rect.width-x, y+rect.y, [img.data [i], img.data [i+1], img.data [i+2], img.data [i+3]]); } } para (varar = 0; y <rect1.height; y ++) { for (varx = 0; x <rect1.width; x ++) { vari = y*4*100+x*4; bitmapData2.setPixel (x+rect1.x, y+rect1.y, [img.data [i], img.data [i+1], img.data [i+2], img.data [i+3]]); } } bitmapData2.unlock (); El efecto es el siguiente Como puede ver, volteamos con éxito la imagen procesando píxeles.
Por supuesto, el cambio de imagen no necesita ser tan problemático. En el motor Lufylegend.js, solo necesita establecer la propiedad del objeto SCALEX en -1 para lograr la imagen. Aquí mostramos principalmente que el procesamiento de píxeles es muy flexible.
De acuerdo, con la introducción anterior, podemos usar estas API para crear un efecto de partículas frías, el efecto es el siguiente.
Primero, agregemos un texto al lienzo
[JavaScript] Ver PlainCopy varlabelText = newLTextField (); LabelText.color =#000000; LabelText.weight = Bolder; etiquetaText.Text = getParameter (k); if (! LaborText.Text) LabelText.Text = Lufylegend.js; LabelText.size = 50; varw = labelText.getWidth ()*1.1; varh = labelText.size*1.5; LabelText.Width = W; LabelText.SetWordWrap (True, H); LabelText.x = (lglobal.Width-W)*0.5; LabelText.y = (lglobal.height-h)*0.5; backlayer = newLSprite (); AddChild (Backlayer); backlayer.addchild (etiquetaText); El efecto es el siguiente Los únicos que deben explicarse anteriormente son las siguientes líneas
[JavaScript] Ver PlainCopy varw = labelText.getWidth ()*1.1; varh = labelText.size*1.5; LabelText.Width = W; LabelText.SetWordWrap (True, H); De hecho, solo necesita usar GetWidth () y Getheight () para obtener la altura y el ancho del texto. Sin embargo, debido a que no hay función para obtener la altura del texto en el lienzo, el motor usa una forma inexacta de obtenerla (por supuesto, esto se resolverá perfectamente en la próxima actualización del motor). En este desarrollo, la altura y el ancho del texto utilizados no deben ser menores que el tamaño original del texto, por lo que restablezco la altura y el ancho ligeramente más grandes para el texto. A continuación, usamos la función de dibujo del objeto LBITMAPDATA para convertir este texto en un objeto LBITMAPDATA. ¿Por qué necesitamos convertirlo en un objeto LBITMAPDATA? Continúe mirando hacia abajo y lo sabrá en un tiempo.
[JavaScript] Ver%20PlainCopy bitmapData = newLBitMapData (#000000,0,0, lglobal.width, lglobal.height, lbitmapdata.data_canvas); bitmapdata.draw (backlayer); El procesamiento anterior es en realidad un preludio, no para visualización real. Creemos un objeto vacío LBITMAPDATA y lo dibujemos en el lienzo de lienzo a través de LBITMAP. [JavaScript] Ver%20PlainCopy Snowback = newlbitMapData (nulo, 0,0, lglobal.width, lglobal.height, lbitmapdata.data_canvas); varbitmap = newLBitMap (nieveback); backlayer.addchild (mapa de bits); El punto clave está aquí. Ahora necesito procesar continuamente los píxeles del objeto Snowback. Esto es simple, podemos implementarlo a través de Enter_frame. [JavaScript] Ver%20PlainCopy backlayer.addeventListener (levent.enter_frame, run); Como puede ver en las representaciones anteriores, necesito agregar constantemente partículas blancas al lienzo, al igual que está nevando. Sin embargo, estas partículas blancas no se pueden dibujar directamente sobre el lienzo. Primero debemos agregar estas partículas a una matriz de caché y luego operarlas en lotes. La siguiente función se usa para generar una partícula, y los parámetros son (coordenadas x, coordenadas y, aceleración de descenso, velocidad de dirección del eje x y velocidad de dirección del eje y). [JavaScript] Ver%20PlainCopy FunctionParticle (PX, Py, PS, PVX, Pvy) { if (typeOfps == Undefined) PS = 1; if (typeofpvx == undefined) pvx = 0; if (typeOfPvy == Undefined) Pvy = 0; _snow.push ({x: px, y: py, s: ps, vx: pvx, vy: pvy}); } Al llamar constantemente esta función, constantemente agregamos partículas blancas al lienzo. Las partículas agregadas al lienzo habrán acelerado el movimiento hacia abajo de manera similar al caída libre. Durante el movimiento, encontraremos obstáculos, es decir, el texto que se muestra en la pantalla antes, cuando las partículas encuentren texto, estarán sujetos a resistencia y el movimiento se vuelve lento. De esta manera, las partículas se ven obstaculizadas constantemente por el texto en lugares con texto, y una gran cantidad de partículas blancas se reunirán en el texto, formando el efecto de partículas anterior. La siguiente función se usa para verificar si la coordenada especificada está en el texto [JavaScript] Ver%20PlainCopy functionCheckPixel (x, y) { varpixel = bitmapData.getPixel (x, y); for (vari = 0; i <pixel.length; i ++) { if (pixel [i]) returnTrue; } returnfalse; } El principio es obtener los píxeles del punto de coordenada y luego verificar el color de los puntos de píxeles. Ahora sabe por qué necesita convertir el texto anterior en un objeto LBITMAPDATA, solo para obtener el valor de píxel del punto especificado. Finalmente, solo necesita agregar constantemente partículas blancas y luego permitir que las partículas continúen acelerando el movimiento hacia abajo. [JavaScript] Ver%20PlainCopy functionRun () { varn = _snow.length, d; snowback.lock (); Snowback.SetPixels (Rect, 0x000000); while (n-) { varp = _snow [n]; P.Vy+= Gravity*PS; P.Y+= P.Vy; if (checkPixel (px, py)) { py- = P.Vy; P.Vy = 0; P.Y+= 0.2; } Snowback.SetPixel (PX, PY, 0xffffffff); if (py> lglobal.height) { _snow.splice (n, 1); } } snowback.unlock (); n = 10; while (n-) { parcial (math.random ()*lglobal.width, 0, math.random ()+0.5); } } Ok, el trabajo está hecho. En el ejemplo anterior, el texto [Lufylegend.js] se fija, y podemos expandirlo aún más para establecer el texto que se muestre a través de la URL. La siguiente función se puede usar para obtener el valor del parámetro en la URL. [JavaScript] Ver%20PlainCopy functetParameter (clave) { varstr = ubicación.search.split (?); if (str.length <2) { devolver; } varparams = str [1] .split (&); for (vari = 0; i <params.length; i ++) { varkeyval = params [i] .split (=); if (keyVal [0] == key && keyval.length == 2) { returnDecodeuricOponent (KeyVal [1]); } } devolver; } Luego llame a esta función para establecer el valor del texto [JavaScript] Ver%20PlainCopy etiquetaText.Text = getParameter (k); Bien, puedes probarlo. La siguiente URL, puede cambiar el siguiente texto en cualquier personaje que desee http://lufylegend.com/demo/snow_word/index.html?k=hello Todos Diagrama de reproducción
Código fuente De hecho, hay código fuente en el paquete de descarga del motor Lufylegend, pero es ligeramente diferente de este artículo. El código fuente en este artículo solo tiene un archivo HTML. Puede ver el código fuente completo haciendo clic derecho en el navegador. De acuerdo, a continuación, use su imaginación para crear efectos de partículas más guapos e interesantes, como los efectos de partículas más especiales a continuación.
http://lufylegend.com/demo/particle01/
Sitio web oficial del motor Lufylegend.js http://lufylegend.com/lufylegend
