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

我正在尝试实现一个量表，我有两个硬编码值-a

min

（

0

）和

max

（

200

），然后通过ajax返回一个计算值

为简单起见，假设该值为

100

，然后我试图找出旋转图像的正确角度

我知道在我的头脑中它是

0

度（值

0

是

-90

度，

200

是

+90

度），但我似乎找不到正确的公式以编程方式计算它

然后，如果返回正确的角度并旋转图像，则图像的底部将偏离中心，因此也需要重新计算（

左侧

和

顶部

位置）

小提琴：

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

});

---

只需使用以下命令：

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

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

---

演示：

如果您希望公式在

-90到90中转换
0到200
，那么：

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

所以

嗯，那么这将给出90而不是0？如果输入是100，那么结果是（100-100）*.9=0。你说“为了简单起见，假设值是100，（…）我知道在我的头脑中它是0度（值0是-90度，200是+90度）（…）”啊，我想你是出于某种原因使用最大值（200）作为旋转函数的参数。我不确定这是否适用于任何值，因为它似乎是硬连接的，适用于
100
值，就是这样。100是中心的值，.9是最大输入值（200）和最大值（180度）之间的比率。您可以在那里使用可配置值：return
（输入-（MAX-MIN）/2）*（180/MAX）
// calculate angle based on proportion
var degree = 180 * error_rate / max;

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

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

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