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

Question

ma question est la suivante, mes utilisateurs d'importer une image FileReference et je dois masquer puis l'envoyer au serveur.

Mon problème est le suivant: Je suis en mesure de l'événement ne gardez 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 la charge dans ma toile.

Answer 1

Vous avez juste besoin d'ajouter bitmap chargé à conteneur masquable (par exemple Sprite). Par exemple: 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. Consultez 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);
        }
    }
}}

Cliquez d'abord sur la scène vous permet de sélectionner l'image masquée. En second clic vous permet de sélectionner l'image qui contient les informations de masquage (fichier par exemple avec la transparence .png). Espérons que cela aide.