Strange behaviour of GestureEvent.rotation on iOS webkit - javascript

I am using javascript Gesture events to detect multitouch pan/scale/rotation applied to an element in a HTML document.
Visit this URL with an iPad:
http://www.merkwelt.com/people/stan/rotate_test/
You can touch the element with two finger and rotate it, but sometimes the rotation property goes go astray and my element flips around many full rotations.
Here is part of my code, I am really only taking the value directly from the event object:
...bind("gesturechange",function(e){
e.preventDefault();
curX = e.originalEvent.pageX - startX;
curY = e.originalEvent.pageY - startY;
node.style.webkitTransform = "rotate(" + (e.originalEvent.rotation) + "deg)" +
" scale(" + e.originalEvent.scale + ") translate3D(" + curX + "px, " + curY + "px, 0px)";
}...
What happens is that the value gets either 360 degrees added or subtracted, so I could monitor the value and react to sudden large changes, but this feels like a last resort.
Am I missing something obvious?

I found a solution.
In order to avoid sudden changes in the rotation that don't reflect real finger moves you need to test for that. I do that testing if the rotation changed more then 300 degrees in either direction, if it does then you need to add or subtract 360 depending on the direction. Not really intuitive, but it works.
Fixed page is here:
http://www.merkwelt.com/people/stan/rotate_test/index2.html
Here is the code
<script type="text/javascript">
var node;
var node_rotation=0;
var node_last_rotation=0;
$('.frame').bind("gesturestart",function(e){
e.preventDefault();
node=e.currentTarget;
startX=e.originalEvent.pageX;
startY=e.originalEvent.pageY;
node_rotation=e.originalEvent.rotation;
node_last_rotation=node_rotation;
}).bind("gesturechange",function(e){
e.preventDefault();
//whats the difference to the last given rotation?
var diff=(e.originalEvent.rotation-node_last_rotation)%360;
//test for the outliers and correct if needed
if( diff<-300)
{
diff+=360;
}
else if(diff>300)
{
diff-=360;
}
node_rotation+=diff;
node_last_rotation=e.originalEvent.rotation;
node.style.webkitTransform = "rotate(" + (node_rotation) + "deg)" +
" scale(" + (e.originalEvent.scale) +
") translate3D(" + (e.originalEvent.pageX - startX) + "px, " + (e.originalEvent.pageY - startY) + "px, 0px)";
}).bind("gestureend",function(e){
e.preventDefault();
});
</script>

Related

How to zoom to mouse pointer while using my own mousewheel smoothscroll?

Part of my app contains functionality similar to google maps in that the user should be able to zoom in and out on an image within a container.
In the same way that google maps does I want the user to be able to scroll with the mousewheel and the pixel on the image to remain directly under the mousepointer at all times. So essentially the user will be zooming to wherever their mouse pointer is.
For the zooming/translating I am using css transforms like so:
visible
$('#image').css({
'-moz-transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
'-moz-transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px',
'-webkit-transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
'-webkit-transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px',
'-o-transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
'-o-transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px',
'-ms-transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
'-ms-transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px',
'transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
'transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px'
});
I have managed to find various implementations of how to go about doing this however I am using a self rolled smooth scroll technique to interpolate the mouse events and provide momentum.
Trying to get the two to work correctly together is proving troublesome.
Rather than paste a whole load of code here I have created a jsFiddle that includes the mousewheel smoothscroll technique along with the zoom function that I have so far.
http://jsfiddle.net/gordyr/qGGwx/2/
This is essentially a fully functioning demo of this part of my app.
If you scroll the mousewheel you will see that the jqueryui slider interpolates and provides the momentum/deceleration correctly. However the zoom does not react correctly.
If you scroll your mousewheel only one point the zoom works perfectly but any further scrolls do not work. I assume this is because the scale of the image has now changed causing the calculations to be incorrect. I have attempted to compensate for this but have not had any luck so far.
So to summarise, I would like to modify the code in my jsFiddle so that the image zooms directly to the mousepointer at all times.
Huge thanks in advance to anyone willing to help.
You can do it more easily with css3 transitions.
Exemple: http://jsfiddle.net/BaliBalo/xn75a/
The main center-mouse algorithm is here:
//Center the image if it's smaller than the container
if(scale <= 1)
{
currentLocation.x = im.width() / 2;
currentLocation.y = im.height() / 2;
}
else
{
currentLocation.x += moveSmooth * (mouseLocation.x - currentLocation.x) / currentScale;
currentLocation.y += moveSmooth * (mouseLocation.y - currentLocation.y) / currentScale;
}
If you want to keep your already-existing code, I think you can do it approximatively the same: the trick to get the mouse position on the zoomed image when the image itself is zoomed by a css scale transform and using transform-origin is to substract the transform origin to your point then multiply by the factor and finally re-add the transform-origin.
You can also use translate as in this updated example: http://jsfiddle.net/BaliBalo/xn75a/15/
As you can see it even simplifies the formulas but don't forget to sub the center of the element to mouse point as a translation of {0, 0} will zoom on the middle of the image.
EDIT:
I stumbled on this answer of mine today and figured it wasn't really the behaviour you wanted. I didn't understand correctly the first time that you didn't want to center the point under the mouse but to keep it in the same spot. As I did it recently for a personnal project I tried to correct myself. So here is a more accurate answer :
http://jsfiddle.net/BaliBalo/7ozrc1cq/
The main part is now (if currentLocation is the top-left point of the image in the container) :
var factor = 1 - newScale / currentScale;
currentLocation.x += (mouseLocation.x - currentLocation.x) * factor;
currentLocation.y += (mouseLocation.y - currentLocation.y) * factor;
I also removed the CSS transition. I think the best way to achieve a smooth scrolling would be to use requestAnimationFrame to create an animation loop and instead of changing values directly in the zoom function, store values and animate towards them in the loop.

Fire zoom event (or simulate zoom event)

When I zoom with the mouse, the following function attached to myZoom will be executed:
myZoom.on('zoom', function() {
someElement.attr('transform', 'translate(' + d3.event.translate[0] + ',' + d3.event.translate[1] + ') scale(' + d3.event.scale + ')');
....
// redraw axes, which should stay where they are at.
....
}
To simulate zoom without mouse or some other pointing device, I can just change the value of the attribute 'transform' above. Easy.
But problem is in this function I actually redraw axes, whose scale is automatically recalculated. Refer to this official documentation from d3:
zoom.y([y])
Specifies an y-scale whose domain should be automatically adjusted
when zooming. If not specified, returns the current y-scale, which
defaults to null. If the scale's domain is modified programmatically,
it should be reassigned to the zoom behaviour.
I need to zoom programmatically (maybe with zoom button). How can I fire zoom event, so that scale of my axes is automatically recalculated?
Programmatic zoom seems to be a daunting task in the D3 library because the D3 zooming is closely tied to the mouse events. A common instance of programmatic zooming is zooming in or out with a slider control. Surprisingly, I couldn't find a single working example of how to make D3 zooming work with a slider control. After investing some time and effort I developed this working demo which can be found here D3SliderZoom. The key point is to change the transform attribute of a "<g>" SVGElement embedded in an "<svg>" element using the scale value thrown by the slider.
function zoomWithSlider(scale) {
var svg = d3.select("body").select("svg");
var container = svg.select("g");
var h = svg.attr("height"), w = svg.attr("width");
// Note: works only on the <g> element and not on the <svg> element
// which is a common mistake
container.attr("transform",
"translate(" + w/2 + ", " + h/2 + ") " +
"scale(" + scale + ") " +
"translate(" + (-w/2) + ", " + (-h/2) + ")");
}
This method then has to be invoked from the change event of the slider as shown below.
$(function() {
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 1000,
max: 10000,
value: 1000,
slide: function( event, ui ) {
zoomWithSlider(ui.value/1000);
}
});
});
This solution is much more elegant than generating pseudo-mouse scroll event.
I ended up calculating new domain for a new zoom level by myself. With this new domain I could redraw two y-axes. For someone, who has same problem, I post my code. It's very specific to my project, so it might be hard to understand. Just for your interest.
wr.zoomSim = function(sNew) {
var s = wr.zoom.scale(),
tx = wr.zoom.translate()[0],
ty = wr.zoom.translate()[1],
sReal = sNew / s,
dtx = wr.width / 2 * (1 - sReal),
dty = wr.height / 2 * (1 - sReal),
txNew = sReal * tx + dtx,
tyNew = sReal * ty + dty,
a = wr.scaleYBZoom.domain()[0],
b = wr.scaleYBZoom.domain()[1],
c = wr.scaleYBZoom.range()[0],
d = wr.scaleYBZoom.range()[1],
r = (b-a)/(d-c);
wr.scaleYBZoom.domain([a + r * ( (c - dty) / sReal - c), a + r * ( (d - dty) / sReal - c)]);
wr.zoom.scale(sNew);
wr.zoom.translate([txNew, tyNew]);
wr.svg2.select('g#bar')
.attr('transform', 'translate(' + txNew + ',' + tyNew + ') scale(' + sNew + ')');
wr.svg2.select('g#axisl')
.call(d3.svg.axis().scale(wr.scaleYBZoom).orient('left'))
.selectAll('line.tick')
.attr('x2', wr.width - wr.bar.left - wr.bar.right + 2 * wr.padding);
wr.svg2.select('g#axisr')
.call(d3.svg.axis().scale(wr.scaleYBZoom).orient('right'))
.selectAll('line')
.remove();
};
Unfortunately #Debasis's answer didn't work for me, because I wanted to achieve this with a zoom behavior which I was already using with my force layout. After two days of desperation I finally found the solution in this thread:
https://groups.google.com/forum/#!msg/d3-js/qu4lX5mpvWY/MnnRMLz_cnUJ
function programmaticZoom ($svg, $zoomContainer, zoomBehavior, factor) {
var width = $svg.attr('width');
var height = $svg.attr('height');
var newScale = zoomBehavior.scale() * factor;
var newX = (zoomBehavior.translate()[0] - width / 2) * factor + width / 2;
var newY = (zoomBehavior.translate()[1] - height / 2) * factor + height / 2;
zoomBehavior
.scale(newScale)
.translate([newX,newY])
.event($zoomContainer);
}
I did this by making use of zoomListener. Worked well in simple steps for me:
Define zoomListener:
var zoomListener = d3.behavior.zoom();
Call the zoom listener
d3.select(the-element-that-you-need-zoom-on).call(zoomListener);
Decide your zoom step. I took steps of 0.1. (Use 1.1 for zoom-in and 0.9 for zoom-out)
Multiply with the current zoom scale
var newScale = zoomListener.scale() * step;
Set the new scale value
zoomListener.scale(newScale);

