Javascript中的可拖动和可旋转对象（Mootools）

Question

好吧，我觉得自己像是一个不记得补救数学的大虚拟物，但对于我的生活，我不记得如何做基本的三角学（我是一个后端开发人员，所以我从字面上从未在我的生活中使用过）。

我正在使用MooTools中的可拖动/可旋转对象，它有点类似于Photoshop中缩放和旋转图像的过程。基本上5个控制元素。中心拖动对象，角落控件旋转对象。显示它的最佳方式：

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')); 

我已经得到了部分拖动并在那里旋转件，但我想不出如何计算旋转角度。任何人都可以帮助这个问题的大虚拟？

这里的游乐场： http://jsfiddle.net/jessejamesrichard/j4uV2/3/

一百万在此先感谢。

Answer 1

这个问题实际上并没有太多与Mootools有关的事情，因为您已经完全使用了所有JS/Mootools零件 - 您所剩下的只是用正确的一个替换了新角度的+2 。

为了计算正确的角度我建议'教'旋转拉动他们相对于中心的基本旋转，即。 45度，135度，225度和315度。然后当其中一个被拖动时，您执行Math.atan2(e.client.y - center.y, e.client.x - center.x)以获得相对于中心的弧度旋转，通过乘以(180/Math.PI)将其转换为度数，将拖动角的基本旋转添加到它，并将该结果应用于转换。

应该可以工作，但我要离开你挑战的实际把它放在一起;）