here is the css Im using to rotate the image
'-webkit-transform': 'rotateZ(' + ui.value + 'deg)',
'-moz-transform': 'rotateZ(' + ui.value + 'deg)',
'-o-transform': 'rotateZ(' + ui.value + 'deg)',
'transform': 'rotateZ(' + ui.value + 'deg)',
According what I read on the subject you must rotate the image using JavaScript BEFORE using the canvas2html . I have to find a way to turn the above css into JavaScript to rotate an image using the html2div plugin. The problem is that I'm using sliders to rotate the image and I have no idea how to convert this into JavaScript to work with the UI slider can someone give me a starting point?
http://jsfiddle.net/davadi/3d3wbpt7/2/
You can do this pretty easily without any plugin
First select the element you want to rotate and save it as a JavaScript variable:
var element = document.getElementById('myElement');
Then change the transform attribute like this:
element.style.transform = 'rotateZ(' + ui.value + 'deg)';
Related
I'm having an issue trying to rotate an element on mousemove. I believe the issue is related to the fact that my element is much larger than the screen (set in CSS with vh/vw units) but essentially the element sound rotate, from the centre on mousemove.
I have set up a jsFiddle here:
https://jsfiddle.net/cLx290p1/
function themeLanding() {
var graphic = $('.landing-2016');
if (graphic.length > 0) {
var offset = graphic.offset();
function mouse(evt) {
var centerX = (offset.left) + (graphic.width()/2),
centerY = (offset.top) + (graphic.height()/2),
mouseX = evt.pageX,
mouseY = evt.pageY,
radians = Math.atan2(mouseX - centerX, mouseY - centerY);
degree = (radians * (180 / Math.PI) * -1) + 90;
graphic.css('-moz-transform', 'rotate(' + degree + 'deg) translate(-50%,-50%)');
graphic.css('-webkit-transform', 'rotate(' + degree + 'deg) translate(-50%,-50%)');
graphic.css('-o-transform', 'rotate(' + degree + 'deg) translate(-50%,-50%)');
graphic.css('-ms-transform', 'rotate(' + degree + 'deg) translate(-50%,-50%)');
graphic.css('transform', 'rotate(' + degree + 'deg) translate(-50%,-50%)');
}
$(document).mousemove(mouse);
}
}
themeLanding();
I have also applied the same idea, without mousemove as a debugging check, to rotate the same element using CSS3.
https://jsfiddle.net/psywr840/1/
This seems to work fine so I am unsure where I am going wrong.
Any ideas? Thanks.
When using css transform functions, the functions are processed in order from left to right.
In your case, what you want is to first translate the element and THEN rotate it. For example this answer on SO explains something similar, only instead of rotate they use scale, but the principle is the same.
So what you want, is to change the order of transform functions:
graphic.css('-moz-transform', 'translate(-50%,-50%) rotate(' + degree + 'deg)');
graphic.css('-webkit-transform', 'translate(-50%,-50%) rotate(' + degree + 'deg)');
graphic.css('-o-transform', 'translate(-50%,-50%) rotate(' + degree + 'deg)');
graphic.css('-ms-transform', 'translate(-50%,-50%) rotate(' + degree + 'deg)');
graphic.css('transform', 'translate(-50%,-50%) rotate(' + degree + 'deg)');
I'm using a plugin called html2canvas and the plugin does not support css rotate. I want an user to be able to rotate an image using a jQuery UI slider. I'm new to programing and I have no idea how to do this. Here is what I have so far?
http://jsfiddle.net/davadi/3d3wbpt7/3/
`
$("#slider").slider({
value: 0,
max: 360,
min: 0,
slide: function(event, ui) {
$("#image").css({
'-webkit-transform': 'rotateZ(' + ui.value + 'deg)',
'-moz-transform': 'rotateZ(' + ui.value + 'deg)',
'-o-transform': 'rotateZ(' + ui.value + 'deg)',
'transform': 'rotateZ(' + ui.value + 'deg)',
})}});
`
Canvas is too over powered to be used just to display images. What you want to do can simply be done by a simple <img> tag. I forked your jsFiddle and changed the canvas to just an image. It does what you want it to do
http://jsfiddle.net/tphwzq3g/ I simply changed $("#image") to $("#goo")
I am using tween to rotate on both X and Y axis. But I cant seem to find the correct javascript to edit the css.
Target is a div, and with the following code, it only rotates the axis while ignoring the Y axis.
It uses Tween JS
function update() {
target.style.left = position.x + 'px';
target.style.top = position.y + 'px';
target.style.webkitTransform = 'rotateY(' + Math.floor(position.rotation) + 'deg)';
target.style.MozTransform = 'rotateY(' + Math.floor(position.rotation) + 'deg)';
target.style.webkitTransform = 'rotateX(' + Math.floor(position.rotation) + 'deg)';
target.style.MozTransform = 'rotateY(' + Math.floor(position.rotation) + 'deg)';
}
How do I tell javascript to rotate on both and not just one axis?
You separate arguments with spaces. For example:
target.style.webkitTransform = 'rotateX(' + Math.floor(rotationX) + 'deg) rotateY(' + Math.floor(rotationY) + 'deg)';
(If you change the same property twice, you'll only overwrite previous value.)
Experimenting with JQuery and HTML5 for a college assignment at the moment. I would like to update the css values of the div when the slider is moved.
HTML
Scale<input id="slider" type="range" name="points" min="1" max="10">
Currently this is my script:
$("#slider").change(function(){
size = $("#slider").val();
console.log("Size: " + size);
//Update the size of box while dragging
b1.css({
"-webkit-transform":"scaleX"+size/10,
"-webkit-transform":"scaleY"+size/10
});
});
It works however the values do not seem to be updating in my CSS and I am guessing it is because I am assigning them incorrectly.
Does anyone have a solution as to how I can fix the problem?
JSFiddle
http://jsfiddle.net/JQ7vD/
The main problem was that you forgot your parenthesis before and after the scale value. To make it scale both the X and Y, however, you need to combine the jQuery lines into one, i.e.
b1.css({
"-webkit-transform": "scaleX(" + size / 10 + ") scaleY(" + size / 10 + ")"
});
This is because if you have them in separate lines then the second one will always override the first because it does so in CSS. Take the following example
#image {
background:url('/exampleImage.jpg');
background:red;
}
The background would be red, not the image declared first. To support all browsers you need to include the browser prefixes in the jQuery as well
b1.css({
'-webkit-transform': 'scale3d(' + size/10 + ',' + size/10 + ',1)',
'-moz-transform': 'scale3d(' + size/10 + ',' + size/10 + '1)',
'-ms-transform': 'scale3d(' + size/10 + ',' + size/10 + ',1)',
'transform': 'scale3d(' + size/10 + ',' + size/10 + ',1)'
});
DEMO: http://jsfiddle.net/JQ7vD/4/
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.