SVG - 按照旋转的路径

我试图让一个圆圈沿着椭圆路径旋转，使用Snap.svg，但我遇到了问题。SVG - 按照旋转的路径

使用getPointAtLength仅返回未旋转的路径的点，因此当我旋转路径时，圆形在旋转之前仍将沿着原始路径。

var firstOrbit = s.path("M250,400a150,75 0 1,0 300,0a150,75 0 1,0 -300,0") 
.attr({stroke: "#000", strokeWidth:"5", fill: "transparent"}); 
var len = firstOrbit.getTotalLength(); 
firstOrbit = firstOrbit.transform('r75,400,400'); 
var circleA = s.circle(0,0,10); 
var startingPointA = Snap.path.getPointAtLength(firstOrbit, 0); 
Snap.animate(0, len, function(value){ 
    var movePoint = firstOrbit.getPointAtLength(value); 
    circleA.attr({ cx: movePoint.x, cy: movePoint.y }); 
}, 2000, mina.linear);

问题是，椭圆旋转，但圆A跟随的路径不是，所以它遵循错误的路径。有没有简单的方法来解决这个问题，还是我必须计算动画每一步的差异？

来源

2014-12-29 ItsGreg

对于此问题，您有两种可能的解决方案。要么您必须将<path>和<circle>放入<g>组中并将变换应用于组或者在路径上查找实际点，然后通过应用变换矩阵找到变换点。

溶液1

var len = firstOrbit.getTotalLength(); 
var circleA = s.circle(0,0,10); 

var group = s.g(firstOrbit,circleA); 
group = group.transform('r75,400,400');

JSFiddle

溶液2

var pt = s.node.createSVGPoint(); 
Snap.animate(0, len, function(value){ 
    var movePoint = firstOrbit.getPointAtLength(value); 
    pt.x = movePoint.x; 
    pt.y = movePoint.y; 
    movePoint = pt.matrixTransform(firstOrbit.node.getCTM()); 
    circleA.attr({ cx: movePoint.x, cy: movePoint.y }); 
}, 2000, mina.linear);

JSFiddle

来源

2014-12-30 07:01:24 Gilsha

将圆和路径都放入组中。将变换/旋转应用于组（而不是路径），以便圆和路径都继承相同的变换。。

来源

2014-12-30 03:49:13

SVG - 按照旋转的路径

回答

相关问题