摘要：主要功能就是拖動標(biāo)尺變動價格。整個標(biāo)尺的長度為，步長為元。金額顯示首先，增加一個輸入框，然后獲取它。輸入金額移動標(biāo)尺標(biāo)尺的移動除了拖動以外，我們也希望通過金額輸入框來達(dá)到。

效果源碼

終于到年底了，再過兩天我也要回家過年了，想想就激動呢！今天給大家?guī)硪粋€基于移動端的canvas價格選擇效果。

主要功能就是拖動標(biāo)尺變動價格。而且支付寶和京東金融的里也有這樣的效果（果然天下設(shè)計都是你抄我我抄你啊?）。

效果演示地址

整個效果的核心就是用canvas繪制的標(biāo)尺。一共包括標(biāo)尺主體，數(shù)字，和中間固定不變的標(biāo)定軸，這幾個部分都用canvas繪制。最上面的大號價格文字，因為其他地方會需要用它來計算相關(guān)的收益。所以，我們就用個DOM來呈現(xiàn)，這樣比較方便獲取。

標(biāo)尺拖動的距離與價格之間有有一個映射關(guān)系，是整個效果最不好處理的部分，在具體處理到相關(guān)問題的時候我們再做分析?，F(xiàn)在，我們先實現(xiàn)基礎(chǔ)的標(biāo)尺繪制。

我們先定義一個類叫Rule.js, 其具體屬性如下。

現(xiàn)在我們來了解一下每個屬性的含義：

x, y: 標(biāo)尺的坐標(biāo)位置

vx: 標(biāo)尺的移動速度

ax: 標(biāo)尺移動加速度

color: 繪制標(biāo)尺線條的顏色，與文字顏色

scaleX, scaleY: 縮放比

markShort, markLong: 標(biāo)尺長短線的長度

textHeight: 文字距離標(biāo)尺主體的高度

min, max: 要展示的最大值和最小值

width: 標(biāo)尺的像素寬度

step: 步長

seg: 段數(shù)

pxStep: 在canvas上的實際步長(單位為px)

minPxStep: 每個pxStep分10小段，每小段的實際像素寬度

lineBottom: 底部橫線參數(shù)

lineRed: 標(biāo)定軸參數(shù)

參數(shù)比較多，但真正需要傳入的參數(shù)其實并不是很多。這里我講解一下（8）~（15）這幾個參數(shù)的思路。

min， max : 參數(shù)的作用是設(shè)置需要顯示的最大金額和最小金額。這兩個參數(shù)是外部傳入的，比如設(shè)定用戶最小能存100元，最大能存100000萬元。那么min和max就分別對應(yīng)100和100000。

width : 是整個標(biāo)尺的實際屏幕長度，比如你只想標(biāo)尺繪制1000px,那這里就傳1000就好了。

step : 步長的含義就是每隔多少分一段，比如我們設(shè)定的最大金額為10000元， 那設(shè)置step為1000就意味著，每隔1000元表示一個小段，這也是canvas上標(biāo)尺刻度需要繪制的數(shù)據(jù)。

seg : 段數(shù)等于總金額max除以step。

pxStep : 為真正映射到canvas上的像素步長。

miniPxStep : 每個pxStep分為10小段，每小段的像素距離。

lineBottom : 獨立出來不和標(biāo)尺刻度一起繪制，在繪制標(biāo)尺的底部橫線時，我是這樣想的。底部橫線的寬度其實就是canvas的寬度，沒必要從標(biāo)尺的初始畫到標(biāo)尺的結(jié)尾。而且為了用戶體驗，刻度的初始位置和結(jié)束位置都位于整個canvas的中心。所以，如果合在一起繪制，你需要先繪制一段沒刻度的橫線，然后再繪制刻度，到最后還要繪制一段沒刻度的橫線。這給無疑讓繪制和后續(xù)的標(biāo)尺移動變得相當(dāng)麻煩。所以我把它抽出來，就是一條貫穿canvas的普通橫線。

lineRed : 標(biāo)定軸，始終在canvas的中間，也獨立出來不和標(biāo)尺刻度一起繪制。

屬性都有了，下面添加一個draw方法，把我們的標(biāo)尺繪制出來。

a) 繪制標(biāo)尺刻度部分

這里有個截圖錯誤，應(yīng)該是i+=this.miniPxStep。這應(yīng)該不難理解，就是每隔miniPxStep繪制一次線段，線段的類型根據(jù)n這個變量來確定。

b) 繪制標(biāo)尺文字部分

文字的繪制不能以真實的屏幕像素為準(zhǔn)，必須映射到金額上，所以，這里繪制的數(shù)字是（n/10）* this.step。同時，還做了一個特殊的處理，就是初始值是1，不是0。因為，我們的金額不允許輸入0元。如果你不需要這個，把這里注釋掉就ok了。

c) 繪制底部橫線

d) 繪制標(biāo)定軸

這樣整個標(biāo)尺就完成了，rule.js文件在頂部的github中。現(xiàn)在我們調(diào)用一下這個文件，看看畫出來的效果怎樣。

這里我們設(shè)置了最大額度為100000元，最小額度為500元。整個標(biāo)尺的長度為5000px，步長step為1000元。效果圖如下：

