I'm having difficulties implementing multi-touch panning with hammer.js. Panning events are only fired with single pointers. If I try to drag with two fingers it does not fire until I release at least one finger.
Do I have to do something special to the hammer configuration?
EDIT: I already found that I can configure 2 pointers for the pan event, but now I see that Chrome has a built-in feature to open a context menu on two-finger tap, which most of the time prevents the panning from being recognized.
If I simply catch the 'contextmenu' event and call preventDefault(), it will (obviously) completely disable the pan recognizer.
Any other way?
BR,
Daniel
You should use 'pinch' event. For two-fingers panning and zooming. PINCH event has property: 'pointers', with finger events;
var previous_pinch_delta = {
x: 0,
y: 0
};
hammered.on('pinch', function(e){
camera.pan(e.deltaX-previous_pinch_delta.x, e.deltaY-previous_pinch_delta.y);
previous_pinch_delta = {
x: e.deltaX,
y: e.deltaY
};
});
Related
I have a simple plot with the zoom functionality along Y axis.
When I use wheel to change the zoom it works OK.
But when I use mouse to drag then at the beginning the chart jumps.
Here is the function I use on the zoom event:
I guess there should be added some test if the event is wheel or mouse and some more calculations in case of the mouse event.
function zoom(event: any) {
console.log(event);
let new_yScale = event.transform.rescaleY(yScale);
console.log(new_yScale);
console.log(new_yScale.domain());
console.log(new_yScale.range());
setMinY(new_yScale.domain()[0]);
setMaxY(new_yScale.domain()[1]);
}
I am using D3.js and React.
Code sandbox link:
Application demo:
In the attachment is the gif showing the strange behaviour.
I tried to console.log the event.transform result and noticed the event.transform values are different on wheel event and mouseevent. But I do not know how to recalculate the mouseevent result to be compatible with the wheel.
I solved it here:
https://p89vne.csb.app/
I found this tutorial very useful:
https://www.youtube.com/watch?v=dxUyI2wfYSI&list=PLDZ4p-ENjbiPo4WH7KdHjh_EMI7Ic8b2B&index=18
I think the initial example had flaw design ( with recreating the svg every tick) and that was the main problem.
Here is a fiddle showing an example of what I'm trying to do. (I know it doesn't look right but it just needs some changes and that isn't the problem I'm facing :p ).
Im creating a pie chart using Raphael SVG, and the tooltip is also an svg element.
draw_tooltip(SVGpaper, this, 0);
is used to clear the tooltip.
The problem is I don't understand how to properly handle the mouseover event. On each event the tooltip needs to popup after clearing the previous tooltip, which I've tried to manage using the counter. But as is apparent from the fiddle, the mouseover event isn't smooth. Also, it stays even while shifting to other arcs and when it moves out of the pie.
Pleae suggest some solution!
I suspect the problem you are having, is that the new path/element that is being displayed for the tooltip, is then interfering with the mouse events, stopping the event from working. So Raphael can be a bit fiddly for mouse events, if dragging/moving. There's probably a couple of different ways around it. One may be handling events more globally and deciding what to do with them, or if you don't mind it, move the tooltip a bit further from the cursor location.
arc.mouseover(function (e) {
x = e.pageX + 50;
y = e.pageY;
draw_tooltip(this, 1, display_text, x, y);
});
arc.mouseout( function(e) {
popup.remove();
popup_txt.remove();
transparent_txt.remove();
});
arc.mousemove( function(e) {
popup.attr({ x: e.pageX - 70, y: e.pageY - 70 });
popup_txt.attr({ x: e.pageX - 25, y: e.pageY - 45});
transparent_txt.attr({ x: e.pageX - 120, y: e.pageY - 120 });
});
}
I've also changed the path for a rect and a couple of bits, but the main thing is keeping the tooltip away from the event location. Otherwise I wonder if you may need to handle it from jquery or possibly to a handler thats attached to other elements than the arc, which will depend on the complexity of the page maybe. See if this solution will do.
Fiddle here http://jsfiddle.net/74YNb/13/ (text alignment may need tweaking for all browsers)
The current scenario I need to solve, is rotating an image with the mousewheel.
As KineticJS does not have a specific hook for the mousewheel event (in that it's not a standard one anyway), I've used jquery-mousewheel to hook into the surrounding canvas, and KineticJS to store, on mouseover, the image that requires rotation.
On the mousewheel event, it checks if KineticJS has marked an image for rotation, it then goes ahead and rotates the image.
I'm not sure this is the best solution for the situation, as it doesn't take into account overlapped images (although I could probably prioritise the marking of 'active' shape to the topmost on the stack), or if this is even the most efficient solution.
Essentially:
on each shape-
this.image.on("mouseover", function() { Engine.scrolling = _this.image;})
this.image.on("mouseout", function() { Engine.scrolling = null;})
on the outer container -
$("#DraftingBoard").mousewheel(function(event, delta, deltaX, deltaY){
if(Engine.scrolling != null)
{
Engine.scrolling.rotateDeg(90);
Engine.scrolling.getLayer().draw();
event.preventDefault();
}
I want to create sort of a 3D effect with the shapes I generated with KineticJS on my canvas.
When I drag them to the top, the need to become smaller, and when dragged to the bottom, they need to become bigger.
The closest I got to what I wanted is with the mousemove event you see here
$.each(bubbles, function(){
var bubble = this;
bubble = new Kinetic.Circle({x:this.x, y:this.y, radius:this.r, fill:'#000000', draggable:true});
bubble.on("mousemove",function(){
bubble.setRadius((bubble.getY()/5));
});
layer.add(bubble);
});
But this only changes the radius when ending dragging and click the shape again.
It would be very nice if I can make it possible to change them "realtime", when dragging.
Does anyone have any idea how to solve this?
Here's my JSFiddle http://jsfiddle.net/ZsADd/1/
Thank you!
I think what you want is bubble.on("dragmove"). Here is an example of it in action. For more info on drag events, look into the documentation which I found here.
To detect drag and drop events with KineticJS, we can use the on()
method to detect dragstart , dragmove, or dragend events. The on()
method requires an event type and a function to be executed when the
event occurs.
I am creating a web app that I am wanting to be usable on mobile devices.
The initial mechanic of said app requires the current X/Y coordinates of the mouse - which doesn't require clicking and dragging, just simply moving the mouse around a browser window.
Now I have been looking in to the various jQuery/Javascript libraries concerning Touch and Gestures, yet I am unable to find anything that suits what I am after.
So basically I am looking for a way to get the x/y pos of a single finger touch/drag.
Eg: Touch the screen at 0, 0 then hold and drag it to 480,320. The values would then interpolate between x1, y1 to x2, y2.
Thanks.
$(function() {
var $log = $("#log");
function updateLog(x, y) {
$log.html('X: '+x+'; Y: '+y);
}
document.addEventListener('touchstart', function(e) {
updateLog(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
}, false);
document.addEventListener('touchmove', function(e) {
e.preventDefault();
updateLog(e.targetTouches[0].pageX, e.targetTouches[0].pageY);
}, false);
});
You shouldn't need a library for this, it's fairly easy to write your own code using the touchstart, touchmove and touchend events.
http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
As a side note, if you're using the iOS simulator for testing, be aware that it can sometimes give incorrect coordinates in a way that an actual device wouldn't, so you'll always need to keep a physical iOS device handy to verify that your code works.