snap.svg將對象移動到一個圓圈中

我只是想將一個加載的SVG移動一圈。這是我走到這一步，這個想法是：「離開它是對象，爲30的半徑將其旋轉了一圈」：snap.svg將對象移動到一個圓圈中

var svgObject = Snap("svg#object g"); 
var path = svgObject.path("M0 0 a60 60 0 0 0 30 30"); 
var pathLength = path.getTotalLength(); 

Snap.animate(0, pathLength, function(value) { 
    movePoint = path.getPointAtLength(value); 
    svgObject.transform('t' + parseInt(movePoint.x) + ',' + parseInt(movePoint.y)); 
}, 5000, mina.easeOut);

我知道上面的代碼必須是比較幼稚，但這是我從互聯網上的各種來源收集的。

以上所有代碼都是將對象移動到右側。我希望它做一個完整的圈子（完全從它開始的地方結束）。

我必須改變以使上述代碼如上所述工作？

來源

2015-09-14 Micha

它不清楚你實際上遇到什麼問題。代碼最初看起來是合理的，可以沿着路徑移動（但不完整），但是當它與任何對象一起運行時會發生什麼？您可能會在使用逗號進行parseInt時出錯，您可能還需要爲每個movePoint值分配一個parseInt。 – Ian

@ Ian我修復了代碼（我沒有複製/粘貼它）。那裏實際上有2個parseInt。你說代碼不完整，缺少什麼？ thx – Micha

您想要移動的對象缺失，路徑不是圓形。你也可以繞偏移中心做一個旋轉變換，這取決於你是否介意旋轉對象本身或者它總是想直立。我會把它放在一個jsfiddle，所以我們可以看到發生了什麼和任何錯誤。 – Ian

如果包含完整的代碼和標記，它總是容易得多。機會是你試圖轉換主要的svg對象（因爲我可以看到代碼已被編輯），而不是轉換g對象。此外，你的路線是不正確的。由於沒有顯示標記，因此我無法測試該標記，但這裏有一個工作示例。

只需修改圓形路徑，使其僅包含您需要的部分。

var svgObject = Snap("#svgobject"); 
 
var groupObject = Snap('#svgobject g'); 
 

 
var path = svgObject.path("M 100, 100m -75, 0a 75,75 0 1,0 150,0a 75,75 0 1,0 -150,0").attr({ fill: 'none' }); 
 

 

 
var pathLength = path.getTotalLength(); 
 

 
Snap.animate(0, pathLength, function(value) { 
 
    movePoint = path.getPointAtLength(value); 
 
    
 
    groupObject.transform('t' + parseInt(movePoint.x) + ',' + parseInt(movePoint.y)); 
 
}, 5000, mina.easeOut);

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script> 
 

 
<svg id="svgobject" height="800" width="800"> 
 
    <g> 
 
    <rect x="50" y="50" width="50" height="50"/> 
 
    </g> 
 
</svg>

來源

2015-09-16 10:03:42 Ian

謝謝，那就是我一直在尋找的東西。現在，我只有幾條跟蹤問題的路徑：我如何讓對象開始在底部旋轉並返回頂部然後返回底部？以及如何更改旋轉方向？我嘗試了幾條路徑，但我管理的只是使旋轉半徑更小。 – Micha

你可能可以將圓的長度的1/2再回到0或任何其他值。或者創建一個具有不同起點的新路徑。 – Ian

snap.svg將對象移動到一個圓圈中

回答

相關問題