Raphael.js Animiere die Drehung eines Pfades mit einem gegebenen Mittelpunkt

7

Ich versuche das Dreieck zu animieren (denke an die Nadel eines Winkelmessers), so dass es sich an einem bestimmten Punkt dreht (siehe den roten Punkt).

%Vor%

JSFiddle Beispiel

Ich kann (ohne Animation) entlang dieses Zentrums drehen:

%Vor%

Aber ich kann nicht für das Leben von mir herausfinden, wie man die Rotation so animiert, dass sie sich um diesen Punkt dreht. Es scheint immer in der Mitte des Pfades zu rotieren.

Irgendwelche Hilfe?

    
brad 19.04.2011, 15:36
quelle

3 Antworten

8

Versuchen Sie Folgendes:

%Vor%     
Erik Dahlström 19.04.2011, 17:20
quelle
24

Seit Raphael.js Version 2.0

Um einfache Rotation zu animieren, können Sie verwenden:

yourTriangle.animate({transform: "r" + 15}, 2000);

Wo:

  • r = Rotation
  • 15 = Winkel in Grad
  • 2000 = Zeit in Millisekunden.

Um die Rotation mit gegebenem Mittelpunkt zu animieren

Sie müssen die Mittelpunktkoordinaten angeben:
yourTriangle.animate({transform: "r60" + "," + centerX + "," + centerY}, 2000);

JSFiddle-Beispiel

Sie müssen also string als Objekteigenschaft verwenden: {transform: "r15"} oder {transform: "r15, centerX, centerY"} .

    
Zakhar 30.11.2011 14:39
quelle
4

Um einen Pfad um einen gegebenen Punkt zu drehen, z.B. Am Ende einer Zeile verwenden Sie Folgendes:

%Vor%     
thomas 18.01.2012 13:06
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset C # Erweiterung Methode - String Split, der auch ein Escape-Zeichen akzeptiert