移動對象的JavaScript

enter image description here 移動對象的JavaScript

以上僅僅是形象得到一個鏈接撥弄它的作用是什麼問題。

我想沿圓移動一個物體（實際上是一個邊框半徑= 100％的矩形畫布，因此表現爲圓形）。但只能移動它，並且不能抵消圈內的移動）

這是我的JS Fiddle Link。注：請JS代碼向下滾動，並查看下以下意見寫的唯一的代碼

//---- Code of interest begins-----//到// ---感興趣的代碼結束--- //

我所需的輸出會像這個輪子farbtastic。雖然它是開源但我一直無法使用它的鼠標移動事件代碼在我的色輪

雖然試圖尋找，我發現Canvas move object in circle 但我不能使用它，因爲我不知道d，不知道是什麼是across。所以無法獲得theta arccos(1-(d/r)^2/2)

來源

2014-05-25 Sami

我認爲最簡單的方法是計算角度並將css3旋轉變換應用到元素。

我讓你在這裏的例子..

閱讀評論，特別是在旋轉（）函數

http://jsfiddle.net/Z37FF/3/

HTML

<body> 
     <div id="circle"> 
     <div id="circle-in"></div> 
     <div id="picker"> 
     <div id="picker-circle"></div> 
     </div> 
     </div> 
    </body>

CSS

#circle{ 
     position: relative; 
     width: 300px; 
     height: 300px; 
     border-radius: 50%; 
     background: #000; 
    } 

    #circle-in{ 
     position: absolute; 
     top: 35px; 
     left: 35px; 
     width: 230px; 
     height: 230px; 
     border-radius: 50%; 
     background: #fff; 
    } 

    #picker{ 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     height: 30px; 
     margin-top: -15px; 
     width: 50%; 

     /* important: sets the transform origin to the center of the circle */ 
     transform-origin: center left; 
    } 

    #picker-circle{ 
     width: 30px; 
     height: 30px; 
     border-radius: 50%; 
     background: #fff; 
     margin: 0 3px 0 auto; 
     cursor: move; 
    }

document.addEventListener('DOMContentLoaded', function(){ 
    var circle = document.getElementById('circle'), 
     picker = document.getElementById('picker'), 
     pickerCircle = picker.firstElementChild, 
     rect = circle.getBoundingClientRect(), 

     center = { 
      x: rect.left + rect.width/2, 
      y: rect.top + rect.height/2 
     }, 

     rotate = function(x, y){ 
      var deltaX = x - center.x, 
       deltaY = y - center.y, 

      // The atan2 method returns a numeric value between -pi and pi representing the angle theta of an (x,y) point. 
      // This is the counterclockwise angle, measured in radians, between the positive X axis, and the point (x,y). 
      // Note that the arguments to this function pass the y-coordinate first and the x-coordinate second. 
      // atan2 is passed separate x and y arguments, and atan is passed the ratio of those two arguments. 
      // * from Mozilla's MDN 

      // Basically you give it an [y, x] difference of two points and it give you back an angle 
      // The 0 point of the angle is right (the initial position of the picker is also right) 

       angle = Math.atan2(deltaY, deltaX) * 180/Math.PI 

      // Math.atan2(deltaY, deltaX) => [-PI +PI] 
      // We must convert it to deg so... 
      ///Math.PI => [-1 +1] 
      // * 180 => [-180 +180] 

      return angle 
     }, 

     // DRAGSTART 
     mousedown = function(event){ 
      event.preventDefault() 
      document.body.style.cursor = 'move' 
      mousemove(event) 
      document.addEventListener('mousemove', mousemove) 
      document.addEventListener('mouseup', mouseup) 
     }, 

     // DRAG 
     mousemove = function(event){ 
      picker.style.transform = 'rotate(' + rotate(event.x, event.y) + 'deg)' 
     }, 

     // DRAGEND 
     mouseup = function(){ 
      document.body.style.cursor = null; 
      document.removeEventListener('mouseup', mouseup) 
      document.removeEventListener('mousemove', mousemove) 
     } 



    // DRAG START 
    pickerCircle.addEventListener('mousedown', mousedown) 

    // ENABLE STARTING THE DRAG IN THE BLACK CIRCLE 
    circle.addEventListener('mousedown', function(event){ 
     if(event.target == this) mousedown(event) 
    }) 
})

來源

2014-05-25 20:25:13 rawiro

謝謝..很高興看到有人會幫助。但是，請確保小提琴鏈接正在工作..它可能是，但可能無法拖動對象任何 – Sami

我敢肯定這是因爲小提琴只設置轉換，但不是webkitTransform（在舊的鉻變換不支持）試試這個[http://jsfiddle.net/Z37FF/1/](http://jsfiddle.net/Z37FF/1/） – rawiro

在Chrome中工作，但沒有遵循圓圈 – Sami

移動對象的JavaScript

回答

相關問題