jQuery UI滑塊與縮放標尺作爲高度選擇器

Question

我想解決這種棘手的輸入高度選擇器的數學。

基本上 - 我有一個jQuery UI滑塊來選擇一個高度。它以英寸爲單位遞增，最小值爲0，最大值爲120（10'高）。

隨着用戶移動滑塊，相應的標尺圖形移動。

我已經設置了與我有什麼迄今爲止這裏的jsfiddle： http://jsfiddle.net/x57Rw/

你可以看到我的數學是有點過那裏。我知道我需要縮放統治者圖形的偏移量，但不能完全包圍它。基本上尋找我需要調整以使標尺與滑塊輸入匹配（相當）正確。它不一定非常確切，但儘可能接近。任何幫助將不勝感激！

Answer 1

你的滑塊需要被放倒有點用保證金與統治者的像這樣的底部對齊：

你應該通過144實際上被分割，而不是120作爲你的統治者形象包含144英寸，並且您的滑塊應被設置爲144最大以及：

function animateRulerOffset(sliderValue) { 
    pixelOffset = 622-((sliderValue*622)/144); 
    ... 
} 

如果你真的想只有120英寸，那麼你的標尺圖像需要修改在10英尺到結束。

Answer 2

見http://jsfiddle.net/x57Rw/14/

標尺的高度爲744px，它有12' 個。

最大值爲10'，所以我們必須刪除2' - > 744 * 2/12 px（好吧，我們將它們相加，因爲之後我們乘以-1）。

然後，我們需要一個百分比。最大值爲120，所以1-sliderValue/120（好吧，它是一個一個，不是百分比）。

此百分比乘以標尺的高度減標尺容器的高度。但我們刪除了744 * 2/12px，所以我們也必須在這裏添加它（好吧，因爲之後我們乘以-1）：

pixelOffset = (744-112-744*2/12)*(1-sliderValue/120)+744*2/12;