与线型AS3画线，然后编辑与透明的（不可见）像素 [英] as3 draw line with LineStyle and then edit with transparent (invisible) pixels

问题描述

我有MC与外部加载图片（JPG格式）。

I have MC with external loaded image (jpg).

下一层是屏蔽雪碧我在哪里绘制不同的颜色，透明度等与graphics.lineStyle线。一切工作正常，这样我就可以看到图像和图纸上。现在我想橡皮擦制作，并试图做出某种（透明）线，这将擦除exising行。

Next layer is masked Sprite where I am drawing lines in different colors, opacity ,etc with graphics.lineStyle . Everything works fine, so I can see image and drawings over. Now I want eraser to make, and trying to make some kind of (transparent) line which will "erase" exising line.

如果我例如画（鼠标）红线，然后切换颜色为黄色，并在交叉使用previous线某一点上，这是确定的，我看到黄色。现在，我不知道如何使透明色？所以，当鼠标移动在现有的图纸，只是看到的背景图片再一部分。如果我设置一种颜色的背景万事OK了，但我的形象，结束橡皮擦留下一些颜色，我需要的是透明的。尝试混合模式，缓存为BMP，一切，我发现，但仍然没有解决。

If I for example draw (with mouse) red line, and then switch color to yellow and intersect on some point with previous line, it is ok, I see yellow color. Now I don't have idea how to make "transparent" color? So when mouse move over existing drawing, just see again part of background image. If I set one color background everything is OK, but I have image, end eraser leaves some color, and I need to be transparent. Tried blend modes, cached as bmp, everything I found but still no solution.

推荐答案

看似您使用覆盖在图像图形对象。为了抹去的东西，你应该给你的精灵，将有BlendMode.ERASE为混合模式最顶层的形状，并利用它的颜色阿尔法分量是0xFF的。精灵应该有blendMode为BlendMode.LAYER。这是一个测试一起玩：

Seemingly you use Graphics objects that overlay the image. In order to erase something, you should give your sprite a topmost shape that will have BlendMode.ERASE as blend mode, and draw on it with alpha component of color being 0xFF. The sprite should have its blendMode to be BlendMode.LAYER. Here's a test to play with:

public class TestErase extends Sprite 
{
    public function TestErase() {
        var b:Sprite = new Sprite();
        var c:Shape = new Shape();
        b.blendMode = BlendMode.LAYER;
        c.blendMode = flash.display.BlendMode.ERASE;
        c.graphics.beginFill(0, 1);
        c.graphics.drawRect(50, 50, 50, 50);
        c.graphics.endFill();
        b.graphics.beginFill(0xff0000, 1);
        b.graphics.drawRect(0, 0, 150, 150);
        b.graphics.endFill();
        b.addChild(c);
        addChild(b);
        this.graphics.beginFill(0x00c000, 1);
        graphics.drawRect(75, 75, 100, 100);
        graphics.endFill();

    }
}

这使得一个50×50孔，由B​​精灵C​​精灵定义，不影响这个精灵说。

This makes a 50x50 hole, defined by "c" sprite in "b" sprite, that does not affect "this" sprite.

好了，你问一个例子。在这里。

Okay you asked for an example. Here.

public class Main extends Sprite 
{
    public var sh:Shape;
    public var drawing:Boolean;
    public var sp:Sprite;
    public var bd:BitmapData;
    public var erasing:Boolean;
    [Embed(source = '../lib/093.jpg')]
    public static const Background:Class;

    public function Main():void 
    {
        if (stage) init();
        else addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(e:Event = null):void 
    {
        removeEventListener(Event.ADDED_TO_STAGE, init);
        // entry point
        var ba:Bitmap = new Background();
        ba.scaleX = 0.5;
        ba.scaleY = 0.5;
        addChild(ba);
        bd = new BitmapData(640, 400, true, 0);
        var bm:Bitmap = new Bitmap(bd);
        sp = new Sprite();
        sp.addChild(bm);
        sp.blendMode = BlendMode.LAYER;
        var tf:TextField = new TextField();
        tf.y = 401;
        tf.background = true;
        tf.backgroundColor = 0x0;
        tf.defaultTextFormat = new TextFormat('Arial', 12, 0xe00000, true, false, false);
        tf.selectable = false;
        tf.text = 'Erase';
        addChild(tf);
        addChild(sp);
        tf.addEventListener(MouseEvent.CLICK, toggleErasing);
        sp.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
        sp.addEventListener(MouseEvent.ROLL_OUT, endDrawing);
        sp.addEventListener(MouseEvent.MOUSE_UP, endDrawing);
    }

    private function toggleErasing(e:MouseEvent):void {
        erasing = !erasing;
        if (erasing) (e.currentTarget as TextField).text = 'Erasing...'; else (e.currentTarget as TextField).text = 'Erase';
        e.stopPropagation();
    }
    private function startDrawing(e:MouseEvent):void {
        if (drawing) return;
        sh = new Shape();
        sh.graphics.lineStyle(3, Math.floor(Math.random() * 0x100000), 1,true);
        if (erasing) sh.blendMode = BlendMode.ERASE;
        sh.graphics.moveTo(e.localX, e.localY);
        addEventListener(MouseEvent.MOUSE_MOVE, trackMouse);
        sp.addChild(sh);
        drawing = true;
    }
    private function endDrawing(e:MouseEvent):void {
        if (!drawing) return;
        removeEventListener(MouseEvent.MOUSE_MOVE, trackMouse);
        if (erasing) bd.draw(sh, null, null, BlendMode.ERASE); 
        else  bd.draw(sh);
        sp.removeChild(sh);
        sh = null;
        drawing = false;
    }
    private function trackMouse(e:MouseEvent):void {
        sh.graphics.lineTo(e.localX, e.localY);
    }

}

测试过我，应该原样，只是改变了背景：）

Tested by me, and should work as is, just change the background :)

这篇关于与线型AS3画线，然后编辑与透明的（不可见）像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！