as3 draw with mouse and erase lines when hitTestOb

问题:

I am trying to create a simple hitTestObject and see the lines that are being drawing on screen hit with a Ball. If it does it will erase all lines and start fresh. I am very close. The checkIt() function is where the code needs to happen and its clearing the lines but not making a new shape.

How can I erase the lines the mouse drew and start fresh when a hit test is reached?

var myshape:Shape;


myshape = new Shape();
myshape.graphics.lineStyle(12, 0xC807DE);
var alreadyDrawn:Shape;
alreadyDrawn = new Shape();

stage.addEventListener(MouseEvent.MOUSE_DOWN, activateDraw);
function activateDraw(event:MouseEvent):void
{
    myshape.graphics.moveTo(mouseX,mouseY);
    addChild(myshape);

    stage.addEventListener(MouseEvent.MOUSE_MOVE, lineDraw);
    function lineDraw(myevent:MouseEvent):void
    {
        stage.addEventListener(MouseEvent.MOUSE_UP, stopDraw);
        function stopDraw(endevent:MouseEvent):void
        {
            alreadyDrawn = myshape;
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, lineDraw);

        }


        myshape.graphics.lineTo(mouseX,mouseY);
        myevent.updateAfterEvent();
        checkIt();
    }


}

function checkIt()
{
    if (alreadyDrawn.hitTestObject(Ball) == true)
    {
        trace("Hit The Balls");
        myshape.graphics.clear();
        myshape.graphics.lineStyle(12, 0xC807DE);


    }

}

回答1:

You actually have ONE shape instead of two, because once you do alreadyDrawn=myshape you lose whatever object you attached there. You should instead do alreadyDrawn.graphics.copyFrom(myshape.graphics); this will copy all the strokes from argument to object without losing the other instance.

Next, you seemingly need to also stop drawing if you've detected a hit vs alreadyDrawn, for this, call stopDraw(null); from checkIt().

And next, you are not clearing all the listeners off stage while adding more and more. See, if you draw several lines in quick succession (press-drag-release), the stopDraw listener is added multiple times and not removed even once. To do this, use removeEventListener(MouseEvent.MOUSE_UP, stopDraw); inside stopDraw function and move the adding line into activateDraw, because there are multiple "mouse move" events while you drag the mouse, and another listener is added each time you process the event.

And finally, PLEASE don't nest functions without actual need!

The fixed code should be this:

var myshape:Shape;
myshape = new Shape();
myshape.graphics.lineStyle(12, 0xC807DE);
var alreadyDrawn:Shape;
alreadyDrawn = new Shape();

stage.addEventListener(MouseEvent.MOUSE_DOWN, activateDraw);
function activateDraw(event:MouseEvent):void
{
    myshape.graphics.moveTo(mouseX,mouseY);
    addChild(myshape);

    stage.addEventListener(MouseEvent.MOUSE_MOVE, lineDraw);
    stage.addEventListener(MouseEvent.MOUSE_UP, stopDraw);
}

function lineDraw(event:MouseEvent):void
{
    myshape.graphics.lineTo(mouseX,mouseY);
    event.updateAfterEvent();
    checkIt();
}
function stopDraw(event:MouseEvent):void
{
    alreadyDrawn.graphics.copyFrom(myshape.graphics);
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, lineDraw);
    stage.removeEventListener(MouseEvent.MOUSE_UP, stopDraw);
}

function checkIt()
{
    if (alreadyDrawn.hitTestObject(Ball) == true)
    {
        trace("Hit The Balls");
        myshape.graphics.clear();
        myshape.graphics.lineStyle(12, 0xC807DE);
        alreadyDrawn.graphics.clear(); // clear this too
        stopDraw(null); // stop active draw, if any
    }
}

copyFrom() manual reference

回答2:

Interesting question~

I think the problem may be you forgot to moveTo after clear.

Here is my fix:

Pass mouseX, mouseY to checkIt.

checkIt( mouseX, mouseY );

function checkIt( mouseX:Number, mouseY:Number ):void
{
    if (alreadyDrawn.hitTestObject(Ball))//you don't need == true here
    {
        trace("Hit The Balls");
        myshape.graphics.clear();
        myshape.graphics.lineStyle(12, 0xC807DE);
        myshape.graphics.moveTo(mouseX,mouseY);
    }
}