I am trying to calculate the correct mouse coordinates, in user coordinate space, in an SVG document from within Javascript code when scrollbars come into existence when that SVG file is viewed from within FireFox. But it is not quite correct. This is needed to get SVG-based tooltips drawn correctly even when the SVG is scrolled horizontally or vertically.
I desire to have the coordinate transformations be correct across IE and Firefox browsers. Also, I want to do this with a single-source Javascript+SVG solution that hopefully does not require browser-specific conditional code. I am currently using FireFox 3.5.10, but I would consider upgrading to a more recent version of FireFox, and I have not tested IE yet.
The problem I ran into is the coordinate offsets for the scrollbars: The mouse coordinate transformation is not sufficient when scrollbars come into existence over the SVG element inside Firefox. As a debugging aid to figure out the coordinate transformations, I am working with a simple SVG file that contains Javascript handlers, all in one file, that simply draws crosshairs at the mouse cursor as SVG line objects. Find it posted at svg_cross_hairs.svg. If you load that file into FireFox and shorten the FireFox window down until scrollbars appear, and then scroll either the vertical or horizontal scrollbars, you will find that the crosshairs drawn by the Javascript are offset by the amount of either horizontal or vertical scrolling amount, which is not correct in order to draw a tooltip object on or near where the mouse cursor actually is.
I do see the Firefox: Get mouse coordinates of top-left corner of viewport question that talks about the scrollTop property.
msg#00056 clarifies that there is confusion of the meanings of element.{pageX,pageY,clientX,clientY} attributes and the element.getscreenCTM method.
Is there a cleaner way to arrive at the correct mouse coordinate, in the in user coordinate system?
You can use evt.pageX / evt.pageY or window.pageXOffset / window.pageYOffset to arrive at something that works even if the svg is scrolled.
Related
Consider this code example in d3 version 4.
There's a number of yellow circles overlaid on top of a black background.
I can drag the circles around with my mouse. I can also zoom in and out using the mousewheel, providing my mouse is not over a circle.
There's two problems that I'd like to fix:
I would like to zoom in when I hit the scroll wheel while I am moused over a circle.
Drag and drop is incorrect when I am zoomed in or out of the graph - the circles don't follow the mouse.
Solved it. Here's the link to the gist with the solution.
How I fixed each problem:
The zoom problem was fixed by making the zoom handler trigger on the underlying SVG element, not an overlaying rectangle like it was previously.
The drag problem was fixed by adjusting the drag function to take into account the current level of zooming
I am learning d3js and trying to incorporate zooming/panning features on a graph, however on the initial zoom event it jumps to a random spot and zooms in. After that, the zooming and panning work as expected. Why is the initial event moving the starting point and adjusting the scale oddly?
Code and example here: bl.ocks.org/dbaileychess/7570631
This is because the zoom behaviour is attached to a different element than the one you're zooming. It determines the position of the mouse cursor relative to its own position and passes that information to the callback. If you're zooming a different element, the relative coordinates are no longer correct.
To fix, add the offset between the elements that the zoom behaviour is attached to and the elements you're zooming to the translation. This question has come up a number of times already, see e.g. here.
Is there a way (API) of getting the size (vertical and horizontal) in pixels of the resize corners?
I am referring to the area at each of the corners of a window where you can resize the window in both directions (Left-to-Right and Top-to-Bottom) at the same time using your mouse. You will know you are there with your mouse cursor when you hover over the corners of the window and the mouse cursor is a Diagonal Resizing cursor.
Thank you
Edit:
An example: Hover your mouse over the right edge of a sizable window. Start in the middle (vertically) of the window and move the mouse up along the edge until the horizontal sizing cursor changes to a diagonal sizing cursor. How do I determine by asking the OS how far that position when the cursor changes, is from the top of the window.
I would suggest to use the size of the scrollbars. Call GetSystemMetrics with SM_CYHSCROLL and SM_CXVSCROLL. May be also SM_CYSIZEFRAME and SM_CXSIZEFRAME sizes can be combined.
But I think a better value is to use the height of the status bar. However even Microsoft Windows seems to use some fixed value as can seen on the screenshot.
Comparing the results of GetClientRect and GetWindowRect will tell you how wide the non-client (border) area is along each edge of the window.
If you're concerned that it might not all be active for sizing (true especially along the top), or you want to distinguish the diagonal sizing areas from edge sizing areas, you can take the coordinates discovered in step 1 and pass them to SendMessage(WM_NCHITTEST) See its documentation for the various return codes. There's no problem sending this message repeatedly -- it's designed to be called for each mouse move event and therefore is very fast.
Please have a look at this page:
http://www.abhi.my/lab/3D-menu.html
If you haven't already guessed, I'm trying to emulate the new iOS notification animation (that's where I first saw it), and obviously, my two paltry div's aren't behaving like a full box...
Any idea what I'm doing wrong here...?
This is what I'd like to get close to: http://www.youtube.com/watch?v=pBgVbzBJqDc
You are only transforming you elements in 2d space, even though you are going for a 3d effect.
A working example:
http://jsfiddle.net/mrlundis/wU296/
The "bottom" span is positioned behind the "front" span by using translate3d(x,y,z) where y and z correspond to half of the elements height (it's rotated around it center point.) It should be possible to achieve the same effect using -webkit-transform-origin.
-webkit-transform-origin is also used to make sure the containing div rotates around it's center point on hover.
This is a copy paste of a post i made on the processing forum (where i haven't got an answer so far) thought i might as well try here.
Processing is a very cool way to draw stuff, specially for the webpages. Just as a reference http://processing.org
Hey, i'm new to processing, i'm using it to make a flashless website, so i'm pretty much drawing on a canvas.
I'm having a problem with the mouse position, although the coordinates, when drawing, consider the top left corner to be position 0,0; the actual mouse coordinates consider the 0,0 to be the top left corner of the browser window.
So my problem is this, the canvas is operating on a centered web-page, whenever the browser changes size, so does the coordinates of the mouse within the canvas.
Is there any way to make the coordinates of the mouse relative to the canvas? So that i can change the size of my browser window and the top left corner will be always 0,0 for the mouse coordinates?
So that's the problem, i dunno how many ppl here in stackoverflow are experienced with this, but i hope someone could help me :)
thanks to the stack overflow community in advance.
I'm not familiar with processing, but can't you just calculate the difference between the top left corner of the browser window and the top left corner of the canvas?
i.e. (using jquery)
$(window).onresize = function() {
//offset return position realive to the document.
var offset = $('#canvas').offset();
window.canvasLeft = offset.left;
window.canvasTop = offset.top;
}
Then you can do something like:
relativeMouseLeftPosition = mouseLeftPosition() - window.canvasLeft;
You should replace #canvas with a css selector for your canvas area.
Also note that window is the global object, I use it here to deal with possible scope problems.
Processing really isn't intended for creating webpages.. It's worse than Flash for sites (processing sketches being Java applets - Java being less common, far more resource-intensive and slow to load..)
That said, there is processing.js, a Javascript port of Processing.
The snake example accesses the mouse. Since it is Javascript, and the canvas is a div, the coordinates should be a bit more sane than Java (which lives in it's own VM world), but I could be wrong..
You can ask the user to calibrate the system, before use. It's not fully an answer to the question, but a sollution to the problem.
Just draw a red dot in the center of the screen, top left and bottem right. Ask the user to click on them, and retrieve the coordinates. Then, you know where the corners of the screen are.