Comment masquer l'image avec une autre image dans ActionScript 3.0

Question

Mon problème est le suivant: mes utilisateurs importent une image avec FileReference et je dois la masquer puis l'envoyer au serveur.

Mon problème est le suivant: je peux garder l'événement filereference et transférer les données d'image dans ma toile. Je suis en mesure d'envoyer au serveur le résultat du masquage.

Mais je ne suis pas capable de masquer l'image que mes utilisateurs ont chargée dans ma toile.

Il y a de l'aide/exemple ??

Merci Nicola

Answer 1

Vous avez juste besoin d'ajouter bitmap chargé à masquable conteneur (par exemple Sprite). Pour exmaple: Test.as

package { 
import flash.display.Graphics; 
import flash.display.Loader; 
import flash.display.Sprite; 
import flash.events.Event; 
import flash.events.MouseEvent; 
import flash.net.FileFilter; 
import flash.net.FileReference; 

public class Test extends Sprite { 

    private var _fileReference:FileReference; 
    private var _fileFilter:FileFilter; 
    private var _loader:Loader; 
    private var _imageContainer:Sprite; 
    private var _mask:Sprite; 
    private var _canvas:Sprite; 

    public function Test() { 
     addEventListener(Event.ADDED_TO_STAGE, addedToStageListener, false, 0, true); 
    } 

    private function addedToStageListener(event:Event):void { 
     removeEventListener(Event.ADDED_TO_STAGE, addedToStageListener); 

     _fileReference = new FileReference(); 
     _fileReference.addEventListener(Event.SELECT, fileSelectedListener, false, 0, true); 
     _fileReference.addEventListener(Event.COMPLETE, fileLoadCompleteListener, false, 0, true); 

     _fileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png"); 

     _loader = new Loader(); 
     _canvas = new Sprite(); 

     _mask = new Sprite(); 
     var maskGraphics:Graphics = _mask.graphics; 
     maskGraphics.beginFill(0xFFFFFF); 
     maskGraphics.drawCircle(50, 50, 50); 
     maskGraphics.endFill(); 

     _imageContainer = new Sprite(); 
     _imageContainer.mask = _mask; 

     _canvas.addChild(_imageContainer); 
     _canvas.addChild(_mask); 

     addChild(_canvas); 

     stage.addEventListener(MouseEvent.CLICK, mouseClickListener, false ,0, true); 
    } 

    private function mouseClickListener(event:Event):void { 
     _fileReference.browse([_fileFilter]); 
    } 

    private function fileSelectedListener(event:Event):void { 
     _fileReference.load(); 
    } 

    private function fileLoadCompleteListener(event:Event):void { 
     _loader.loadBytes(event.target.data); 

     while(_imageContainer.numChildren) { 
      _imageContainer.removeChildAt(0); 
     } 
     _imageContainer.addChild(_loader); 
    } 
}} 

Answer 2

Cela change la situation, mais pas de façon spectaculaire. Découvrez la solution modifiée:

package { 
import flash.display.Bitmap; 
import flash.display.BitmapData; 
import flash.display.Loader; 
import flash.display.Sprite; 
import flash.events.Event; 
import flash.events.MouseEvent; 
import flash.geom.Point; 
import flash.geom.Rectangle; 
import flash.net.FileFilter; 
import flash.net.FileReference; 

public class Test extends Sprite { 

    private var _fileReference:FileReference; 
    private var _fileFilter:FileFilter; 
    private var _imageLoader:Loader; 
    private var _maskLoader:Loader; 
    private var _canvas:Sprite; 

    private var _imageLoaded:Boolean = false; 

    public function Test() { 
     addEventListener(Event.ADDED_TO_STAGE, addedToStageListener, false, 0, true); 
    } 

    private function addedToStageListener(event:Event):void { 
     removeEventListener(Event.ADDED_TO_STAGE, addedToStageListener); 

     _fileReference = new FileReference(); 
     _fileReference.addEventListener(Event.SELECT, fileSelectedListener, false, 0, true); 
     _fileReference.addEventListener(Event.COMPLETE, fileLoadCompleteListener, false, 0, true); 

     _fileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png"); 

     _imageLoader = new Loader(); 
     _imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoadCompleteListener, false, 0, true); 
     _maskLoader = new Loader(); 
     _maskLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, maskLoadCompleteListener, false, 0, true); 

     _canvas = new Sprite(); 
     addChild(_canvas); 

     stage.addEventListener(MouseEvent.CLICK, mouseClickListener, false ,0, true); 
    } 

    private function mouseClickListener(event:Event):void { 
     _fileReference.browse([_fileFilter]); 
    } 

    private function fileSelectedListener(event:Event):void { 
     _fileReference.load(); 
    } 

    private function fileLoadCompleteListener(event:Event):void { 
     if (!_imageLoaded) { 
      _imageLoader.loadBytes(event.target.data); 
     } else { 
      _maskLoader.loadBytes(event.target.data); 
     } 
    } 

    private function imageLoadCompleteListener(event:Event):void { 
     _imageLoaded = true; 
    } 

    private function maskLoadCompleteListener(event:Event):void { 
     var imageBitmap:Bitmap = _imageLoader.content as Bitmap; 
     var maskBitmap:Bitmap = _maskLoader.content as Bitmap; 

     if (imageBitmap && maskBitmap) { 
      var imageBitmapData:BitmapData = imageBitmap.bitmapData; 
      var maskBitmapData:BitmapData = maskBitmap.bitmapData; 

      var boundRectange:Rectangle = new Rectangle(0, 0, maskBitmap.width, maskBitmap.height); 
      var destinationPoint:Point = new Point(0, 0); 

      var finalBitmapData:BitmapData = new BitmapData(maskBitmap.width, maskBitmap.height); 
      finalBitmapData.copyPixels(imageBitmapData, boundRectange, destinationPoint, maskBitmapData, destinationPoint); 
      var finalBitmap:Bitmap = new Bitmap(finalBitmapData); 

      while(_canvas.numChildren) { 
       _canvas.removeChildAt(0); 
      } 
      _canvas.addChild(finalBitmap); 
     } 
    } 
}} 

Le premier clic sur la scène vous permet de sélectionner une image masquée. Le second clic vous permet de sélectionner l'image, qui contient les informations de masquage (par exemple, le fichier png avec transparence, like your image). J'espère que cela t'aides.