Quelle est la meilleure façon de créer une roue pivotante utilisateur en HTML5/JavaScript?

Question

J'ai besoin de créer une roue qui sera traînée sur 360 degrés par l'utilisateur (afin d'avoir un segment spécifique de la roue placé en haut).

J'ai trouvé des exemples de roues de roulette utilisant du canevas HTML5 qui ne font que tourner une image d'une roue pendant un laps de temps aléatoire. Cependant, quand il s'agit de permettre à un utilisateur de faire glisser une roue comme ils le souhaitent, je suis perplexe.

Je préférerais aussi faire la roue de HTML/CSS plutôt que d'utiliser une image, car elle doit être mise à jour dynamiquement.

Answer 1

mmm cela ressemble à un problème de maths ...

définissent donc un point central et ensuite utiliser la trigonométrie pour définir l'angle de la ligne (à partir du point central de la souris) à l'horizon

http://en.wikipedia.org/wiki/Trigonometry

dessiner maintenant dans une toile sur le point central à l'intérieur du cnavas le weel, l'angle et redessiner le weel au besoin

Answer 2

Le cadre de dessin Sencha vous permet de faire à peu près tout ce que vous avez vu en flash, mais sans flash. Il fonctionne dans à peu près tous les navigateurs sans plugins. Il utilise SVG ou VML en fonction du navigateur. Jetez un oeil à l'exemple du tigre draggable here

Edit:

Documentation du cadre de dessin qui fait partie du cadre ExtJS plus large se trouve à: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.draw.Component

Ceci est le code que je en cloque pour un cercle/roue déplaçable. Je n'ai pas mis d'action en rotation car je pense que vous avez tout compris.

<script src="ext-all-debug.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     Ext.onReady(function() { 

      //create the drawing surface 
      var drawComponent = Ext.create('Ext.draw.Component', { 
       width: 400, 
       height: 400, 
       draggable: { 
        constrain: true, 
        constrainTo: Ext.getBody() 
       }, 
       autoShow:true, 
       floating: true, 
       renderTo: Ext.getBody(), 
       items:[{ 
        //add the circle sprite to the 
        //drawing surface 
        type: 'circle', 
        fill: '#79BB3F', 
        "stroke-width": "1", 
        stroke: "#000", 
        radius: 100, 
        x: 100, 
        y: 100 
       }] 

      }); 

     }); 
    </script> 

Answer 3

Vous voulez probablement utiliser le document pour dessiner: http://diveintohtml5.info/canvas.html

Pour faire glisser la roue, vous devrez gérer la souris, déplacer la souris et la souris jusqu'à des événements.