![]() MouseEvent.layerX Read only Returns the horizontal coordinate of the event relative to the current layer. You can get the users mouse coordinates in three distinct ways in JavaScript: Relative to the browser window. MouseEvent.ctrlKey Read only Returns true if the control key was down when the mouse event was fired. What we want to do is figure out the exact click position when youĬlick anywhere inside the yellow container:įirst, we have the event listener setup to listen for aĬlick event: yellowContainer. The Y coordinate of the mouse pointer in local (DOM content) coordinates. In that thread, let's start by looking at a seeminglyįine approach that seems like it should give us the exact position of Pointing thing! A Worthy (But Incomplete) AttemptĪ great way to learn is by understanding why something doesn't work The Y coordinate of the mouse pointer in local (DOM content) coordinates. Here works on a touch device where a stylus or your finger is the The X coordinate of the mouse pointer in local (DOM content) coordinates. "mouse" and "click" will appear often, just know that everything I show In this tutorial, I will explain the magic behind figuring out theĮxact pixel coordinates of where a click occurred. Something you may find yourself needing to do is figuringĪn example where knowing the exact click position isĬlick anywhere inside the gray box to see the red circle move to the Mouse (or another pointing device like a stylus or finger). I looked at Raycasting but I’m not entirely sure if that is the path I should follow.For all sorts of interactive doo-dads you will beĬreating, chances are you will be making heavy use of the If you use event.target and hover your mouse over div2, you will get relative coordinates regarding div2 while you might want them to be regarding div0. This means: Start at the upper-left corner (0,0) and draw a 150x75 pixels rectangle. I’m not focusing on mouse events against children in the scene (a new design would have no children anyway), only the (theoretical infinite +X and -Y) coordinates in the scene where the mouse is hovering/clicked. I have tried several different examples to get the +X and -Y position of the mouse (with respect to the origin of the scene) as 3D coordinates and not 2D DOM coordinates since some design elements would have a position X,Y (CSS top,left) greater than the current view-port of the device they were on. This way my end users would not have to re-learn or re-design their projects that were based on the 0,0 index always being in the top-left, rather than the center. Then I would just multiply the -Y by -1 to get a +Y and divide +X and +Y by 12 and floor each to get the corresponding cell index as if it were still an HTML table. Currently, it does these things: Creates (undefined) variables for the X and Y coordinates of the mouse. My goal is to confine designs to the 4th quadrant (+X,-Y). The “table” is drawn as a series of THREE.Lines spaced 12 points apart from one another. ![]() The user would be shown the current “cell ” for reference. ![]() ![]() In picture below, the camera and orbit controls are shifted so that the origin (0,0,0 ) is in the top-left (DOM style), rather than the center. Some designs have hundreds, if not a thousand individual 12x12 pixel elements all being rendered at the same time. In the other application that used these designs, the table was not rendered which helped increase performance but still took its toll on mobile devices when the designs became very large (sometimes extending folds beyond the view-port). The table was only used for position referencing. I’m re-writing an existing application where a user would click cells in an HTML table and place predefined design items in them and then save that design to be used in another application. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |