AS3 用笔在线条内填充颜色

Question

我试图用 AS3 制作一个 flash 应用程序，我可以用不同颜色的钢笔工具画线，也可以用不同颜色填充图像上的形状，现在我已经学习了各种教程并实现了它，但是最后我遇到了两个问题，经过3天的努力也无法解决：

如何在使用钢笔工具形成的形状内填充颜色，说如果我用钢笔工具画一个粗圆然后我尝试填充它是绿色的，我怎样才能检测到我需要填充的 MovieClips。
当我在形状上画线然后尝试填充形状时，形状被填充，但线条仍然出现在形状的顶部填充颜色。

您可以通过访问 this link 更好地了解我取得的成就，单击钢笔符号和油漆桶符号以查看其工作原理。

下面是我的钢笔工具和填充颜色代码：

我画了一个精灵，添加了一张图片，然后使用属性检测颜色来绘制一条我选择的颜色线，然后用代码填充颜色，我将图像分成不同的部分 MovieClips 然后 make then 变成一个并检测鼠标是否在哪个剪辑上单击并用选定的颜色填充它。

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;


bucbut.addEventListener(MouseEvent.CLICK,nClick0PC);



/////////////pentool code --------
convertToBMD();
pbut.addEventListener(MouseEvent.CLICK,nClick0P);



function nClick0P(event:MouseEvent):void{

spBoard.addEventListener(MouseEvent.ROLL_OUT,boardOut);

spBoard.addEventListener(MouseEvent.MOUSE_MOVE,boardMove);

spBoard.addEventListener(MouseEvent.MOUSE_DOWN,boardDown);

spBoard.addEventListener(MouseEvent.MOUSE_UP,boardUp);


}
var spBoard:Sprite=new Sprite(); 

this.addChildAt(spBoard,0);
spBoard.x=20;

spBoard.y=100;
var owl2:owl;
owl2 = new owl();
owl2.name="owl1";
spBoard.addChildAt(owl2,0);
owl2.x=315;

owl2.y=180;


var shDrawing:MovieClip = new MovieClip();
//var shDrawing:Shape=new Shape();
spBoard.addChild(shDrawing);
//spBoard.addChildAt(shDrawing,1);
function nClick0PC(event:MouseEvent):void{

    owl2.addEventListener(MouseEvent.CLICK,on_owl_click);
}



var doDraw:Boolean=false;

var lineSize:Number=10;

var currentColor:Number;


spBoard.graphics.lineStyle(1,0x000000);

spBoard.graphics.beginFill(0xFFFFFF);

spBoard.graphics.drawRect(0,0,602,330);

spBoard.graphics.endFill();

spBoard.filters = [ new DropShadowFilter() ];







function boardOut(e:MouseEvent):void {

            doDraw=false;

    }


function boardDown(e:MouseEvent):void {

            doDraw=true;

            trace(activeColor);

            shDrawing.graphics.lineStyle(lineSize,activeColor);

            shDrawing.graphics.endFill(); 

            shDrawing.graphics.moveTo(shDrawing.mouseX,shDrawing.mouseY);



    }

function boardUp(e:MouseEvent):void {

            doDraw=false;

    }

function boardMove(e:MouseEvent):void {

            var curX:Number=shDrawing.mouseX;

            var curY:Number=shDrawing.mouseY;


            if(doDraw && checkCoords(curX,curY)){

                shDrawing.graphics.lineTo(curX,curY);

                e.updateAfterEvent();

            }

    }




    function checkCoords(a:Number,b:Number):Boolean {

    if(a>=605-lineSize/2 || a<=lineSize/2 || b>=311-lineSize/2 || b<=lineSize/2){

        return false;
    } 

    else {

        return true;
    }

}



/////////////---------------------color picker
colors.addEventListener(MouseEvent.MOUSE_UP, chooseColor);
var pixelValue:uint;
        var activeColor:uint = 0x000000;
        var ct:ColorTransform = new ColorTransform();
var colorsBmd:BitmapData;
        function convertToBMD():void
        {
            colorsBmd = new BitmapData(colors.width,colors.height);
            colorsBmd.draw(colors);
        }


        function chooseColor(e:MouseEvent):void
        {
            pixelValue = colorsBmd.getPixel(colors.mouseX,colors.mouseY);
            activeColor = pixelValue;//uint can be RGB!

            ct.color = activeColor;
            //shapeSize.transform.colorTransform = ct;
        }

        ////////////////////========================================Fill color



        function on_owl_click(e:MouseEvent):void {


            for (var i:int = 0; i < owl2.numChildren; i++) {


                if (owl2.getChildAt(i).hitTestPoint(mouseX,mouseY,true)) {




                    trace(owl2.getChildAt(i).name);
                                        owl2.getChildAt(i).transform.colorTransform= ct;

                }
            }
        }

Answer 1

我删除了你的很多代码并留下了这个：

convertToBMD();
colors.addEventListener(MouseEvent.MOUSE_UP, chooseColor);
var activeColor: uint = 0x000000;
var colorsBmd: BitmapData;
function convertToBMD(): void
{
    colorsBmd = new BitmapData(colors.width, colors.height);
    colorsBmd.draw(colors);
}
function chooseColor(e: MouseEvent): void
{
    var pixelValue:uint = colorsBmd.getPixel(colors.mouseX, colors.mouseY);
    activeColor = pixelValue; //uint can be RGB!
}

我还在舞台上删除了一个owl。下载我的 FLA 以查看更改。

接下来。我添加了两个 canvases.

var canvasData:BitmapData = new BitmapData(650, 437, false, 0xEFEFEF);
var canvas:Bitmap = new Bitmap(canvasData);
canvas.x = 0;
canvas.y = 102;
addChild(canvas);

var penCanvas:Shape = new Shape();
penCanvas.x = canvas.x;
penCanvas.y = canvas.y;

您可以阅读有关 Bitmap 和 BitmapData 的内容 here。首先 canvas 这是一张光栅图像。第二个canvas它是一个Shape，所以你可以用moveTo和lineTo方法用铅笔画。

接下来。在库中，我找到了一个 owl 图像并将其导出到代码中。如果不明白，我可以解释得更详细。

接下来。注册事件处理程序。

bucbut.addEventListener(MouseEvent.CLICK, clickBucket);
pbut.addEventListener(MouseEvent.CLICK, clickPen);

function clickBucket(event:MouseEvent):void
{
    stage.removeEventListener(MouseEvent.MOUSE_DOWN, canvasDown);
    stage.addEventListener(MouseEvent.CLICK, clickOnCanvas);
}

function clickPen(event:MouseEvent):void
{
    stage.addEventListener(MouseEvent.MOUSE_DOWN, canvasDown);
    stage.removeEventListener(MouseEvent.CLICK, clickOnCanvas);
}

让我们看看 clickOnCanvas 方法：

function clickOnCanvas(event:MouseEvent):void
{
    // If we click at the canvas
    if (canvas.hitTestPoint(mouseX,mouseY))
    {
        canvasData.floodFill(canvas.mouseX, canvas.mouseY,activeColor);
    }
}

关于 floodFill 你可以阅读 here。

最后三种方法都是用钢笔画的

function canvasDown(event:MouseEvent):void
{
    penCanvas.graphics.lineStyle(10, activeColor);
    penCanvas.graphics.moveTo(penCanvas.mouseX, penCanvas.mouseY);

    // only when mouse button is down we register two handlers, one for move and another for mouse up
    stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
    stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
}

function mouseMove(event:MouseEvent):void
{
    // when mouse is moving we are drawing line
    penCanvas.graphics.lineTo(penCanvas.mouseX, penCanvas.mouseY);
    // As I said earlier canvasData it's a raster image. So we copy penCanvas and paste to canvasData.
    canvasData.draw(penCanvas);

    // For a smoother drawing
    event.updateAfterEvent();
}

function mouseUp(event:MouseEvent):void
{
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
    stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUp);
}

就这些了！

Here 你可以下载资源。

AS3 用笔在线条内填充颜色

AS3 Fill Color inside line by pen

flash

actionscript-3