Highlighted

How to draw a line with finger and detect if it's in the area ?

Contributor ,
Jun 12, 2017

Copy link to clipboard

Copied

I've got an image on my AIR app where the user have to draw a line with his finger on it. The purpose is to draw the line somewhere quite precise.

So, to draw a line, here's what I did :

var drawingLine:MovieClip = new MovieClip();


addChildAt(drawingLine,0);

stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);

function MouseDown(event:MouseEvent):void{
drawingLine.graphics.lineStyle(3);
drawingLine.graphics.moveTo(mouseX, mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

function MouseMove(event:MouseEvent):void{
drawingLine.graphics.lineTo(mouseX, mouseY);
}

function MouseUp(event:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

So, now, how can I determine an area and check if the user has draw his lines in the area ? The line should be inside the area completely. If possible, of course.

I thought about using hitTestObject but I don't think that's the good way to do it.

TOPICS
Development

Views

197

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to draw a line with finger and detect if it's in the area ?

Contributor ,
Jun 12, 2017

Copy link to clipboard

Copied

I've got an image on my AIR app where the user have to draw a line with his finger on it. The purpose is to draw the line somewhere quite precise.

So, to draw a line, here's what I did :

var drawingLine:MovieClip = new MovieClip();


addChildAt(drawingLine,0);

stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);

function MouseDown(event:MouseEvent):void{
drawingLine.graphics.lineStyle(3);
drawingLine.graphics.moveTo(mouseX, mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

function MouseMove(event:MouseEvent):void{
drawingLine.graphics.lineTo(mouseX, mouseY);
}

function MouseUp(event:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

So, now, how can I determine an area and check if the user has draw his lines in the area ? The line should be inside the area completely. If possible, of course.

I thought about using hitTestObject but I don't think that's the good way to do it.

TOPICS
Development

Views

198

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 12, 2017 0
Adobe Community Professional ,
Jun 12, 2017

Copy link to clipboard

Copied

Read about getPixel() here:

BitmapData - Adobe ActionScript® 3 (AS3 ) API Reference

With that you would have a bitmapData copy (to make it simple have it be the size of the stage) of the maze, or whatever it is you're showing the user, and you could check the stage mouse location against the bitmapData. So, as the user moves around the stage you will know the color of the pixel under than location in the off-screen bitmapData image.

You will know in real time if they have stayed within the lines.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 12, 2017 0