Rotation of image with Raphael 2 does not work

when I try to animate the rotation of an image (with Raphael 2), which I have done before successfully with Raphael 1, nothing happens.
Animating another property such as height does work.
this.image.animate({rotation: this.angle + " " + this.centerY + " " + this.centerY}, this.animationTime, '<>');
Do you have an idea?
Thanks.
As I see on http://raphaeljs.com/reference.html element.animate does not have an rotation parameter(at least in version 2.0; maybe in earlier version it was there?).
You have to use
this.image.animate({transform:"r"+this.angle + "," + this.centerY + "," + this.centerY}, this.animationTime);
this.image.rotate(45);
I have noticed that the old way has been updated in 2.0.

Tracking mouse movements

This should be typically easy, I want to perform tracking of mouse movements. I'm capable of capturing the XY co-ords.
However, as far as I'm aware, this will vary according to the browser size, right ?
If so, can anyone recommend other things to track to ensure my results are accurate?
P.s I'm using the following Jquery example
$("html").mousemove(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
});
Coordinates are independent of the browser size.
Hope this helps. Cheers
PS: Use $(window).mousemove or $(document).mousemove instead of $("html").mousemove, it's a better practice.

jQuery Element Free Rotation. Correcting Transform Origin and Translate in IE

I'm developing a jQuery plugin to make a block-level element rotatable with mouse. Now it works as expected in non-IE browsers, but have a strange behavior while rotating in Internet Explorer.
Demo is hosted at testerski.antaranian.me here, rotation plugin script is
$.fn.roll = function(angle){
var $this = this,
ie = !jQuery.support.leadingWhitespace;
if (ie) {
var cosAngle = parseFloat(parseFloat(Math.cos(angle.rad())).toFixed(8)),
sinAngle = parseFloat(parseFloat(Math.sin(angle.rad())).toFixed(8)),
tx = 0, ty = 0,
matrixFilter = '(M11=' + cosAngle + ', '
+ 'M12=' + -sinAngle + ', '
+ 'M21=' + sinAngle + ', '
+ 'M22=' + cosAngle + ','
+ 'sizingMethod=\'auto expand\')',
filter = 'progid:DXImageTransform.Microsoft.Matrix' + matrixFilter,
css = {
'-ms-filter': filter,
'filter': filter
};
debug.log(filter);
var matrix = $M([
[cosAngle, -sinAngle, tx],
[sinAngle, cosAngle, ty],
[0, 0, 1]
]);
debug.log(matrix);
$this.transformOrigin(matrix);
$this.fixIeBoundaryBug(matrix);
} else {
var css = {
'-webkit-transform': 'rotate(' + angle + 'deg)',
'-moz-transform': 'rotate(' + angle + 'deg)',
'-o-transform': 'rotate(' + angle + 'deg)'
};
}
$this.css(css);
return this;
};
I googled and found these two pages related to this subject
Grady's guide and Zoltan's guide
As I get there are some accounting needed related to Linear Algebra, but it's hard for me so if anyone have more simple tutorial, or knows the direct solution, please let me know.
Any help would be appreciated,
Antaranian.
IE's Transform Filter, unfortunately, doesn't have a concept of "transform-origin". the 'auto expand' sizingMethod will make the transformed object take the minimum amount of space possible, and you need to change it's positioning.
In cssSandpaper, I put another <div> tag around the transformed object and adjusted it's margin-left and margin-top. If you go to the cssSandpaper website and look through the code, you will see the exact formula (search for "setMatrixFilter" in cssSandpaper.js). You can hard code it into your library, or you can use cssSandpaper itself to do it (using the cssSandpaper.setTransform() method). Even though it may add a few KB to your code, I suggest this just in case I make improvements to the way I handle transforms in the future.
In any case, good luck!
Z.
Actually I've coded it according to my needs, here is the code, if anyone else is interested.
$.fn.ieRotate = function(alfa){
var self = this,
cosAlfa = Math.cos(alfa),
sinAlfa = Math.sin(alfa),
matrix = '(M11=' + cosAlfa + ', '
+ 'M12=' + -sinAlfa + ', '
+ 'M21=' + sinAlfa + ', '
+ 'M22=' + cosAlfa + ','
+ 'sizingMethod=\'auto expand\')',
// constructing the final filter string
filter = 'progid:DXImageTransform.Microsoft.Matrix' + matrix;
self.each(function(el){
var $this = $(el),
size = $this.data('size'),
pos = $this.data('pos');
$this.css({
'-ms-filter': filter,
'filter': filter,
// for IE9
'transform': 'rotate(' + angle + 'deg)'
});
// calculate the difference between element's expeced and the actual centers
var dLeft = ($this.width() - size.width) / 2,
dTop = ($this.height() - size.height) / 2;
$this.css({
top: pos.top -dTop,
left: pos.left - dLeft
});
});
return self;
};
Usage:
// caching the image object to a variable
$image = $('img#my-image');
// saving images non-rotated position and size data
$image.data('pos', {
top: $image.position().top,
left: $image.position().left
}).data('size', {
height: $image.height(),
width: $image.width()
});
// rotate image 1.2 radians
$image.ieRotate(1.2);
Thanks to #Zoltan Hawryluk, his code helped me during the development.
The position fix for IE can also be calculated analytically - see here

Categories