AS3 - problem with red alpha transparency bitmapData

Question

I am creating a drawing application in as3 and I am having problems with feathered or blurry edges on the brush. I use bitmapData.draw () to draw a brush, but when drawing slowly, I see dark colored areas around the edges.

I tried many options, including setting all displayed objects to cacheAsBitmap = true, using copyPixels instead of draw, blur filter vs. gradient fill ... all to no avail.

The following class illustrates my problem. I have included the solid () method, which works correctly, but without feathered edges, the gradient () method and the filter () method, which show the same problem, and also onMove2 uses copyPixels () and has the same problem again.

Is there anything I can do to fix this ?! I really don't want to go into using pixel shaders for something so simple ...

package test {
    import flash.display.*;
    import flash.events.*;
    import flash.filters.*;
    import flash.geom.*;

    public class Sucks extends Sprite {

        private var brush:Sprite;
        private var brushMap:BitmapData;
        private var bmd:BitmapData;
        private var radius:Number = 50;
        private var color:uint = 0x990000;


        public function Sucks() {
            brush = new Sprite();
            brushMap = new BitmapData(radius*2, radius*2, true, 0x00ffffff);
            bmd = new BitmapData(stage.stageWidth, stage.stageHeight, true, 0x0);
            var bmp:Bitmap = new Bitmap(bmd, PixelSnapping.ALWAYS, true);
            addChild(bmp);

            //solid();         
            gradient();
            //filter();
            brushMap.draw(brush, new Matrix(1, 0, 0, 1, radius, radius));

            stage.addEventListener(Event.ENTER_FRAME, onMove);
        }

        private function solid():void {
            brush.graphics.beginFill(color, 1);
            brush.graphics.drawCircle(0, 0, radius);
            brush.graphics.endFill();
        }

        private function gradient():void {
            var m:Matrix = new Matrix();
            m.createGradientBox(radius*2, radius*2, 0, -radius, -radius);
            brush.graphics.beginGradientFill(GradientType.RADIAL, [color, color], [1, 0], [0, 250], m);
            brush.graphics.drawCircle(0, 0, radius);
            brush.graphics.endFill();
        }

        private function filter():void {
            solid();
            brush.filters = [new BlurFilter(8, 8, 3)];
        }

        private function onMove(e:Event):void {
            var mp:Matrix = new Matrix();
            mp.tx = mouseX;
            mp.ty = mouseY;
            bmd.draw(brush, mp);
            //bmd.applyFilter(bmd, new Rectangle(0, 0, stage.stageWidth, stage.stageHeight), new Point(), new BlurFilter(2, 2, 3));
        }

        private function onMove2(e:Event):void {
            bmd.copyPixels(brushMap, new Rectangle(0, 0, radius*2, radius*2), new Point(mouseX-radius, mouseY-radius), null, null, true);
        }

    }

}

Answer 1

Your problem is because Flash uses pre-multiplied alpha. This is usually not a big problem, but it becomes very obvious if you have pixel values ​​with very low alpha values, which, unfortunately, are very common when you use a blurry soft feathery brush.

- , , , , .

: http://www.quasimondo.com/archives/000665.php

, , - rgb . , .

Answer 2

, BlurFilter . . , Flex Filter Explorer, , .

, - , .

Answer 3

, Glow, ,

Answer 4

, enterframe, . , enter_frame mouse_move, . enter_frame , , , , , 600 . , mouse_move.

enter_frame, enter_frame, mouse_move enter_frames.

:

stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove);

Answer 5

I do not know if this is related to this, but you are setting transparency, but your BitmapData is not transparent.

brushMap = new BitmapData(radius*2, radius*2, true, 0x00ffffff);

For

brushMap = new BitmapData(radius*2, radius*2, true, 0);

Also, try changing the value of PixelSnapping. ALWAYS for PixelSnapping. NEVER , but I think you have already tried this.

Answer 6

Change the brush cacheAsBitmapto true.

brush.cacheAsBitmap = true;

the sprite will be stored in memory as a bitmap, not a vector, so when drawing it will more accurately display pixels.