I'm trying to get a hover effect for displaying information against points on a line chart using gRaphael. I've got a basic version working here http://www.matthewhollings.co.uk/svg/raphael-line-test.html but there seems to be an offset against the point that the hover responds to when two lines are close together. Does anyone know how I can fix this so that each point responds when the mouse pointer is closest?
Also, I'm trying to make the line chart look more like the one on the raphael website, where the hover flag contains both the x and y value of the point and is animated along the path. Any help with that would be greatly appreciated!
Many thanks in advance,
Matt
Related
I would like to create some mouse interactions on several moving planes and for that, I need to know which planes I'm hovering on. I've implemented the Raycasting method like in your example here but it seems like I'm hovering all my planes in the center of the canvas, just like if the raycasting method wasn't considering my position.set() modifications.
You can see here an example of what I did here, I logged the result of the hits array at the end of the canvasSlider.js file and all planes are logging when hovering in the center.
Is there a way around that? Or I'm I doing something wrong? Thanks a lot.
The main issue is that you are setting the z scale to 0.
plane.scale.set(1, size.height/size.width, 0);
Replace the 0 with a 1 to enable the hit tests to function.
Another issue I noticed was that your mouse values are relative to the screen and not the canvas. As the canvas is on a scrolling page it may not be taking up the full screen at all times.
I am having trouble getting all my images to load for my canvas project at school. I can get the red dot to load and follow the mouse like its supposed to, but the rest does not want to work. Do I have a syntax error or am I missing a line of code? Any help would be greatly appreciated. Here is a link to the playcode:
https://playcode.io/599039/
I currently have an html page that produces a line graph inside a canvas element. I have also implemented a feature so that when you click on a point in the graph, a table below the canvas displays the information for that graph point, and clears if you click somewhere that isn't a graph point on the canvas. However, there is currently no indicator for what graph point you have selected.
I would like to make it so that the dot you click on either gets bigger, or highlighted, or something. Unfortunately, I don't think there's any way to do that on the one canvas without needing to redraw the entire graph afterwards. If I drew a bigger dot on top of the original, I would then need to erase it and replace it with the smaller one, as well as redrawing the segment of the line graph that was covered by the larger dot.
I was looking into using a second canvas on top of the first with identical dimensions, using a z-index to control which was on top. However, I don't know how this would affect the click event. If two canvasses are on top of each other, is it possible for the click event to register the lower canvas? Does it only register the higher one? I guess I could just change the click event to be for whichever canvas is on top, but keep all the code for drawing on the canvas the same.
Any advice for how to solve this problem?
Solved a few of my own questions.
Firstly, the click event will only recognize whichever canvas is on top. However, I did like I said, and changed my click event to be for the top canvas, while leaving all instructions on the inside to be for the top canvas. Thank goodness I didn't use the 'this' keyword, or the change would have been much more annoying.
To make the graph points highlight, I first added a second canvas on top of my first one, placing them on top of each other by making their positions "absolute" and giving them a z-index of 0 and 1 respectively. Then, inside the if statement where the original click event recognized that a point had been clicked on, I told the top canvas to draw a larger dot on the same coordinates as the first dot (which I had saved in an array). First, I had it clear the top canvas though, so any other highlighted dots would no longer be highlighted. If the canvas was clicked on somewhere other than a dot, nothing was highlighted.
When I try to rotate the dygraph by 90 degree, the mouse pointer gets out of sync and doesn't follow the highlighted point in the graph. I understand this is because now x - axis becomes vertical and y axis as horizontal but I don't know how to fix this issue. I tried pointing my own logic inside mousemove_ function of dygraph.js but couldn't make it work. Can someone please suggest me the code change I need to make.
Note: My app has both dynamic and static graph, so the mouse pointer should in sync with highlighted point for both static and dynamic graph
This came up in the dygraphs-users mailing list. See this thread: Best way to draw the graph vertically, particularly Ransom Christofferson's message.
I'm trying to build the fruit ninja type swipe to some of my buttons in Flash CS6 and ActionScript3.
In trying to figure it out this is what I have come up with:
get the coordinates of where the user first put his finger mouse down,
then where we lifted it
see if your button touches any of those coordinates (if yes, execute that button code)
run some kind of animation between the first two coordinates (mouse down, mouse up points)
am I on the right track?
Also, has anyone already done this so that I can look at their code?
Thanks!
Check out this series on the subject by the great Emanuele Feronato, using the physics library Box2d:
Slicing, splitting and cutting objects with box2d
Part 2: Actually split the object
Part 4: Using real graphics
(I couldn't find part 3 but I don't think we're missing anything too important there). Hope this helps!