JavaScript - 将图像旋转到两个值之间的 Angular 并重新定位图像中心

Question

我正在尝试实现一个仪表，我有两个硬编码值 - min (0) 和 max (200 )，然后通过ajax返回计算值。

为简单起见，假设该值为 100，然后我尝试找出将图像旋转到的正确 Angular 。

我知道在我的脑海中它是 0 度(值 0 是 -90 度，200 是 +90 度)，但我似乎找不到正确的公式来以编程方式计算它。

然后，如果返回正确的 Angular 并且图像旋转，则图像的底部将偏离中心，因此也需要重新计算(left 和 顶部位置)。

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

演示: http://jsfiddle.net/2uj5n/1/