Zoom in on mouse position in KineticJS - javascript

Question:
How do I zoom in on the mouse position on mouse wheel scrolls?
Details:
I am trying to merge this complete solution on Stack Overflow, which allows for zooming of the stage, with this incomplete solution, which allows for zooming in around the mouse when clicked. I have forked the jsfiddle code here. The code works fine once you get it zoomed in, but upon first scrolling, the stage jumps to a different location and I can't figure out why. Can anyone tell me why it is happening, and how to solve it. Thanks.

Just a guess, but you are using the mouse position relative to the page not the canvas

When you zoom, the position under your mouse position gets changed (the reason of jumping). To move back the position to its original position, you need to pan the offset( difference between the previous position and the new position(after zoom)). To avoid stage jumping to a different location, you can use stage.setOffset function of KineticJS.
JSFiddle: http://jsfiddle.net/rpaul/ckwu7u86/3/

Related

Get position of rotated div

I'm working on a drag and drop div project. In my editor it is possible to resize, position and rotate a selected div. It all works fine as long as the rotation is 0, but once I have set a different rotation, it starts behaving different. I'm not sure exactly what I need to do, but there must be some sort of offset that I need to take into account.
Best example I can provide is: http://recordit.co/0Pskwtrvh0
Notice in the video that without rotation I can move the div around without any problems, but after setting a rotation, everytime I click the div "skips".
Hope someone understands the problem and can push me in the right direction.

Javascript "dragging" an image across a canvas

There's quite a few questions about this where the solution provided is to just set the top left and top down values of the image to the position of the mouse/touch, however what I want to do is to have an actual dragging movement. Regardless as to where on the canvas I press, if I drag my finger to the right x pixels, I want the image to move to the right x pixels. Same goes with left, up, and down.
I'm at a complete loss as to where to even start with this. I will be handling mobile touch events, so I feel like using canvas.addEventListener('touchmove') would be the best option, but I'm not sure.
I already have the canvas repainting and everything handled, just really need help with the logic for dragging the image in real time, instead of just snapping it into position.
Get the point where the interaction starts (touchstart) and use it to calculate how much the finger moved on the screen (in the touchmove callback) and add it to the image position (also in touchmove).
PS: Also I recommend using something like PIXI JS for canvas/WebGL stuff ... unless you need a custom solution.

Disable drag once attained maximum bounds in Leaflet

I am working on Leaflet with a custom image whose tiles are being generated using "zoomify". I am currently facing the issues below:
1) On minimum zoom level, the image should not be draggable which is achieved using map.dragging.disable().
But the issue arises when the image is currently at maximum zoom level and user is dragging, as I don't want the focus to go beyond the tiles, i.e user should not be able to see "grey border" once he reaches beyond the bounds limit. Is it possible to do using Leaflet. For example, user drags the image and once grey border is starting to appear, the drag gets disabled. Although it does come back to current position by setting bounceAtZoomLimits: false as well as map.fitBounds(), but that is only when user ends dragging.
2) On Pinch zooming, the user can zoom in/out as much he/she can. Hence the image could contract as much as the user pinch zooms IN as well as pinch zooms OUT. Is it possible to stop this behaviour, i.e the user can only pinch zoom IN to the maximum zoom level set as well as pinch zoom OUT to the minimum zoom level set?
Any help would be appreciated. Thanks :)
Leaflet checks bounds only after dragging. You need to add drag process listener to fix tile layer position in action:
map.setMaxBounds(bounds);
map.on('drag', function() {
map.panInsideBounds(bounds, { animate: false });
});
Example: http://jsfiddle.net/asleepwalker/exqar2w4/
UPD: I wrote a small plugin to perform it. Here is it: https://github.com/asleepwalker/leaflet.hardbounds
This has been answered here.
In Leaflet 1.0.0+ there is an option maxBoundsViscosity to "slow down map dragging" or make "the bounds fully solid".

Zooming image to mouse cursor with Javascript and returning to the images original position

Part of my app requires the user to be able to use the mousewheel to zoom in on an image which is already centered inside a larger container element.
I am using jQueryUI to provide a slider with which the zoom is controlled manually.
When zooming withe mousewheel, the viewport adjusts so that the user is always zooming towards to mouse cursor providing exactly the same behaviour as google maps in terms of zoom functionality.
Also, in order to provide a better experience than using css transitions I have written a momentum based smooth scroll algorithm to make the zooming as smooth as possible.
Everything works perfectly with one exception.
To replicate the problem please follow these steps on the provided jsFiddle:
move mouse cursor to the center of the image.
Very gently move the mousewheel one notch so that the smoothwheel takes over an zooms you in a little.
Then move the mouse cursor to another point of the already slightly zoomed image
Zoom in again, as far as you want this time
Finally zoom all the way out
You will see that the zoomed out image is now misplaced (as the translates have not been removed).
The behaviour I want is for the zoomed out image to return to its original position once the scale is set back to 1.
If you remove the css translate from the image in Firebug you will see that the image returns to the correct location.
Therefore this could easily be achieved with a simple conditional like so:
if(scale == 1){
//remove transforms completely
}
However doing this would provide a jumpy experience and I would like the image to gradually zoom back out to the original position as the user zooms out.
It is worth mentioning that if you zoom all the way in without moving the mouse you will find that everything is correct when you zoom back out. This is simple because no translate gets added to the elements transform, simply a scale and transform-origin. In my code the translate only gets added when you change zoom position with the mouse mid zoom.
Unfortunately I cant seem to get my head around the best way of going about this.
Here is a working jsFiddle:
http://jsfiddle.net/3k332/15/
Thanks in advance for any help.
NOTE: I am well aware that there is some redundant code in my fiddle and that its not particularly elegant but this is merely a quick mock up to help you understand the problem.

scroll with mouse wheel and mouse movement

I try to make a gallery that I can move in its content with mouse wheel or with mouse movement.
I used the following script for mouse movement http://valums.com/files/2009/menu/final.htm and for mouse wheel I use Mouse Wheel Plugin.
Separately they work great but when I try to combine them I have some problems. Check the following demo:
http://jsfiddle.net/A93mF/
As you can see partially works but, and I say partially because when I use mouse wheel to scroll it's ok, but when I move a bit the cursor then returns in the previous position.
How can I make it so, if I scroll and then move the cursor to continue normally the scrolling instead of return in the previous position?
Any solution is acceptable (change javascript[jQuery], html structure, plugin or whatever)
I rewrote the mouse movement script and now I think is works fine and in Chrome also (thanks #Nicola Peluchetti ) For anyone interested can check the following demo: http://jsfiddle.net/A93mF/3/

Categories