Pour le traitement des pixels dans HTML5, vous devez utiliser deux fonctions getImagedata et putImagedata. Utilisez d'abord GetImagedata pour copier les données de pixels dans la toile du canevas, puis traitez les données de pixels obtenues et collez enfin les données traitées dans la toile en toile via des putImagedata . Nous pourrions aussi bien appeler le processus de traitement des pixels au milieu d'un traitement par lots de pixels. Étant donné que la copie et le collage des pixels sont deux processus provisoires, afin de traiter plus efficacement les pixels, nous devons traiter autant de données de pixels que possible dans un processus par lots pour réduire les deux opérations de copie et de collage de pixels.
Cela ressemble à un processus très gênant. Certains amis peuvent être impatients simplement en voyant les phrases ci-dessus. En fait, je pense que oui, j'ai donc encapsulé ce processus gênant dans la classe Lbbitmapdata dans le moteur Lufylegend. Vous pouvez gérer la toile dans HTML5 comme des pixels en flash. Cela ne semble-t-il pas très intéressant? Si vous êtes intéressé, suivez-moi pour jeter un œil à cette petite fonctionnalité amusante. Tout d'abord, apprenons à connaître LbitmapData, qui est généralement utilisé pour enregistrer des objets image. Je ne parlerai pas de l'utilisation spécifique. Vous pouvez jeter un œil à la documentation de l'API. Ici, je présenterai principalement comment l'utiliser pour traiter les pixels de traitement par lots.
Vous trouverez ci-dessous deux fonctions dans lbitmapdata
| fonction | Fonction |
|---|
| getPixel (x, y, colortype) | Renvoie un tableau représentant les valeurs de pixels RVB dans un objet BitmapData à un point spécifique (x, y). où ColorType est le format des données de pixels à récupérer, et la valeur par défaut est un tableau de pixels. Lorsqu'il est défini sur un numéro de chaîne, il renvoie un pixel du type de nombre. |
| setPixel (x, y, données) | Définit un seul pixel de l'objet LbitmapData. Où les données sont une valeur de pixels (prend en charge trois formats: tableau pixel, # FF0000, 0xff000, etc.) |
Les deux fonctions ci-dessus sont à obtenir et à définir un seul pixel. Lorsque nous devons obtenir ou régler un pixel dans une zone à la fois, les deux fonctions correspondantes sont les suivantes
| fonction | Fonction |
|---|
| getPixels (rect) | Renvoie un tableau représentant les valeurs de pixels RVB dans une zone spécifique dans un objet BitmapData. où rect est un objet Lrectangle, qui est un rectangle. |
| setPixels (rect, données) | Convertit et colle le tableau de données de pixels en zone rectangulaire spécifiée. Où les données sont une valeur de pixels (prend en charge trois formats: tableau pixel, # FF0000, 0xff000, etc.) |
Préplions d'abord une photo, comme le bel avatar de mon homme ci-dessous, ne vomit pas ...
Si vous souhaitez copier le beau visage au milieu via Getpixels, vous pouvez le faire comme ça
[JavaScript] Voir Plaincopy
- bitmapdata = newlbitmapdata (imglist [face]);
- bitmapdata.lock ();
- varimg = bitmapdata.getPixels (newlrectangle (75,50,100,100));
Parfois, nous devons copier et coller des pixels sur lbitmapdata plusieurs fois. Pour le moment, nous pouvons utiliser la fonction de verrouillage, qui peut mettre en cache le tableau de pixels. Dans ce processus, toutes les opérations de pixel effectuées sont opérées sur ce tableau de cache. Une fois l'opération terminée, la fonction de déverrouillage correspondante est appelée pour coller les données de pixel de l'opération dans LBITMAPDATA.
Par exemple, comme indiqué ci-dessous, nous collons une partie du tableau copié dans quatre emplacements différents dans un autre lbitmapdata en quatre fois.
[JavaScript] Voir Plaincopy
- 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 ();
Le code ci-dessus crée d'abord un objet lbitrmapdata vide. Le dernier paramètre est une nouvelle fonctionnalité dans la version LufyleGend-1.8.8, convertissant les données enregistrées dans l'objet LbitrmapData en un objet en toile, ce qui peut améliorer l'efficacité des opérations de pixels.
L'effet du code d'exécution est le suivant
Bien sûr, vous pouvez également faire un traitement sur ces pixels, comme les suivants
[JavaScript] Voir Plaincopy
bitmapData2.lock (); vArrect = Newlrectangle (50 100,100,100); vArrect1 = Newlrectangle (150,100,100,100); pour (variy = 0; y <rect.height; y ++) { pour (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]]); } } pour (variy = 0; y <rect1.height; y ++) { pour (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 (); L'effet est le suivant Comme vous pouvez le voir, nous avons réussi à retourner l'image en traitant des pixels.
Bien sûr, le retournement de l'image n'a pas besoin d'être aussi gênant. Dans le moteur LufyleGend.js, il vous suffit de définir la propriété de l'objet Scalex sur -1 pour réaliser l'image FLIP. Ici, nous montrons principalement que le traitement des pixels est très flexible.
D'accord, avec l'introduction ci-dessus, nous pouvons utiliser ces API pour créer un effet de particules frais, l'effet est le suivant.
Tout d'abord, ajoutons un texte à la toile
[JavaScript] Voir Plaincopy varLabelText = newlTextField (); LabelText.Color = # 000000; LabelText.weight = Bolder; LabelText.Text = getParameter (k); if (! LabelText.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 (LabelText); L'effet est le suivant Les seuls qui doivent être expliqués ci-dessus sont les lignes suivantes
[JavaScript] Voir Plaincopy varw = labeltext.getWidth () * 1.1; varh = labeltext.size * 1.5; LabelText.Width = W; LabelText.setwordwrap (true, h); En fait, il vous suffit d'utiliser GetWidth () et Getheight () pour obtenir la hauteur et la largeur du texte. Cependant, comme il n'y a pas de fonction pour obtenir la hauteur du texte en toile, le moteur utilise un moyen inexact pour l'obtenir (bien sûr, cela sera parfaitement résolu dans la prochaine mise à jour du moteur). Dans ce développement, la hauteur du texte et la largeur utilisée ne doivent pas être inférieures à la taille d'origine du texte, donc j'ai réinitialisé la hauteur et la largeur légèrement plus grandes pour le texte. Ensuite, nous utilisons la fonction de dessin de l'objet LbitmapData pour convertir ce texte en un objet LbitmapData. Pourquoi devons-nous le convertir en un objet LbitmapData? Veuillez continuer à regarder en bas et vous le saurez depuis un moment.
[JavaScript] Voir% 20PLAINCOPY bitmapdata = newlbitmapdata (# 000000,0,0, lglobal.width, lglobal.height, lbitmapdata.data_canvas); bitmapdata.draw (backlayer); Le traitement ci-dessus est en fait un prélude, pas pour un vrai écran. Créons un objet vide LbbitmapData et dessinez-le sur le canevas Canvas via LBITMAP. [JavaScript] Voir% 20PLAINCOPY Snowback = newlbitmapdata (null, 0,0, lglobal.width, lglobal.height, lbitmapdata.data_canvas); varbitmap = newlbitmap (snowback); backlayer.addchild (bitmap); Le point clé est ici. J'ai maintenant besoin de traiter en continu les pixels de l'objet Snowback. C'est simple, nous pouvons l'implémenter via ENTER_FRAME. [JavaScript] Voir% 20PLAINCOPY backlayer.addeventListener (levent.enter_frame, run); Comme vous pouvez le voir dans les rendus ci-dessus, je dois constamment ajouter des particules blanches à la toile, tout comme elle neige. Cependant, ces particules blanches ne peuvent pas être dessinées directement sur la toile. Nous devons d'abord ajouter ces particules à un réseau de cache, puis les opérer en lots. La fonction suivante est utilisée pour générer une particule, et les paramètres sont (coordonnées x, coordonnées Y, accélération de descente, vitesse de direction de l'axe x et vitesse de direction de l'axe y). [JavaScript] Voir% 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}); } En appelant constamment cette fonction, nous ajoutons constamment des particules blanches à la toile. Les particules ajoutées à la toile auront un mouvement vers le bas accéléré similaire à la chute libre. Pendant le mouvement, nous rencontrerons des obstacles, c'est-à-dire le texte affiché à l'écran avant, lorsque les particules rencontrent du texte, elles seront soumises à la résistance et que le mouvement deviendra lent. De cette façon, les particules sont constamment entravées par le texte par endroits avec du texte, et un grand nombre de particules blanches se rassembleront dans le texte, formant l'effet de particules ci-dessus. La fonction suivante est utilisée pour vérifier si la coordonnée spécifiée est sur le texte [JavaScript] Voir% 20PLAINCOPY FunctionCheckPixel (x, y) { VarPixel = bitmapData.getPixel (x, y); pour (vari = 0; i <pixel.length; i ++) { if (pixel [i]) returnTrue; } returnFalse; } Le principe est d'obtenir les pixels du point de coordonnées, puis de vérifier la couleur des points de pixels. Maintenant, vous savez pourquoi vous devez convertir le texte précédent en un objet LbitmapData, juste pour obtenir la valeur de pixel du point spécifié. Enfin, il vous suffit d'ajouter constamment des particules blanches, puis de permettre aux particules de continuer à accélérer le mouvement vers le bas. [JavaScript] Voir% 20PLAINCOPY functionrun () { varn = _snow.length, d; Snowback.lock (); Snowback.SetPixels (RECT, 0x000000); tandis que (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; tandis que (n -) { partiel (math.random () * lglobal.width, 0, math.random () + 0,5); } } Ok, le travail est terminé. Dans l'exemple ci-dessus, le texte [lufylegend.js] est fixe, et nous pouvons davantage l'étendre pour définir le texte pour être affiché via l'URL. La fonction suivante peut être utilisée pour obtenir la valeur du paramètre dans l'URL. [JavaScript] Voir% 20PLAINCOPY functionGetParameter (key) { varstr = location.search.split (?); if (str.length <2) { retour; } VarParams = str [1] .split (&); pour (vari = 0; i <params.length; i ++) { varkeyval = params [i] .split (=); if (keyVal [0] == key && keyval.length == 2) { returnDecodeURICPORANT (KEYVAL [1]); } } retour; } Puis appelez cette fonction pour définir la valeur du texte [JavaScript] Voir% 20PLAINCOPY LabelText.Text = getParameter (k); D'accord, vous pouvez le tester. L'URL suivante, vous pouvez changer le texte suivant en n'importe quel personnage que vous aimez http://lufylegend.com/demo/snow_word/index.html?k=hello tout le monde Diagramme de reproduction
Code source En fait, il y a du code source dans le package de téléchargement du moteur Lufylegend, mais il est légèrement différent de cet article. Le code source de cet article n'a qu'un seul fichier HTML. Vous pouvez voir le code source complet en cliquant avec le bouton droit sur le navigateur. D'accord, ensuite, veuillez utiliser votre imagination pour créer des effets de particules plus beaux et intéressants, comme les effets de particules plus spéciaux ci-dessous.
http://lufylegend.com/demo/particle01/
site Web officiel de moteur lufylegend.js http://lufylegend.com/lufylegend
