HTML5에서 픽셀 처리하려면 getImagedata와 putimagedata의 두 기능을 사용해야합니다. 먼저 getImagedata를 사용하여 캔버스 캔버스에서 픽셀 데이터를 복사 한 다음 획득 한 픽셀 데이터를 처리 한 다음 처리 된 데이터를 putimagedata를 통해 캔버스 캔버스에 붙여 넣습니다 . 중간에 픽셀 처리 프로세스를 중간에 픽셀 배치 처리 프로세스라고 할 수도 있습니다. 복사 및 붙여 넣기 픽셀은 두 가지 시간이 소요되는 프로세스이므로 픽셀을보다 효율적으로 처리하기 위해 배치 프로세스에서 가능한 한 많은 픽셀 데이터를 처리하여 복사 및 붙여 넣기의 두 가지 작업을 줄여야합니다.
이것은 매우 번거로운 과정처럼 들립니다. 일부 친구는 위의 문장을 보면 참을성이 없을 수 있습니다. 사실, 나는 그렇게 생각합니다. 그래서 나는이 귀찮은 프로세스를 Lufylegend 엔진의 lbitmapdata 클래스에 캡슐화했습니다. 플래시의 픽셀과 같은 html5에서 캔버스를 처리 할 수 있습니다. 이것이 매우 흥미롭지 않습니까? 관심이 있으시면이 재미있는 작은 기능을 살펴 보려면 저를 따라 가십시오. 먼저, 이미지 객체를 저장하는 데 사용되는 lbitmapdata를 알아 보겠습니다. 특정 사용법에 대해서는 이야기하지 않을 것입니다. API 문서를 살펴볼 수 있습니다. 여기서는 주로이를 사용하여 프로세스 픽셀을 배치하는 방법을 소개합니다.
아래는 lbitmapdata의 두 가지 함수입니다
| 기능 | 기능 |
|---|
| getpixel (x, y, colortype) | 특정 지점 (x, y)에서 비트 맵타 타 객체에서 RGB 픽셀 값을 나타내는 배열을 반환합니다. Colortype가 검색 할 픽셀 데이터의 형식이고 기본값은 픽셀 배열입니다. 문자열 번호로 설정하면 번호 유형의 픽셀을 반환합니다. |
| setpixel (x, y, data) | lbitmapdata 객체의 단일 픽셀을 설정합니다. 여기서 데이터는 픽셀 값입니다 (픽셀 배열, #ff0000, 0xff000 등의 세 가지 형식 지원) |
위의 두 기능은 단일 픽셀을 얻고 설정하는 것입니다. 한 번에 영역에서 픽셀을 얻거나 설정 해야하는 경우 해당 두 기능은 다음과 같습니다.
| 기능 | 기능 |
|---|
| getpixels (rect) | 비트 캡데타 객체의 특정 영역에서 RGB 픽셀 값을 나타내는 배열을 반환합니다. 여기서 rect는 lrectangle 객체이며 사각형입니다. |
| setpixels (rect, data) | 픽셀 데이터 어레이를 지정된 사각형 영역으로 변환하고 페이스트합니다. 여기서 데이터는 픽셀 값입니다 (픽셀 배열, #ff0000, 0xff000 등의 세 가지 형식 지원) |
아래 내 남자의 잘 생긴 아바타와 같은 사진을 먼저 준비합시다.
getpixels를 통해 중간에 잘 생긴 얼굴을 복사하려면 이렇게 할 수 있습니다.
[JavaScript] 평면도를 봅니다
- bitmapdata = newlbitmapdata (imglist [face]);
- bitmapdata.lock ();
- varimg = bitmapdata.getPixels (newlrectangle (75,50,100,100));
때로는 LBITMAPDATA에서 픽셀을 여러 번 복사하여 붙여 넣어야합니다. 현재 픽셀 배열을 캐시 할 수있는 잠금 기능을 사용할 수 있습니다. 이 과정에서 수행 된 모든 픽셀 작업은이 캐시 어레이에서 작동합니다. 작업이 완료된 후 해당 잠금 해제 기능을 호출하여 작동 픽셀 데이터를 LBITMAPDATA에 다시 붙여 넣습니다.
예를 들어, 아래와 같이, 우리는 복사 된 배열의 일부를 다른 lbitmapdata의 4 개의 다른 위치에 네 번 붙여 넣습니다.
[JavaScript] 평면도를 봅니다
- 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 ();
위의 코드는 먼저 빈 lbitrmapdata 객체를 만듭니다. 마지막 매개 변수는 lufylegend-1.8.8 버전의 새로운 기능으로 lbitrmapdata 객체에 저장된 데이터를 Canvas 객체로 변환하여 픽셀 작동의 효율성을 향상시킬 수 있습니다.
실행 코드 효과는 다음과 같습니다
물론 다음과 같은 픽셀에서 일부 처리를 수행 할 수도 있습니다.
[JavaScript] 평면도를 봅니다
bitmapdata2.lock (); varrect = newlrectangle (50,100,100,100); varrect1 = newlrectangle (150,100,100,100); for (vary = 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]]); } } for (vary = 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 (); 효과는 다음과 같습니다 보시다시피, 우리는 픽셀을 처리하여 그림을 성공적으로 뒤집 었습니다.
물론 이미지 뒤집기가 그렇게 번거 롭을 필요는 없습니다. lufylegend.js 엔진에서는 이미지 플립을 달성하려면 객체의 속성 Scalex를 -1로 설정하면됩니다. 여기서 우리는 주로 픽셀 처리가 매우 유연하다는 것을 보여줍니다.
자, 위의 소개를 통해이 API를 사용하여 멋진 입자 효과를 만들 수 있습니다. 효과는 다음과 같습니다.
먼저 캔버스에 텍스트를 추가하겠습니다
[JavaScript] 평면도를 봅니다 varlabeltext = newlTextField (); labelText.color =#000000; labelText.weight = BOOLDER; 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; 백 레이어 = newlsprite (); AddChild (백 레이어); Backlayer.addchild (labeltext); 효과는 다음과 같습니다 위에서 설명해야 할 유일한 것은 다음 줄입니다.
[JavaScript] 평면도를 봅니다 varw = labelText.getWidth ()*1.1; varh = labelText.Size*1.5; labelText.width = w; labelText.setwordwrap (true, h); 실제로 텍스트의 높이와 너비를 얻으려면 getWidth () 및 getheight () 만 사용하면됩니다. 그러나 캔버스에서 텍스트 높이를 얻는 기능이 없기 때문에 엔진은 부정확 한 방법을 사용하여이를 얻을 수 있습니다 (물론 엔진의 다음 업데이트에서 완벽하게 해결 될 것입니다). 이 개발에서 사용 된 텍스트 높이와 너비는 텍스트의 원래 크기에 지나지 않으므로 텍스트의 약간 더 큰 높이와 너비를 재설정합니다. 다음으로 LBITMAPDATA 객체의 드로우 함수를 사용 하여이 텍스트를 LBITMAPDATA 객체로 변환합니다. LBITMAPDATA 객체로 변환 해야하는 이유는 무엇입니까? 계속 내려다 보면 한동안 알게 될 것입니다.
[JavaScript] View%20 Plaincopy bitmapdata = newlbitmapdata (#000000,0,0, lglobal.width, lglobal.height, lbitmapdata.data_canvas); bitmapdata.draw (Backlayer); 위의 처리는 실제로 실제 디스플레이가 아닌 전주곡입니다. LBITMAPDATA 빈 객체를 만들어 LBITMAP를 통해 Canvas Canvas에 그려 봅시다. [JavaScript] View%20 Plaincopy Snowback = NewlbitMapData (null, 0,0, lglobal.width, lglobal.height, lbitmapdata.data_canvas); varbitmap = newlbitmap (스노우 백); Backlayer.addchild (Bitmap); 핵심 요점은 여기에 있습니다. 이제 스노백 물체의 픽셀을 지속적으로 처리해야합니다. 이것은 간단합니다. Enter_frame을 통해 구현할 수 있습니다. [JavaScript] View%20 Plaincopy backlayer.addeventListener (levent.enter_frame, run); 위의 렌더링에서 볼 수 있듯이 눈이 내리는 것처럼 캔버스에 흰색 입자를 지속적으로 추가해야합니다. 그러나 이러한 백 입자는 캔버스에 직접 그릴 수 없습니다. 이 입자를 먼저 캐시 어레이에 추가 한 다음 배치로 작동해야합니다. 다음 함수는 입자를 생성하는 데 사용되며 매개 변수는 (X 좌표, Y 좌표, 하강 가속도, X 축 방향 속도 및 y 축 방향 속도)입니다. [JavaScript] View%20 Plaincopy functionParticle (px, py, ps, pvx, pvy) { if (typeofps == 정의되지 않은) ps = 1; if (typeofpvx == 정의되지 않은) pvx = 0; if (typeofpvy == 정의되지 않은) pvy = 0; _snow.push ({x : px, y : py, s : ps, vx : pvx, vy : pvy}); } 이 기능을 지속적으로 호출함으로써 캔버스에 흰 입자를 지속적으로 추가합니다. 캔버스에 첨가 된 입자는 자유 낙하와 유사한 하향 운동을 가속화 할 것입니다. 움직임 중에, 우리는 장애물을 겪게됩니다. 즉, 입자가 텍스트에 직면 할 때, 이전에 화면에 표시된 텍스트는 저항이 발생하고 움직임이 느려집니다. 이런 식으로, 입자는 텍스트가 텍스트로 텍스트에 의해 지속적으로 방해되며, 많은 수의 흰색 입자가 텍스트에 모여 위의 입자 효과를 형성합니다. 다음 함수는 지정된 좌표가 텍스트에 있는지 확인하는 데 사용됩니다. [JavaScript] View%20 Plaincopy functioncheckpixel (x, y) { varpixel = bitmapdata.getPixel (x, y); for (vari = 0; i <pixel.length; i ++) { if (pixel [i]) returntrue; } returnfalse; } 원리는 좌표 지점의 픽셀을 얻은 다음 픽셀 포인트의 색상을 확인하는 것입니다. 이제 지정된 지점의 픽셀 값을 얻기 위해 이전 텍스트를 LBITMAPDATA 객체로 변환 해야하는 이유를 알았습니다. 마지막으로, 흰 입자를 지속적으로 첨가 한 다음 입자가 계속 하향 이동을 가속화하도록 허용하면됩니다. [JavaScript] View%20 Plaincopy functionrun () { varn = _snow.length, d; Snowback.lock (); snowback.setpixels (rect, 0x000000); while (n-) { varp = _snow [n]; p.vy+= 중력*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-) { partial (math.random ()*lglobal.width, 0, math.random ()+0.5); } } 좋아, 일이 끝났다. 위의 예에서는 텍스트 [lufylegend.js]가 수정되었으며 URL을 통해 표시 할 텍스트를 설정하도록 더 확장 할 수 있습니다. 다음 함수는 URL에서 매개 변수의 값을 얻는 데 사용될 수 있습니다. [JavaScript] View%20 Plaincopy functiongetParameter (키) { varstr = location.search.split (?); if (str.length <2) { 반품; } varparams = str [1] .split (&); for (vari = 0; i <params.length; i ++) { varkeyval = params [i] .split (=); if (keyVal [0] == key && keyVal.length == 2) { returnDecodeUricomponent (keyVal [1]); } } 반품; } 그런 다음이 기능을 호출하여 텍스트 값을 설정하십시오. [JavaScript] View%20 Plaincopy labelText.text = getParameter (k); 좋아요, 테스트 할 수 있습니다. 다음 URL, 다음 텍스트를 원하는 문자로 변경할 수 있습니다. http://lufylegend.com/demo/snow_word/index.html?k=hello 모두 복제 다이어그램
소스 코드 실제로 Lufylegend 엔진 다운로드 패키지에는 소스 코드가 있지만이 기사와 약간 다릅니다. 이 기사의 소스 코드에는 하나의 HTML 파일 만 있습니다. 브라우저를 마우스 오른쪽 버튼으로 클릭하여 전체 소스 코드를 볼 수 있습니다. 좋아, 다음으로, 당신의 상상력을 사용하여 아래의 더 특수한 입자 효과와 같이 더 잘 생기고 흥미로운 입자 효과를 만듭니다.
http://lufylegend.com/demo/particle01/
lufylegend.js 엔진 공식 웹 사이트 http://lufylegend.com/lufylegend
