Question

我试图用AS3制作一个flash应用程序，我可以用不同颜色的笔工具绘制线条，也用不同颜色的图像填充形状，现在我已经通过各种教程并实现了它，但是在结束我面临着两个问题，即使经过3天的努力，我也无法解决这个问题：

如何在使用钢笔工具形成的形状内填充颜色，如果我使用钢笔工具绘制一个粗糙的圆圈然后我尝试填充它是绿色的，如何检测我需要填充的MovieClip。
当我在形状上画线，然后尝试填充形状时，形状被填充但线条仍然出现在形状的顶部充满了色彩。

通过访问this link，您可以更好地了解我取得的成就，点击笔符号并绘制桶符号以查看其工作原理。

以下是笔工具和填充色的代码：

我画一个精灵添加一个图像然后使用该属性来检测颜色以绘制我选择的颜色线，然后使用代码填充颜色，我将图像分成各种MovieClip s然后再制作一个并检测是否在哪个剪辑上单击鼠标并用选定的颜色填充它。

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!
}

我也在舞台上移走了一只猫头鹰。下载我的FLA以查看更改。

下一步。我添加了两幅画布。

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的信息。第一个画布它是一个光栅图像。第二个画布它是一个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用笔填充颜色

1 个答案: