WDTM: event.stageX - circle.x

[smallDot]

WDTM: What Does This Mean, i do not want to write long title :look:

i tried to understand the following code. it is drag and drop target.
below, i did not understand these lines:


offsetX = event.stageX - circle.x;
offsetY = event.stageY - circle.y;

what i figured out is the var offsetX store the stageX coordinate. but why there is " - circle.x". i deleted the " - circle.x", i noticed that the circle jump when i drag to position itself in center of my mouse.

//complete code

var offsetX:Number;
var offsetY:Number;

circle.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
circle.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

function startDragging(event:MouseEvent):void {
offsetX = event.stageX - circle.x;
offsetY = event.stageY - circle.y;
stage.addEventListener(MouseEvent.MOUSE_MOVE, dragCircle);
}

function stopDragging(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragCircle);
}
function dragCircle(event:MouseEvent):void {
circle.x = event.stageX - offsetX;
circle.y = event.stageY - offsetY;
event.updateAfterEvent();
}

[scottc]

Imagine you have 2 points on the screen.

Point 1 ( 60 , 60 )

Point 2 ( 100 , 100 )

The offset is the difference between point 2 and point 1.

Point 2 - Point 1 = Point offset ( 40 , 40 )

Please note, that becuase it's the "offset", it's pretty generic so it could be the offset from one point to another, or in the reverse order.

For example the offset from point 1 to point 2 would be ( -40 , -40 ).

The offset is often used in many geometry based calculations. [such as in a vector (en.wikipedia.org/wiki/Euclidean_vector) (defined by direction and magnitude, could also be defined as a point + a offset), vectors are used in most games regardless if your aware of it or not.]

[smallDot]

Hi scottc

ok, i think i got the point
offset: is the distance between two points

if so, this line:

offsetX = event.stageX - circle.c

if this code detrmine the distance, who this can be, there is no defined X for stageX

[scottc]

I can see why you are confused by the offset, i cannot make any sense of why the author has used it also, when the following should work...

function dragCircle(event:MouseEvent):void {
circle.x = event.stageX;// - offsetX;
circle.y = event.stageY;// - offsetY;
if this code detrmine the distance, who this can be, there is no defined X for stageX

function startDragging(event:MouseEvent):void {
offsetX = event.stageX - circle.x;
trace(event.stageX); // is this undefined?
It's undefined?

If your trying to get the mouse position you can use mouseX and mouseY, although event.stageX should work also.

offset: is the distance between two points
Somewhat... Yes and no, it would be the distance on one dimension but with 2 separate numbers... so you can get negative numbers, and if the points are not exactly 45 degrees from each other.

To get the "real" distance, the formula is as follows:

Math.sqrt(offset.x*offset.x + offset.y*offset.y);