讓標(biāo)尺偏移個200px, 比如設(shè)置: x: ruleX - 200, 效果如下：

設(shè)置步長step為500,效果如下：

ok，現(xiàn)在靜態(tài)標(biāo)尺就繪制完成，下一步就要完成交互功能，讓標(biāo)尺能夠跟隨鼠標(biāo)滾動，并且展示當(dāng)前拖動的金額。

現(xiàn)在我們開始實現(xiàn)標(biāo)尺的拖動。標(biāo)尺的拖動原理很簡單，就是讓標(biāo)尺的位置跟隨鼠標(biāo)移動。這里為了演示方便我換成了鼠標(biāo)事件，到移動端換成touch事件即可。

首先引入我們的工具函數(shù)utils.js文件，然后定義幾個變量。

isMouseDown用來判斷鼠標(biāo)是否抬起， oldX用來記錄上一次拖動的位置，mouse是使用captureMouse返回的對象，返回鼠標(biāo)在canvas上的當(dāng)前位置信息。

然后，監(jiān)聽canvas的鼠標(biāo)事件mousedown, mouseup, mousemove。并改變rule的位置。

當(dāng)鼠標(biāo)按下時，isMouseDown變?yōu)閠rue, offsetX在上面忘記寫了，它的作用是記錄鼠標(biāo)按下的位置與標(biāo)尺位置之間的偏移量。然后在鼠標(biāo)移動時標(biāo)尺的位置rule.x = mouse.x - offsetX。如果不這樣做，在點擊canvas并拖動標(biāo)尺的一瞬間，你會發(fā)現(xiàn)標(biāo)尺的初始位置會瞬移到鼠標(biāo)點擊位置，這樣體驗很不好，我們需要不管點擊哪，標(biāo)尺都會在現(xiàn)有的位置跟隨鼠標(biāo)移動。如果，無法體會，動手試一試去掉回事什么效果。

oldX也很好理解，就是記錄標(biāo)尺上一次的位置，這里還沒有用到它，后面可能會用到。
現(xiàn)在我們把標(biāo)尺的繪制寫進(jìn)動畫函數(shù)中

看看動畫效果如何。

ok，現(xiàn)在我們已經(jīng)實現(xiàn)了標(biāo)尺跟隨鼠標(biāo)的拖動。下一步，我們就把拖動的金額顯示出來。

首先，增加一個input輸入框，然后獲取它。

這里設(shè)置了輸入框的最小值為標(biāo)尺的最小額度，這里可以先不用管它。我們主要看onMouseMove函數(shù)

注意money的計算值，它為(centerX - rule.x)*rule.ratioScale。 (centerX - rule.x)比較好理解，因為，我們的標(biāo)尺是從canvas的中心點繪制的。但rule.ratioScale在最開始的構(gòu)造函數(shù)中并沒有定義。這里需要在構(gòu)造函數(shù)中加上，它的含義是每像素代表多少錢，可以認(rèn)為是圖形比例尺。

this.ratioScale = Math.floor(this.max / this.width) //比列尺

那么自然，移動距離乘以比例尺就得出錢數(shù)了。我們看看效果。

注意到上面的效果中金額顯示出現(xiàn)了負(fù)數(shù)，所以我們需要對移動范圍做限制。讓其只能在限定的最大和最小金額之間移動。

對一定范圍的限定主要分為兩部分。一、標(biāo)尺范圍的限定。二、金額顯示的限定。這兩部分我們放在一起做。

1）重設(shè)標(biāo)尺的初始位置
假設(shè)我們設(shè)置的最小金額為500元，那么初始標(biāo)定軸的位置應(yīng)該就是500元的位置。所以初始化標(biāo)尺的位置后，我們給它重置為最小金額的位置。這時候需要把金額換算一下。

rule.x = centerX - rule.min / rule.ratioScale;

就是把金額值得計算倒一下。

2）限定標(biāo)尺的移動范圍

這里定義了一個檢測邊界值得函數(shù)，當(dāng)金額小于最小投資金額時，標(biāo)尺的位置為初始位置start(注意這個初始位置是已經(jīng)被重置過的), 并且設(shè)置金額為最小額度。最大位置同理。
然后，在onMouseMove中調(diào)用。

看看效果圖。

標(biāo)尺的移動除了拖動以外，我們也希望通過金額輸入框來達(dá)到。即輸入金額，標(biāo)尺便移動到目標(biāo)金額的位置。

同時我們也做了邊界限定，當(dāng)輸入的金額小于或者大于設(shè)定值時會，設(shè)置標(biāo)尺的位置和輸入框的顯示為邊界值，看看效果。

現(xiàn)在拖動的還比較不自然，我們想要手指離開后標(biāo)尺還會繼續(xù)移動，直到速度慢慢減為0。為此，新建兩個變量。

var speed = 0, fl = 0.95; //初始速度， 摩擦系數(shù)

新建一個move函數(shù)，在動畫循環(huán)中調(diào)用。

至此，拖動輸入的核心功能就開發(fā)完了。如果你要在項目中使用，另一個需要注意的事情是canvas在移動端的模糊問題，這個已經(jīng)有了很多的解決方案，你只需要耐心調(diào)試就好。最后還是祝大家新年快樂，源碼在頭部地址哦。