Same as the question:
I need to drag a component along a programmatically drawn path composed by different kinds of graphic, like lines, curves, etc.
I've already googled it, but with no success.
Any ideas? thanks!
The following is say for a linearly curved path drawn by you. You can use similar method for any direction.
Add an Event listener for click.
(That starts drag)
Track the user's mouse along x
direction for example.
Keep plotting the component's x & y as
Mouse x changes with respect to the
drawn path's x.
Stop relocating as user leaves the
mouse
Start with this if possible & be back with code if you get doubts.
If your drawing part is complete then You can use two dimensional ByteArray. The size of the ByteArray will be the size of your stage, this two-dimensional array will be set to zero, means all your stage locations are set to zero. When any curve or line is drawn , set those locations to one. Now you know at-least where your object can move, the valid locations are those which are set to one.
Now the second the part is how to move an object on the valid path or location using mouse or keyboard.
You will be using Event.EnterFrame for smooth and fast movement of the object,
1--using keyboard.
use up key to move object to upper location if that position or location is set to one else the object will not move Up, same for others.
2-- using mouse move event, detect MouseY position for moving UP or DOWN w.r.t current position of MouseY , and move it respectively if location is set to one.
Hope, this will guide you in right direction...
Will this work? http://www.pixeldigest.com/followthepath.html
Related
I would like to get the touch screen drawing position (x and y) and direction (moving up or down or left or ....), then I will compare it with some stored positions and directions for characters (as we are trying to teach character writing). Isn't there any known library or helping things for this?
Thanks in advance
Every DisplayObject has the properties mouseX and mouseY, that indicate the mouse position with respect to its origin.
To get the direction, save the values of both properties and compare them to the next ones. Say for example within the handler of a MouseEvent.MOUSE_MOVE Event.
I'm trying to write a simple flash game like Space Invaders. When the ship shoots I check if bullet hits the enemy with simple if like below:
if (bullet.hitTestObject(enemy)) {
var explosion = new Explosion(enemy.x, enemy.y);
stage.addChild(explosion);
explosions.push(explosion);
//Rest of logic like removing bullet and enemy from stage
}
What I expected to see was an Explosion instance appearing somewhere around the coords where bullet hit the enemy and that it would stay in place. Instead explosion seems to be appearing completely elsewhere and is moving in the same direction the enemy was (opposite direction to bullet). It seems that my assumption about successfully getting coordinates in a way presented above isn't right. Is there any other way to get it at least approximately? It doesn't have to be pixel-perfect, but I don't want explosion to appear on the other side of the stage.
Thanks for any suggestions.
It's not about getting the coordinates but having in mind where your children are added.
If the container is moved around, and you add the explosion to other container, the coordinates will mess up - each object has an internal coordinate system starting from 0,0.
Best advise would be to manually understand where's the difference and where are your children added. Common way to fix this is to add all your children at 0,0. This will give you full control and nevertheless an idea of how Flash works.
If you are unable to do so, you can always use globalToLocal and localToGlobal methods that will help you convert those coordinates to a global (Stage) ones, and vise versa.
I'm writing a painting application with canvas in HTML5.
I've finished my pencil painting with touching and drawing.
And now i'm trying to make a rectangle. For all the topic i've read, i will have to store all of my finished shape in an array, but if i do that, i will also have to store all the point with normal drawing so that i could draw a rectangle like windows painting.
Please give me another solution to draw rectangle like windows, which old rectangle will be dissappeared and new one will replace before i make a "mouse up".
thanks in advance :)
You will either need to save the previous drawings or use 2 canvases.
If you want to save the previous drawings...
In mousedown:
Save the mouse position (startX/startY).
Set a flag indicating that a drag has started (isDown=true)
In mousemove:
if isDown==false, don't do anything (return)
otherwise, clear the canvas
redraw all your previous drawings (from your saved points array, etc)
draw the current rect from the start to mouse position -- context.strokeRect(startX,startY,mouseX-startX,mouseY-startY)
In mouseup:
clear the drag flag (isDown=false)
If you want to use 2 canvases...
As an alternative to storing every previous drawing, you can use 2 canvases. One canvas is used to draw the current rectangle and a second canvas to keep all the previously draw items Here's an example using 2 canvases so you don't have to store previous drawings: jsfiddle.net/m1erickson/V9J5J/
I asked to draw line between objects in stage (e.g points) on mouse click over 2 of these objects
example : if I want to write 'A' i need to set 5 point and connect them by clicking all these points like:
*
* *
* *
This question isn't very specific. Which part are you having problems with? The Graphics object provides methods for drawing lines. It's very easy to draw between points with drawTo(...)
For a quick intro see: http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7dd9.html
First, you have to detect the user's mouse click and convert that into some sort of form of data that you can use to draw a line with.
Use the MouseEvent class and EventListeners to detect a user's mouse click. If you don't know how to use event listeners, refer to here.
The dispatched MouseEvent object has a stageX and stageY property which refers to the X and Y coordinates of where the mouse click occurred. These two pieces of data can be used to create a Point object. Instantiate and store this point object somewhere convenient - so that when you have more than 2 of them, you can then refer to AndySavage's answer on how to draw a line with those two Point objects.
Basically, you want to create a Point object every time a mouse click occurs, and then check internally the amount of Point objects you have. If you have one, don't do anything, because you need two points to draw a line. If you have more than one, then use the two latest Point objects you obtained to draw a line.
Tip:
If you store the points into a vector, then every time a mouse click occurs, you can push a Point object inside. Then, check the length of that vector, and if it is greater than 1, you can access the last two elements by using the it's length - 1 and length - 2 as indices.
You can read the documentation on the Vector and Point classes by searching on google. (Type something like "as3 api Vector") I'd add links but I can only add less than two per post right now.
I am doing some math projects that require a lot of vector line art--that is a line drawn between to points with a circle at the start point and an arrow at the end point. A call to Math.atan2() keeps the arrow aligned. I call this class DrawVectorLineArt() and it creates instances of 2 other custom classes DrawArrow() and DrawCircle().
So far so good--DrawVectorLineArt() draws just what I need. Now I need to animate the vector art.
So in a function onEnterFrame I want to update the postion of arrow and circle, the objects created by DrawArrow() and DrawCircle(), respectively. I also need to clear and redraw the line drawn between them. At this point I am not sure how to proceed in an OOP framework. Do I need to create methods of my custorm class DrawVectorLineArt() to update the position of arrow and circle and subsequently clear and redraw the connecting line?
Any advice or links appreciated. Thanks!
"Do I need to create methods of my custorm class DrawVectorLineArt() to update the position of arrow and circle and subsequently clear and redraw the connecting line?"
Yes.
The arrow and the circle are very members of DrawVectorLineArt, and going by its name and choice of members, so should the line (if it's implemented through actual data). DrawVectorLineArt should contain and implement the whole animation between the circle, arrow, and line. As such, if the animation's supposed to be able to change after creation, the same instance of DrawVectorLineArt should be able to take any two legitimate points supplied to it (or that it becomes aware of internally, depending on what you're doing), reposition the three components, and turn the arrow and line appropriately, within its own code.