HTML5 Programação avançada Processamento de pixels e efeitos de partículas

Autor：Eve Cole Data da Última Atualização：2025-05-17 19:16:01

Para o processamento de pixels no HTML5, você precisa usar duas funções getImagedata e putimagedata. Primeiro, use getImagedata para copiar os dados do pixel na tela do Canvas, depois processe os dados de pixels obtidos e, finalmente, coloque os dados processados na tela do Canvas através do PutImagedata . Podemos também chamar o processo de processamento de pixels no meio de processamento em lote de pixels. Como copiar e colar os pixels são dois processos demorados, para processar pixels com mais eficiência, devemos processar o máximo de dados de pixels possível em um processo em lote para reduzir as duas operações de cópia e colagem de pixels.

Isso parece um processo muito problemático. Alguns amigos podem estar impacientes apenas ao ver as frases acima. Na verdade, acho que sim, então encapsulei esse processo problemático na classe LbitmapData no mecanismo Lufylegend. Você pode lidar com a tela no HTML5 como os pixels no flash. Isso não soa muito interessante? Se você estiver interessado, siga -me para dar uma olhada neste pequeno recurso divertido.

Primeiro, vamos conhecer o lbitmapdata, que geralmente é usado para salvar objetos de imagem. Não vou falar sobre o uso específico. Você pode dar uma olhada na documentação da API. Aqui, apresentarei principalmente como usá -lo para pixels de processo em lote.

Abaixo estão duas funções em lbitmapdata

função	Função
getpixel (x, y, colortype)	Retorna uma matriz representando os valores de pixel RGB em um objeto BitmapData em um ponto específico (x, y). Onde o Colortype é o formato dos dados do pixel a ser recuperado e o padrão é uma matriz de pixels. Quando definido como um número de string, ele retorna um pixel do tipo de número.
setPixel (x, y, dados)	Define um único pixel do objeto lbitmapdata. Onde os dados são um valor de pixel (suporta três formatos: matriz de pixels, #ff0000, 0xff000, etc.)

As duas funções acima são obter e definir um único pixel. Quando precisamos obter ou definir um pixel em uma área de uma só vez, as duas funções correspondentes são as seguintes

função	Função
getPixels (Rect)	Retorna uma matriz representando os valores de pixel RGB em uma área específica em um objeto BitmapData. onde ret é um objeto Lrectangle, que é um retângulo.
setPixels (Rect, Data)	Converte e pasta a matriz de dados do pixel na área de retângulo especificada. Onde os dados são um valor de pixel (suporta três formatos: matriz de pixels, #ff0000, 0xff000, etc.)

Vamos preparar uma foto primeiro, como o belo avatar do meu homem abaixo, não vomite ...

Se você quiser copiar o rosto bonito no meio através do getPixels, você pode fazer isso assim

[JavaScript] Veja o simples cópia

bitmapdata = newlbitmapdata (imglist [face]);
bitmapdata.lock ();
varimg = bitmapdata.getpixels (newlrectangle (75,50.100.100));

Às vezes, precisamos copiar e colar pixels no lbitmapdata várias vezes. Neste momento, podemos usar a função de bloqueio, que pode armazenar em cache a matriz de pixels. Nesse processo, todas as operações de pixel realizadas são operadas nesta matriz de cache. Após a conclusão da operação, a função de desbloqueio correspondente é chamada para colar os dados da operação Pixel novamente no lbitmapData.

Por exemplo, como mostrado abaixo, colamos parte da matriz copiada em quatro locais diferentes em outro lbitmapdata em quatro vezes.

[JavaScript] Veja o simples cópia

bitmapData2 = newlbitmapdata (null, 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 ();

O código acima primeiro cria um objeto LbitrmapData vazio. O último parâmetro é um novo recurso na versão Luffylegend-1.8.8, convertendo os dados salvos no objeto LbitrmapData em um objeto de tela, que pode melhorar a eficiência das operações de pixels.

O efeito do código de execução é o seguinte

Obviamente, você também pode fazer algum processamento nesses pixels, como o seguinte

[JavaScript] Veja o simples cópia

bitmapdata2.lock (); Varrect = newlrectangle (50.100.100.100); Varrect1 = newlrectangle (150.100.100.100); for (variar = 0; y <ret.Height; y ++) { for (varx = 0; x <ret.width; x ++) { vari = y*4*100+x*4; bitmapdata2.setpixel (ret.x+ret.width-x, y+ret.y, [img.data [i], img.data [i+1], img.data [i+2], img.data [i+3]]); } } for (variar = 0; y <rect1.Height; y ++) { for (varx = 0; x <rect1.width; x ++) { vari = y*4*100+x*4; bitmapdata2.setpixel (x+ret1.x, y+ret1.y, [img.data [i], img.data [i+1], img.data [i+2], img.data [i+3]]); } } bitmapdata2.unlock (); O efeito é o seguinte

Como você pode ver, viramos a foto com sucesso processando os pixels.

Obviamente, o lançamento da imagem não precisa ser tão problemático. No mecanismo Lufylegend.js, você só precisa definir a propriedade do objeto Scalex como -1 para alcançar o flip de imagem. Aqui, mostramos principalmente que o processamento de pixels é muito flexível.

Ok, com a introdução acima, podemos usar essas APIs para criar um efeito legal de partículas, o efeito é o seguinte.

Primeiro, vamos adicionar um texto à tela

[JavaScript] Veja o simples cópia

varlabelText = newlTextfield (); LABELTEXT.COLOR =#000000; LabelText.Weight = Boldder; LABELTEXT.TEXT = getParameter (K); se (! LabelText.size = 50; Varw = LABELTEXT.GetWidth ()*1.1; varh = LABORTTEXT.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 (LabelText); O efeito é o seguinte

Os únicos que precisam ser explicados acima são as seguintes linhas

[JavaScript] Veja o simples cópia

Varw = LABELTEXT.GetWidth ()*1.1; varh = LABORTTEXT.SIZE*1.5; LabelText.Width = W; LabelText.SetWordWrap (true, h); De fato, você só precisa usar o getWidth () e o GetHeight () para obter a altura e a largura do texto. No entanto, como não há função para obter a altura do texto na tela, o mecanismo usa uma maneira imprecisa para obtê -lo (é claro, isso será perfeitamente resolvido na próxima atualização do mecanismo). Nesse desenvolvimento, a altura e a largura do texto usadas devem ser menos que o tamanho original do texto, então redefino a altura e a largura ligeiramente maiores para o texto.

Em seguida, usamos a função de desenho do objeto lbitmapData para converter este texto em um objeto LBITMapData. Por que precisamos convertê -lo em um objeto lbitmapdata? Por favor, continue olhando para baixo e você saberá há algum tempo.