I have an animated SVG path
I can attach a polyline to the end of the path which works (commented out in the codepen) but when I attach a custom path the Matrix coordinates disappear below the page.
You can see this in chrome dev tools if you inspect the bottom blue dot and below that there is a
g transform="matrix(0.8351,0.5501
If you swap the first coordinates out with 'M246' the feet element will appear (at the end of the animation).
So everthing is working apart from the coordinate mapping is off
Does anyone have any suggestions, thanks in advance
Michael
**Code Pen**
http://codepen.io/michaelcockle/pen/eBCAv?editors=001
Think you've already spotted an answer, but you need to account for the transform baked into the path itself, so
meFeet.transform( 't' + parseInt(movePoint.x - 260) + ',' + parseInt( movePoint.y - 1750) + 'r' + (movePoint.alpha - 90));
example here
Related
I want to to add custom control(div) to Fabric js object something like this:
I found this question but it has bug on rotation please see jsfiddle
I'm trying to find solution already few days, any suggestions are welcomed.
http://jsfiddle.net/86bTc/94/
var btnLeft = ((e.target.width / 2) -10 )* cos(angle) + ((e.target.height / 2) +25) * sin(angle);
var btnTop = -((e.target.height / 2) +25 )* cos(angle) + ((e.target.width / 2) -10 ) * sin(angle);
You have to add the rotation effect to LEFT and TOP of your absolute positioned element.
I changed the positioned element with a small div, so you do not get tricked by the baseline of text that makes the 'p' element look in wrong position.
Might be that solution is good for you? Fabric js custom controls
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.
Example: http://codepen.io/heroheman/pen/thdBH
Hi,
i have this boxed path, which changes the it corner points every second.. Also i have 4 icons which should be on the corner of the box.
Both is based on an array which recalculates the points, and sets new position.
But the position of the circles seems to have some kind of scaling - I tried absolute and relative paths (t and T seems to make no difference).
Maybe one of you guys could help!
You will need to account for the offset of the centre of the circles...
If you look at 'bubble' for example, its cx,rx attribute is 113,101.6
So ideally the transform for bubbles would logically be (new transform - original position)
't' + ( boxCoords[4] - 113 ) + ',' + (boxCoords[5] - 101.6 )
You could either hard code this in an array or object. Or if there are lots of icons, possibly you could grab the icons respective circle element, and get its element.attr('cx') value (or x if its a rect, or previous transform if its an arbitrary shape, or do a getBBox() on it to get its centre).
I have made a simple jsbin to draw a line between 2 points. ( no drawing libraries. just js/jq).
I have already have the code which calculates the angle ( I took it from this library).
so it looks like this :
When I drag the right bottom circle ( I added jquery draggable) it all looks good.
Why it looks good ?
becuase the code of origin-transform is : top left
$("#line") .width(...)
.css('-webkit-transform', 'rotate(' + angle + 'deg)')
.css('-webkit-transform-origin','top left').
So the div's (red line actually) rotation axis is the top left point.
Great.
So where is the problem ?
It starts when I mess with the left top circle... here - I dont know how to deal with the red line position...
How can I fix my code in -webkit-transform-origin in order to support both changes ?
You just forgot to set the left offset for the line:
Add
.css('left',x2+10)
(and change .css('top',$('#box2').offset().top+10) to .css('left',y2+10))
and everything will work fine:
Your modified example - now with correct start;)
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