이미지의 픽셀을 변경하는 방법

Question

저는 실제로 다음을 시도합니다. bitmapdata 객체에 외부 이미지를로드하고 마우스 이벤트를 갖기 위해 비트 맵을 스프라이트/MovieClip에 첨부하여 비트 맵을 만듭니다. 그 위에. 이제 이전 논리에서 특정 색상을 가지고 검은 색 전경 원으로 덮인 동일한 크기의 이미지 두 개 (원을 말)를로드했습니다. 마우스 왼쪽 버튼을 누른 상태에서 마우스를 움직여 전경 원의 픽셀을 지우면 배경 이미지가 나타나기 시작합니다. 달성하기 위해 노력했지만 행운이 없었습니다. 내 최선의 시도에서 내가 전경 이미지에 선을 그릴 달성하지만 배경을 밝힐 수 없다! 내가 바로 그것을 가지고 있다면 당신은 예를 들어 숨겨진 이미지를 표시하기 위해 마스크를 무승부로는 효과를 '공개'하려면

package 
{ 
    import flash.display.MovieClip; 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.events.MouseEvent; 
    import flash.display.Loader; 
    import flash.net.URLRequest; 
    import flash.display.BitmapData; 
    import flash.display.Bitmap; 
    import flash.display.BlendMode; 

    public class Test2 extends MovieClip 
    { 
     // properties - state 

     // to attach the image and have mouse events 
     private var frontImage:Sprite; 
     private var backImage:Sprite; 

     // to load the image 
     private var myLoader:Loader; 

     // to get the bitmap data of the image 
     private var frontBitmapData:BitmapData; 
     private var frontBitmap:Bitmap; 

     // test 
     private var frontMask:Bitmap; 

     // constructor 
     function Test2():void 
     { 
      // load the background image    
      backImage = new Sprite(); 
      attachImageToSprite1(new URLRequest("btest.jpg")); 
      backImage.mouseEnabled = false; 
      this.addChild(backImage); 

      // load the front image 
      frontImage = new Sprite(); 
      attachImageToSprite2(new URLRequest("test.jpg")); 
      frontImage.mouseEnabled = true; // enable mouse 
      frontImage.buttonMode = true; // set button mode 
      this.addChild(frontImage); // load to stage 

      this.frontImage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown); 
      this.frontImage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp); 
     } 

     // methods 
     private function attachImageToSprite1(Name:URLRequest):void 
     { 
      this.myLoader = new Loader(); 
      this.myLoader.load(Name); 
      this.myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete1); 
     } 

     private function attachImageToSprite2(Name:URLRequest):void 
     { 
      this.myLoader = new Loader(); 
      this.myLoader.load(Name); 
      this.myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete2); 
     } 

     private function getImageBitmapDataFromSprite(srcImage:Sprite):BitmapData 
     { 
      var tmpBitmapData:BitmapData = new BitmapData(frontImage.width, frontImage.height, true, 0xFFCCCCCC); 
      tmpBitmapData.lock(); 
      tmpBitmapData.draw(frontImage); 
      tmpBitmapData.unlock(); 
      return tmpBitmapData; 
     } 

     private function isPixelAlpha(bitmapdata:BitmapData):Boolean 
     { 
      var pixelValue:uint = bitmapdata.getPixel32(mouseX, mouseY); 
      var alphaValue:uint = pixelValue >> 24 & 0xFF; 
      //var red:uint = pixelValue >> 16 & 0xFF; 
      //var green:uint = pixelValue >> 8 & 0xFF; 
      //var blue:uint = pixelValue & 0xFF; 
      return (alphaValue == 0x00) ? true : false; 
     } 

     private function deletePixelUnderMouse(bitmapdata:BitmapData, bitmap:Bitmap):void 
     { 
      bitmapdata.lock(); 
      if (!isPixelAlpha(bitmapdata)) { 
       bitmapdata.setPixel32(mouseX, mouseY, 0xFF << 24); // how to make the current pixel's alpha 
      }              // equal to zero. 
      bitmap = new Bitmap(bitmapdata); 
      bitmap.x = frontImage.x; 
      bitmap.y = frontImage.y; 
      this.frontImage.addChild(bitmap); 
      bitmapdata.unlock(); 
     } 

     // events 
     public function onLoadComplete1(e:Event):void 
     { 
      frontImage.addChild(this.myLoader.content); 
     } 

     public function onLoadComplete2(e:Event):void 
     { 
      backImage.addChild(this.myLoader.content); 
     } 

     public function onMouseDown(e:MouseEvent):void 
     { 
      // delete a pixel from the sprite under the mouse 
      frontBitmapData = getImageBitmapDataFromSprite(frontImage); 
      deletePixelUnderMouse(frontBitmapData, frontBitmap); 
      frontImage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseDown); 
      trace("start"); 
     } 

     public function onMouseUp(e:MouseEvent):void 
     { 
      frontImage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseDown); 
      trace("stop") 
     } 
    } 
} 

Answer 1

는하지만, 이것은 조금 더 쉽게 확인 달성 할 수 없음 :

var bitmapToReveal:BitmapData = new BitmapToReveal(0,0); 
var brush:BitmapData = new Brush(0,0); 
var canvasData:BitmapData = new BitmapData(bitmapToReveal.width,bitmapToReveal.height,true,0x00FFFFFF); 
var cursor:Point = new Point();//used as destination point when painting 
var zero:Point = new Point();//reused for painting 
var reveal:Bitmap = new Bitmap(bitmapToReveal); 
var canvas:Bitmap = new Bitmap(canvasData); 
reveal.cacheAsBitmap = canvas.cacheAsBitmap = true; 
addChild(reveal); 
addChild(canvas); 
reveal.mask = canvas; 

stage.addEventListener(MouseEvent.MOUSE_DOWN, brushDown); 
stage.addEventListener(MouseEvent.MOUSE_UP, brushUp); 

function brushDown(event:MouseEvent):void { 
    this.addEventListener(Event.ENTER_FRAME, paint); 
} 
function brushUp(event:MouseEvent):void { 
    this.removeEventListener(Event.ENTER_FRAME, paint); 
} 
function paint(event:Event):void { 
    cursor.x = mouseX-brush.width*.5; 
    cursor.y = mouseY-brush.height*.5; 
    canvasData.copyPixels(brush,brush.rect,cursor,brush,zero,true); 
} 

두 개의 비트 맵을 사용하여 라이브러리 (bitmapToReveal 및 브러시)를 사용하고 있습니다. 가장 중요한 것은 copyPixels() 메소드입니다. 브러쉬 비트 맵을 캔버스 (빈 투명 비트 맵 데이터), (오프셋 된 브러시 중심이므로) 오프셋 커서 위치를 사용하여 복사하고 알파 채널을 사용하여 복사합니다. 마스크와 마스케이 모두에 대해 cacheAsBitmap을 true로 설정했습니다. 투명 마스크를 얻으려면이 작업을 수행해야합니다. 이 효과의 핵심입니다.

당신이 할 수있는 '페인트'마스크 here 다음은

는 결과이다. CS4 소스는 here입니다.

HTH, 조지