如何更改图像中的像素

Question

我实际上尝试执行以下操作：我已在 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")
        }
    }
}

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() 方法。我复制
将画笔位图放入画布（一个空的透明位图数据），
使用偏移光标位置（使画笔居中），并使用
alpha 通道可以做到这一点。请注意，我已将 cacheAsBitmap 设置为 true
对于面罩和面罩。你需要这样做才能得到一个透明的面具，
这是效果的关键。

结果如下：

您可以“绘制”蒙版 此处。 CS4 源代码位于此处。

哈特哈，
乔治