如何更改图像中的像素

时间:2010-02-15 16:45:34

标签: actionscript-3 flash-cs4

我实际上尝试执行以下操作:我已经在bitmapdata对象中加载了一个外部图像并从中创建了一个位图,我将它附加到sprite / 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")
        }
    }
}

1 个答案:

答案 0 :(得分:3)

不确定我是否正确,但如果你想要一个'揭示'效果,就像你画一个掩码来显示隐藏的图像一样,这可以稍微容易实现:

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);
}

我在库中使用了两个Bitmaps(bitmapToReveal和brush)。 要看的主要是copyPixels()方法。我复制 画笔位图到画布中(空透明位图数据), 使用偏移光标位置(使画笔居中),并使用 Alpha通道做到这一点。请注意,我已将 cacheAsBitmap 设置为true 对于面具和maskee。你需要做到这一点来获得透明面具, 这是影响的关键。

结果如下:

bitmap brush

你可以'画'面具here。 CS4来源为here

HTH, 乔治