Background info
I'm developing a visual form designer in which people with no coding experience can drag around form fields to create forms and print them or save as a HTML document.
I introduced a way to draw straight lines that can also be slanted at any angle. I accomplished this by using a normal div with no height and using only the bottom border. And when I apply CSS rotate transform to the div, it can be angled at any degree.
Problem
In the designer, when the user changes the angle(slope) of the line, I apply the styles via Javascript. Something like this:
lineWrapper.style.webkitTransform = "rotate(" + angle + "deg)";
lineWrapper.style.MozTransform = "rotate(" + angle + "deg)";
When the user wants to save the form as HTML, I get the outerHTML and return it to the user. Here, if I'm using Chrome, the MozTransform property is not there in the generated HTML and if I'm in Firefox the webkitTransform is not there.
Approaches I tried
I tried to solve this in many ways:
Instead of setting it via style property, I tried setting it via style.cssText property. It didn't work.
I can take the outerHTML of the div during HTML generation and insert the properties, but it's a very messy thing to do.
I can compromise by giving CSS classes for commonly used angles (0, 45, 90, 135, 180 etc), but I don't want to give up here too quickly.
So, I'm asking you guys - Is there a better way to solve this problem?
Thanks in advance,
Shesh
Dont set the style with '.style' instead use 'setattribute'. It should add both in both browsers. Also this will allow you to apply the style with one command.
lineWrapper.setattribute("style", "-webkit-transform : rotate(" + angle + "deg); -moz-transform : rotate(" + angle + "deg)");
I use a light weight jQuery plugin for rotation: http://code.google.com/p/jqueryrotate/ .It's really easy to use, and you can return the current angel of any html element just by using: .getRotateAngle()
Documentation: http://code.google.com/p/jqueryrotate/wiki/Documentation
Related
I made a codepen with snap svg: Codepen
I try to rotate a svg-gear in an endless-loop around his own centerpoint.
This works on Internet Explorer, but fails on Mozilla-Firefox and Google-Chrome.
The center point in Chrome and Firefox seems wrong and so the gear move out of his position.
For the rotation i used following code:
function infRotate(el, time, cw) {
var box = el.getBBox();
el.transform('r0,' + box.cx + ',' + box.cy);
if (cw)
el.animate({transform: 'r360,' + box.cx + ', ' + box.cy}, time, mina.linear, infRotate.bind(null, el, time, cw));
else
el.animate({transform: 'r-360,' + box.cx + ', ' + box.cy}, time, mina.linear, infRotate.bind(null, el, time, cw));
}
What i have to do for Firefox and Chrome to find right center point?
Thanks for your help.
Found solution based on #lan's comment.
The gear was in a group, which contains a X/Y - transformation.
So I try to remove each group and layer in the svg file. To see clearly the nesting of objects, I work with the XML-Editor in Inkscape.
Each object must be moved to his original position by using relativ-transformation. Using relativ movements prevent inkscape to print out translations attributes to groups.
Steps to move object relativ in Inkscape:
Go to Edit -> Select All in All Layers
Go to Object -> Transform
In Transform panel:
Uncheck Relative move and check Apply to each object separately
Move object to target position
After clean up the svg file, firefox and chrome calculate the right values too and the gear is now rotation well (see updated code on codpen)
Maybe it exist a better solution to tell Inkscape not working with transformation-attributes, but i didn't found it yet.
So if you work with animated SVG, be sure that the file is has no unnecessary groups and layers and keep attentions on transformation.
Joel except of taking center by using box.cx and box.cy. take center by dividing width and height of container by 2 and then set with it.
I use the $(window).resize(function()) to get changes in window size, and acoording to those I want to zoom in and zoom out. Why zooming?!, because I have a lot of dynamically appended divs with absolute coordinate and I want those divs to keep the allignment when window is changed.Basically what one would get, if pressed 'Ctrl' + '-'.
Let's say I have this image
If I use .css to add the following line, which zooms out '-moz-transform': 'scale(0.8)' I get an image like this
But if I use Ctrl + - instead I get
As you see the second image has some coordinates messed up(not changed). Has anyone any idea on why that is, or another function I could use to zoom out?
Here is a jsfiddle to play yourself http://jsfiddle.net/rnhev60f/8/
EDIT:: After the responses, I gave up on the idea. Instead I created a function to calculate the percentage of the changes (newSize / originalSize) and used the percentage to change the position and size of every object in order to avoid all backdoors and bugs. It's a bit more comlicated and ended up with a LOC-wise longer function, but works for me for now. Thanks for the responses tho!
You need to scale both the body and the span
Demo
http://jsfiddle.net/tdov936x/
Code
$('body,span').css({'transform': 'scale(' + currentZoom + ')'});
Result
Consider adding transform-origin: 0% 0%; as 2D transformations can change the x- and y-axis of an element
We are changing the translate 3D on a DIV that is very large. It has thousands of child DIV's in it. It is handled properly in chrome and firefox. But IE 10 && IE 11 is very very sluggish. Any idea what can be done to make this better. Below is the line of javascript code that changes this property.
currentDIV.style[transformProperty] = 'translate3d(' + (-left) + 'px,' + (-top) + 'px,0) scale(' + zoom + ')';
the "transformProperty", "left" "top" and zoom are variables that are set before the line. Thanks.
translate3d forces the layer onto the GPU for rendering, and IE may not be handling that well.
Have you tried a 2D translate instead? If the slowdown does not occur then, you could target IE specifically with the 2D translate without changing much code.
Adding the following style property helped me to improve the translate3d performance.
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
I'm trying to get the style.left and style.top of a rectangular div, after it has been rotated using style.transform=rotate(90deg).
I understand how the div is being rotated, with it being rotated around a 'transform point'. And I also understand that a div could be rotated by 45 degrees, so giving the new top/left of that would be awkward (In effect giving the bounding box left/top).
But back to the original question, rotating the rectangular div by 90 degrees, is there a way to get the 'new' left/top?
The reason I need this, is for a project im working on to upload images, allow the user to zoom, rotate etc, but currently having to do it with PHP to keep all the dimensions correct for the final image (Which is obviously bad, because I'm having to keep loading a new image once PHP has done the rotating/zooming etc)
I've also made a little jsfiddle showing that the top/left position doesn't change when it is rotated
Okay, thanks to the comment left above, I managed to throw together an answer.
Basically using:
newleft = parseInt(div.style.top) + Math.cos(90) * parseInt(div.style.height);
newtop = parseInt(div.style.left) + Math.sin(90) * parseInt(div.style.height);
after the div had been rotated.
I've updated my jsfiddle aswell, because the one in the comment above uses jQuery, but this way uses only javascript.
Cant find a fix for this anywhere! I want to produce a single character and then rotate it (inside a mouseover event). Since I need to use cufon for the custom font, print
must be used to summon the text. This works fine. But when in any way
trying to transform the single character weird things happen. It seems
to reset itself in size and placement, making it impossible to use.
Just applying a rotation with transform : "r0" makes the character huge and displaced in the middle of the screen.
Any thoughts on how to animate a printed "set" such as this??
var paper = new Raphael(document.getElementById('elementDiv'), 1350,
900);
var custom = paper.print(5, 25, "A", paper.getFont("Web"),
30).attr({fill: "#000"});
custom[0].stop().animate({fill: "#4d3416", transform: "r20, s2"}, 300,
"<>");
Thanks a bunch!
This problem has been solved by newer Raphael libraries, animations on objects created by print is now behaving correctly