Objet Dragable et Rotatif dans Javascript (Mootools)

Question

Ok, je me sens comme un grand mannequin pour ne pas me souvenir des mathématiques correctives, mais pour la vie de moi, je ne me souviens pas comment faire de la trigonométrie de base (je suis un développeur backend donc je n'ai littéralement jamais utilisé cela dans ma vie).

Je travaille sur un objet déplaçable/pivotant dans MooTools qui ressemble un peu au processus de mise à l'échelle et de rotation des images dans Photoshop. Fondamentalement, 5 éléments de contrôle. Le centre entraîne l'objet et les commandes de coin font pivoter l'objet. La meilleure façon de le montrer:

var Box = new Class({ 

    element: null, 
    boxes: {}, 
    rotators: {}, 
    draggers: {}, 
    size: 10, 
    controls: { 
     'center': { 
      x: [45, 45], 
      y: [45, 45] 
     }, 
      'topleft': { 
      x: [0, 0], 
      y: [0, 0] 
     }, 
      'topright': { 
      x: [90, 90], 
      y: [0, 0] 
     }, 
      'bottomleft': { 
      x: [0, 0], 
      y: [90, 90] 
     }, 
      'bottomright': { 
      x: [90, 90], 
      y: [90, 90] 
     } 
    }, 

    initialize: function (el) { 

     // the element to use 
     this.element = el; 

     // Create dragger boxes 
     Object.each(this.controls, function (value, key, i) { 

      // Boxes 
      this.boxes[key] = new Element('div', { 
       'id': key, 
        'class': 'box', 
      }).setStyles({ 
       'left': value.x[0] + 'px', 
       'top': value.y[0] + 'px', 
       'height': this.size + 'px', 
       'width': this.size + 'px' 
      }).inject(this.element); 

      // Draggers 
      this.draggers[key] = new Drag(key, { 
       limit: { 
        x: value.x, 
        y: value.y 
       }, 
       onDrag: function (el, e) { 

        // Get this 
        el.addClass('dragging'); 

        // The center moves it 
        if (el.id == 'center') { 

         // Move it around 
         el.getParent().setStyles({ 
          left: (e.client.x - 45), 
          top: (e.client.y - 45) 
         }); 

         // Else, rotating 
        } else { 

         // Get the current rotation of the object 
         var rotation = el.getParent().getStyle('transform'); 

         // If it hasn't been set (for whatever reason) 
         if (rotation == null) rotation = "0"; 

         // The coordinates of the box clicked 
         var center = $('center').getCoordinates(); 
         var coords = el.getCoordinates(); 

         // Rotate 
         var rotate = (rotation.replace(/[A-Za-z\(\)$-]/g, "")).toInt() + 2; 

         // Log the rotation 
         console.log(rotate); 

         // Set the styling for the parent 
         el.getParent().setStyles({ 
          'transform': 'rotate(' + rotate + 'deg)', 
           '-o-transform': 'rotate(' + rotate + 'deg)', 
           '-ms-transform': 'rotate(' + rotate + 'deg)', 
           '-webkit-transform': 'rotate(' + rotate + 'deg)' 
         }); 

         // if 
        } 

       }, 
       onComplete: function (el) { 
        el.removeClass('dragging'); 
       } 
       // draggers 
      }); 

      // bind it all together 
     }.bind(this)); 

     // initialize 
    } 

    // box 
}); 

new Box($('box')); 

J'ai la partie draggable et la pièce de rotation là-bas, mais je ne peux pas comprendre comment calculer l'angle de rotation. Quelqu'un peut-il aider un grand mannequin avec ce problème?

est ici le terrain de jeu: http://jsfiddle.net/jessejamesrichard/j4uV2/3/

Un million grâce à l'avance.

Answer 1

Cette question n'a pas grand-chose à voir avec Mootools, puisque vous avez déjà toutes les pièces JS/Mootools qui fonctionnent complètement - il ne vous reste plus qu'à remplacer le +2 par le bon angle. .

Pour calculer l'angle correct, je recommande d'enseigner la rotation de leur rotation de base par rapport au centre, c.-à-d. 45, 135, 225 et 315 degrés. Ensuite, lorsque l'un d'eux est déplacé, vous faites Math.atan2(e.client.y - center.y, e.client.x - center.x) pour obtenir la rotation en radians par rapport au centre, le convertissez en degrés en multipliant par (180/Math.PI), ajoutez la rotation de base du coin de glissement et appliquez ce résultat à la transformation.

Devrait fonctionner, mais je vous laisse le défi de la mise en place réelle;)