Let a line snap to the center of a point

Question

I'm making a touchscreen connect-the-dots game for my internship in AS3, here's a quick epitome of my game flow:

1. The user selects a level.
2. The image/coordinates from that level loads and the image gets added to the stage.
3. When the coordinates of the dots are loaded (XML), the dots get MovieClips (circlePoint) attached to them. All of these MovieClips have a unique value (circlePoint.id) and a MouseEvent.MOUSE_OVER listener which fires clickPoint(). The MovieClips get pushed in my pointContainer.
4. A straight line follows my mouse which starts at the first dot.
5. If my gameCounter variable is the same as the MovieClip's id, the line will snap to the dot and a new line will start following my mouse. Of course this new line starts at the last dot that has been touched.

All of this is working like a charm, but I'm facing one problem; if my mouse collides with the MovieClip, the line snaps at the current mouse position. That position is the corner of my circlePoint and I want it to be the center. So I decided to let the new line start at the center of the current dot. But the previous line is still at the corner of the circlePoint and the new one starts in the center, it doesn't look very nice. I was thinking of decreasing the size of my dots but the dots will get too small to touch, since it's a touchscreen game. This is what I've written so far:

private function setStartPoint():void{
    mouseLines.push(new Sprite);
    stage.addChild(mouseLines[mouseLines.length-1]);
    holderX = pointContainer.getChildAt(0).x;
    holderY = pointContainer.getChildAt(0).y;
    stage.removeEventListener(MouseEvent.CLICK, setStartPoint);
    stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseFollower);
    stage.addEventListener(MouseEvent.CLICK, clickPoint);
}

The setStartPoint() function is triggered when all the MovieClips are added to the stage.

private function clickPoint(e:MouseEvent):void{
    if(gameCounter == e.target.id){
        holderX = e.target.x;
        holderY = e.target.y;
        mouseLines[mouseLines.length-1].graphics.lineTo(holderX, holderY);
        stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseFollower);

        gameCounter++;
        mouseLines.push(new Sprite);
        stage.addChild(mouseLines[mouseLines.length-1]);
        stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseFollower);
    }
}

clickPoint() gets fired on MOUSE_OVER as stated above.

private function mouseFollower(e:MouseEvent):void{
    mouseLines[mouseLines.length-1].graphics.clear();
    mouseLines[mouseLines.length-1].graphics.lineStyle(5,0x0000FF);
    mouseLines[mouseLines.length-1].graphics.moveTo(holderX, holderY);
    mouseLines[mouseLines.length-1].graphics.lineTo(mouseX, mouseY);
    mouseLines[mouseLines.length-1].mouseEnabled = false;
}

The mouseFollower() function draws the line on MOUSE_MOVE. And mouseEnabled is, of course, set to false so it's not clickable.

Any help will be greatly appreciated.

Answer 1

I feel like what you are trying to do here is comparable to Drawing a freeform in a graphics program(such as Photoshop). Therefore I think you are making things to complicated for yourself. You could just have the center of the circles be vectors and subsequently draw a line between them. Then you could easily say something like.

private function mouseFollower(e:MouseEvent):void{
  if(e.Hittest){
    DrawLine(lastVector,curVector);
  }
}

(this is pseudo code so.)