的JavaScript - 旋轉圖像，以角兩個值，並重新定位影像中心

Question

我想實現一個計之間，我有兩個硬編碼值 - 一個min（0）和max（200），然後計算出的值通過AJAX返回。

爲簡單起見，我們假設該值爲100，然後我試圖找出將圖像旋轉到的正確角度。

我知道在我的腦海它的0度（價值0是-90度200是+90度），但我似乎無法找到正確的公式來編程計算。

然後，如果返回了正確的角度並旋轉了圖像，則圖像底部將偏離中心，因此需要重新計算（left和top位置）。

小提琴：http://jsfiddle.net/2uj5n/

的JavaScript

$(document).ready(function() { 

    var data = [{"count":100}]; // from ajax 

    var error_rate = data[0].count; 

    var max = 200; 

    if (error_rate > max) { 
     max = error_rate 
     $('div.max-label').text(max); 
    } 

    $('#pointer_value').text(error_rate); 

    var x = 0; 
    var y = max; 

    var theta = Math.atan2(-y, x); 

    if (theta < 0) { 
     theta += 2 * Math.PI; 
    } 

    var degree = theta * (180/Math.PI); // 270 degrees - result should be 0 


    var img = $('img.pointer'); 
    img.css('-moz-transform', 'rotate(' + degree + 'deg)'); 
    img.css('-webkit-transform', 'rotate(' + degree + 'deg)'); 
    img.css('-o-transform', 'rotate(' + degree + 'deg)'); 
    img.css('-ms-transform', 'rotate(' + degree + 'deg)'); 

}); 

HTML

<article class="widget"> 
    <div class="widget-inner"> 
     <header> 
      <h1>Todays Error Rate</h1> 
     </header> 

     <section class="widget-body"> 
      <div class="widget-canvas"> 

       <div id="pointer_value" class="value">0</div> 
       <div class="scale"> 
        <div class="pointer-canvas"> 
         <img class="pointer" src="https://d28q98t4icjy0h.cloudfront.net/assets/icons/geckometer-pointer.png" /> 
        </div> 
       </div> 
       <div class="min"> 
        <div class="t-tertiary">Min Errors</div> 
        <div class="min-label">0</div> 
       </div> 
       <div class="max"> 
        <div class="t-tertiary">Max Errors</div> 
        <div class="max-label">200</div> 
       </div> 
       <div class="clearfix"></div> 
      </div> 
     </section> 
    </div> 
</article> 

CSS

div.widget-canvas div.value { 
    font-size: 48px; 
    text-align: center; 
    line-height: 36px; 
} 

div.widget-canvas .scale { 
    width: 143px; 
    height: 65px; 
    margin-left: 27px; 
    background: url(https://d28q98t4icjy0h.cloudfront.net/assets/icons-sced228de5c-269bfee7198436f43fe1f1efdf4d274c.png) no-repeat; 
    background-position: 0 -343px; 
    position: relative; 
    margin: 50px auto 10px auto; 
} 

div.min { 
    float: left; 
} 

div.min-label { 
    color: #28b779; 
} 

div.max { 
    float: right; 
    text-align: right; 
} 

div.max-label { 
    color: #d84a38; 
    text-align: right; 
} 

div.widget-canvas .main-stat { 
    font-size: 60px; 
    height: 60px; 
    line-height: 60px; 
} 

div.widget-canvas .secondary-stat { 
    font-size: 48px; 
    height: 48px; 
    margin: 30px 0 0; 
    position: relative; 
} 

div.widget-canvas .pointer-canvas { 
    width: 48px; 
    height: 48px; 
    left: 50px; 
    position: relative; 
    top: 30px; 
} 

div.widget-canvas img.pointer { 
    -moz-transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
} 

Answer 1

只需使用以下命令：

// calculate angle based on proportion 
var degree = 180 * error_rate/max; 

// rotate pointer container but not image 
var img = $('.pointer-canvas'); 

DEMO：http://jsfiddle.net/2uj5n/1/

Answer 2

如果你想有一個公式在-90 to 90變換0 to 200則：

0 is -90 degrees 
100 is 0 degrees 
200 is 90 degress 

所以

function rotation(input) { 
    return (input-100) * .9; 
}