Need to implement really big graphic report with up to 5K elements on it (Gantt chart).
User must be able to scroll through report (scrollbar or mouse grab action) and change scale.
So far I came up with following ideas:
Scrolling by mouse grab action
Listen to user mouse down event and rerender the whole canvas on every mouse move (changed position) until mouse up event.
Scroll bars
Have to be custom made (also canvas or just html), also with event listeners on move action.
Scale
Could be implemented by using canvas scale property.
Do I think in right direction or there's a better (less code / more efficient) approach?
Related
I want to use particle.js (https://vincentgarreau.com/particles.js/) on my website as a background. I configured it to detect the mouse on the canvas but if I start adding other html elements, the mouse detection stops working. I found a website (http://demo.diviwebdesign.com/fullwidth-header-extended-demo-1-json/) which apparently gets around this issue but I have no idea how they did it. Do you have a idea?
If I use detection on window level, as soon as I scroll or if the canvas does not fill the whole window, the detected mouse location is off so thats not a suitable solution either. I would need a way to forward the mouse through the obscuring element down to the canvas.
This question has been probably asked many times but I can't actually find the answer nor here nor on Google. Probably I'm searching it with wrong words, so I decided to ask here on StackOverflow.
I'm using Hammer.js to handle the mobile gestures on the current website and what I'd like to do now is moving the divs horizontally as much as the thumb moves (like the Facebook's app gallery, for example).
I thought I can achieve it getting the coordinates X,Y of the point where the swipe event is recognized and then animate the move between the current viewport and the next "overflow hidden" div. What I'm missing is: which is the event listener that would listen at every thumb move so that I can calculate the distance in pixel between the current point and the starting point, automatically updating the value for the animate function?
the event you are looking for is touchmove
How can activate the drag -and-drop feature inside the canvas tag ?
As far as I know, there is no built-in drag and drop within a canvas, because a canvas is a literal context that you draw things on. Canvas-based games constantly refresh and redraw all elements.
Basically, a canvas requires a lot of manual, fine-tuned assembly of colors, though it can be performant under circumstances where you want that type of manual, decided control
When a user clicks on an object that seems to be within your canvas, you have to calculate where that mouse event's X and Y coordinates would fall, and determine which actions can be performed onclick on whichever thing is drawn there.
Normal DOM (not so in a canvas or iframe) will emit an event from the element you clicked, and will bubble up through all parent elements saying that some target element was clicked, and this fired event will have lots of data about that click event
A canvas is kinda like having a real painting: rather than an assembly of objects, there is nothing to drag, just a bunch of data about which pixels are which colors.
Normally, HTML elements have an attribute [draggable], but you would still need to manually reposition the element on mouseup or whatever, based off of the screen, or closest non-staticly placed parent. This question might be helpful: HTML5 Canvas Drag and Drop Item
You should search around instead of asking a question like this, in my opinion
I'm using D3's zoom behavior on a large world map.
var zoom = d3.behavior.zoom().scaleExtent([1, 100]);
It works great, providing a natural zoom functionality and disabling the usual scroll activity one expects from a MouseWheel event, as it should.
However, when the map takes up the whole screen, I worry that users will get frustrated if they try to scroll down using the mouse wheel when the map is zoomed all the way out. Is there a way to bubble up to this behavior only in that circumstance?
A good example is the way a scrollable DIV on the page will scroll down when the mouse wheel is used over top of it. But when it reaches the bottom, the page itself resumes scrolling down.
I don't know a lot about event bubbling, but I do see that the D3 zoom behavior does called a d3.event.preventDefault().
I'm searching for a script like Photoswipe that works on desktop on mouse events, simulating swipe gestures.
Photoswipe without thumbnails is perfect - only I want to animate not only images but a whole div!
The first good-looking result was a jQuery plugin called jQuery mouseSwipe.
But this script only moves around a parent div which contains the items visually moved around.
If that is not enough, you should consider writing something for yourself.
Listen to mousedown and mouseup events and check the distance from the startpoint to the endpoint. If it is higher than a threshold you defined, let's say 100 Pixel, go to the next or previous element, based on the direction of the movement.
If you want it to be animated, you should also listen to the mousemove event and move the element around.