I am dealing with event handlers, and getting the start and end position of a mouse.
That way i can create a selection box.
I start by on mousedown, i store the current position: new Point(event.target.clientLeft, event.target.clientTop); which seems to work for that location when i set the selection div accordingly.
The next step is where everything seems wrong. While in the mousemove event, I am trying to get the coordinates of the mouse do i can use the difference to define the Height and Width of the bounding box. It seems that everything is off by the coordinates of the web component i had created.
How should I go about this?
I have been dabbling with the event more, trying to get the position of the mouse, but i think what happens is that my start point is in reference to the webcomponent I created, and not the absolute position.
Has anyone else figured out how to do this correctly, because I have been setting things as absolute, but not correctly rendering.
As a side note, if i could subtract the absolute position of the webcomponent this is in, i think it should render the height and width correctly.
You might have an easier time using global position information rather than target-relative position. You can get the global position point from a MouseEvent directly with event.screen.
since a PolymerElement will use HtmlElements, you will have access to a full suite of functions built into the application. For example:
var top = selectedHtml.getBoundingClientRect().top - getBoundingClientRect().top + selectedHtml.clientHeight;
var left = selectedHtml.getBoundingClientRect().left - getBoundingClientRect().left + selectedHtml.clientWidth;
Point coord = new Point(left,top);
then you can just determine the distance from that point to get your width/height:
var top = selectedHtml.getBoundingClientRect().top - getBoundingClientRect().top + selectedHtml.clientHeight;
var left = selectedHtml.getBoundingClientRect().left - getBoundingClientRect().left + selectedHtml.clientWidth;
var h = top - coord.y;
var w = left - coord.x;
and then apply it to your Div.
_item.style.top = top;
_item.style.left = left;
_item.style.width = w;
_item.style.height = h;
Related
I'm using the Drag Source and Drag Target features from https://vaadin.com/docs/latest/create-ui/dnd (Vaadin 23).
I want to realize a moving operation on a map. This means I got points on a map (as custom Vaadin components) and ...
when dragging them the source position should be hidden (this could be done via point.addDragStartListener(...); as far as I can see)
when dropping them I need to know the drop position relative to the map as x/y coordinates (e.g. clientX and clientY).
As result, the component should be moved from the dragging start position to the drop position. It's parent div has the style attribute position: relative; and the component itself has an absolute position with top and left coordinates in px, e.g.: position: absolute; top: 183px; left: 254px;. With the drop event I have to update the top and left values in the css styling and therefore I need the coordinates of the drop position.
I can't see a suitable method in dropTarget.addDropListener(...); to get the coordinates. Do you have any hint / code samples for me? Thanks!
I found a solution:
dropTarget.getElement().addEventListener("drop", this::onDrop)
.addEventData("event.offsetX")
.addEventData("event.offsetY");
And an apropriate method onDrop:
private void onDrop(DomEvent event) {
JsonObject eventData = event.getEventData();
double x = eventData.getNumber("event.offsetX");
double y = eventData.getNumber("event.offsetY");
[do some stuff...]
}
Every tutorial, sample or blog I have read show various ways to track a moving object in a frame, as long as it is moving. This has become ubiquitous.
What I have been trying to figure out is how to determine if the object stopped moving or actually left the frame. When using background separation, when an object stops moving it becomes part of the foreground and as such "disappears". It "reappears" when it moves again. As far as I can tell the same behavior exists when an object leaves the frame, it just "disappears". For example the following code fragment demonstrates this:
**BackgroundSubtractorMOG2 _fgDetector = new BackgroundSubtractorMOG2();
CvBlobDetector _blobDetector = new CvBlobDetector();
CvTracks _tracker = new CvTracks();
CvBlobs _blobs = new CvBlobs();**
private int FindAndTrack()
{
CvInvoke.GaussianBlur(_analyzeMat, _smoothedFrame, new System.Drawing.Size(3, 3), 1);
#region use the BG/FG detector to find the forground mask
_fgDetector.Apply(_smoothedFrame, _foregroundMask);
#endregion use the BG/FG detector to find the forground mask
_blobDetector.Detect(_foregroundMask.ToImage<Gray, byte>(), _blobs);
_blobs.FilterByArea(_minimumAreaValue, int.MaxValue);
_tracker.Update(_blobs, 0.01 * _scaleValue, 1, 5);
return _tracker.Count;
}
I am no longer sure that background separation may be the answer.
What would give a definitive indication of a object leaving the frame?
Thanks,
Doug
Place tracker.update as condition for if loop if condition fails your object of interest has left the frame.
If you want to detect if object has moved or not then compare x & y values of bounding box of object with previous x & y values of bounding box if values are same than object has stopped moving else it has moved
What am I trying to achieve?
I have a Sprite which is supposed to move with the mouse position (kinda like a cursor). In my case though I also have some other Textures (Obstacle-class). So if the mouse collides with such an obstacle I want the texture to stop moving in that direction.
What is the problem?
While the texture does follow the mouse and also does stop when the mouse "collides" with an obstacle, at some point the cursor is not within the Bounding Rectangle anymore, but on the other side of a wall for example. The consequence, the texture's position is updated to the mouse position and it suddenly appears behind the wall which is not a desired behavior.
My collision method.
private void CheckCollision(List<Obstacle> _obstacleList, MouseState mState)
{
int xOffset = oldMouseState.X - mState.X;
int yOffset = oldMouseState.Y - mState.Y;
Vector2 offsetPosition = new Vector2(oldMouseState.X + xOffset,oldMouseState.Y + yOffset);
bool collides = false;
foreach (Obstacle obstacle in _obstacleList)
{
if (obstacle.BoundRectangle.Contains(offsetPosition))
{
collides = true;
}
}
if (!collides)
{
position = offsetPosition;
}
}
Question
What be a way to prevent the sprite to move through walls in my case?
Thanks in advance.
As you know, you can read the the mouse position by calling Mouse.GetState(). But you can also set the mouse position to whatever you want through Mouse.SetPosition(X,Y) and the mouse will go there.
So, if you are up against, say, an X barrier (vertical barrier), simply call
Mouse.SetPosition(oldMouseState.X, mState.Y);
and your mouse will not change its X value even if pushing your mouse in that direction, it will not go through the wall at all but it is allowed to go up and down just fine.
If you back off from the wall, simply don't call this line and it will operate like befor.
You could store the last (valid) known position of the mouse and the current position of the mouse (valid means the mouse isn't in a rectangle where it shouldn't be). When you hit a rectangle that the mouse shouldn't pass through with your current mouse position, you iterate back to the last valid position in a while loop and check if the mouse is still in the blocking sprite every time you moved the mouse closer to the valid position. If the mouse is outside the forbidden zone, you just exit the while loop and the mouse is quite close to the border of the obstacle.
How do I make a RTS camera so that when the mouse is at the edge of the window, it will move either left/right/up/down. I been trying to create an invisible box at the side of the screen so that when the mouse is at the box it will move the camera, but it still doesn't work. Please help!
Building upon what #Davor Mlinaric said, using the mouses x and y coordinates (which can be gotten from Mouse.GetState()), and testing whether those coordinates come in contact with the top, bottom and sides of the screen.
It would be a good start to set where those boxes will be something along the lines of:
GraphicsDevice.Viewport.Width/Height -/+ offset
Where offset is the amount of distance from the top,bottom or side.
Then test where the mouse position is, with a boolean.
boolean inTheZone = false;
//Bottom Box
if(Mouse.GetState().Y > GraphicsDevice.Viewport.Height - offset)
{
//Move camera in the y axis downwards (+).
inTheZone = true;
}
else
{
inTheZone = false;
}
and then the same for the 4 remaining sides.
Notice ive also used Y here, depending on how you set up the camera this may change to Z.
I hope this helps
I'm learning Corona SDK and am new to lua as well (i mainly do ruby and some javascript).
I have a bar that i want to fill up as the user does stuff. I've set it up as follows:
--outer rectangle
powerBar = display.newRect(210, 6, 24, 9)
powerBar.strokeWidth = 1
powerBar:setStrokeColor(254,203,50)
powerBar:setFillColor(0,0,0,0)
--inner rectangle which fills up
powerBarFill = display.newRect(211,7,0,7)
powerBarFill:setFillColor(234,183,30)
When the "stuff" happens, i add 1 to powerBarFill.width, which i thought would make it grow from left to right. But, it's actually growing out from the centre, ie its x is in the centre and the width extends either side from that.
Whats the best way to keep the left side static and grow the right side? Can i set it so that it's x position is actually on the left hand side rather than in the middle? Seems like that might do it.
cheers in advance
I've run into this problem as well when creating a progress bar. The problem is with the rect's reference point. The default reference point is in the center of an object, as you've noticed. You can use object:setReferencePoint() to change it. I believe you want to use the display.BottomLeftReferencePoint value:
powerBar:setReferencePoint(display.BottomLeftReferencePoint)
Keep in mind that you have to set this value before you set your x,y values. So in your case you'll need to set the reference point after creating the rectangle, and then assign values to x,y again (even though you already did this in the newRect constructor):
powerBar = display.newRect(210, 6, 24, 9)
powerBar:setReferencePoint(display.BottomLeftReferencePoint)
powerBar.x, powerBar.y = 210, 6
If it's width is from the X position on both sides:
1) It should start at:
Centre - (Width when it's full / 2)
2) Every frame, add:
incrs = 1 --Amount to increase by
width = width + incrs
x = x + incrs / 2