Online fills

[Danke]

I saw this flash game from Orisinal where you caught cute flies by drawing a grid around the flies with same colour. The they grew larger.

My question:

1: How do you draw and fill a shape at runtime

2: How do you check what's inside the shapes boundaries ?

Any tutorials for such a thing out there ?

[lunatic]

This is a little thick but very very good. It will answer question 1.click here (http://proto.layer51.com/d.aspx?f=952)

Don't know about question 2 . . .

:hr:

[pom]

2. hitTest? :sure:

[Danke]

Can't get it to work properly:

Here is what I'm thinking about: http://www.ferryhalim.com/orisinal/g3/floats.htm

Is it possible, following the Drawing API tutorial to make a drawing board, to fill the shape after it's drawn, and only fill it if it's a complete shape ?

[Danke]

*bump*

no one who can sort this out ?

[pom]

Store all the positions in an array. If you move the mouse next to an already visited position then your shape is filled.

[Danke]

One thing with your suggestion Ilyas, it seems that the array picks only start and end position coordinates for each drawing. In other words, it will be hard hitting just the right pixel.

It's not accurate enough. Any possibility to calculate which point each lineTo passes through, and then send them into the array ?

[Danke]

This is as far as i got. But the array is far away close enough to determine the cross point.



// 1. SETTING THINGS
_root.createEmptyMovieClip("line",1);

// 2. EVENTS IN _ROOT:
_root.onMouseDown = function(){
line.moveTo(_xmouse,_ymouse);
line.lineStyle(2,0x000000,100);
a = new Array();
i = 0;

this.onMouseMove = function(){
a[i] = _xmouse + ":" + _ymouse;
i +=1;
line.lineTo(_xmouse,_ymouse);
trace(_xmouse + ":" + _ymouse);
updateAfterEvent();
}
}
_root.onMouseUp = function(){
this.onMouseMove = null;
trace("Array content" + a);
}


I've noticed that if you draw, and use beginFill & endFill, if the shape is not closed, it's automatically done by the fill, but the fill ends up on the outside of the shape, any idea if this is a clue ?

[pom]

Store all the positions in an array. If you move the mouse next to an already visited position then your shape is filled.OK, here is what I meant. I wrote the code off the top of my head, so it's probably/definitely bugged, and I'm only checking the first point of the array:
function isNextTo (x1, y1, x2, y2, minDist) {
var dx = x1 - x2 ;
var dy = y1 - y2 ;
return Math.sqrt (dx*dx + dy*dy) < minDist ;
} ;

this.createEmptyMovieClip("line",1);

this.onMouseDown = function(){
line.clear () ;
line.moveTo(_xmouse,_ymouse);
line.lineStyle(2,0x000000,100);
a = new Array();
i = 0;

this.onMouseMove = function(){
a.push ({x:_xmouse, y:_ymouse});
i++ ;
line.lineTo(_xmouse,_ymouse);
trace(_xmouse + ":" + _ymouse);
updateAfterEvent();
if (i > 10) {
if (isNextTo (_xmouse, _ymouse, a[0].x, a[0].y, 10)) {
delete this.onMouseMove ;
line.clear () ;
line.beginFill (0xabcdef, 50) ;
line.moveTo (a[0].x, a[0].y) ;
for (var e in a) {
line.lineTo (a[e].x, a[e].y) ;
}
line.endFill () ;
}
}
} ;
} ;
this.onMouseUp = function(){
this.onMouseMove = null;
trace("Array content" + a);
} ;