微信小程序canvas區(qū)間滑動選取

cancas一般用于小程序的繪圖，那么在微信小程序canvas區(qū)間滑動選取中要如何制作。下面為大家解答。

目標(biāo)js文件使用 import 引入; 然后在onLoad(){}里面要一下寫入例如: this.selectInterval = new selectInterval({屬性});

1. this.selectInterval = new SelectInterval({
2.  
3. canvasId:'canvas', 值必須是canvas組件的canvas-id屬性的值
4.  
5. canvasHeight:100, 值必須是當(dāng)前畫布的高度
6.  
7. Xaxis:{left:30,right:345}, { left:30, 橫條的左端 right:345, 橫條的右端 }(right必須大于left,如果不傳有默認(rèn)值)
8.  
9. scale:[10,20,30], 刻度值A(chǔ)rray類型,取值以一個不變數(shù)為常量不斷遞增,數(shù)組任何兩個前后值相減要恒等于這個常量,如果數(shù)組第一個值不是0, 會默認(rèn)在數(shù)組前面添加一個0,但是0這個值不會在canvas上顯示,(當(dāng)數(shù)組長度是2的時候,
10. 可以設(shè)置任意大于零的數(shù)值,但第二個值必須大于第一個值);
11.  
12. Yaxis:[125,5], 刻度值A(chǔ)rray類型,第一個值是繪制的橫條的起始高度,第二個值是橫條本身的高度(如果不傳默認(rèn)[125,5])
13. manner:true, 切換選擇滑動點(diǎn)的上方在滑動的時候是否有跟隨圓球，如果值為false那么明確顯示區(qū)間滑動所得的最小值與最大值
14. bothEndsNear:310, 可以設(shè)置刻度值和尺度點(diǎn)距離橫條的開頭與終點(diǎn)的距離,不傳默認(rèn)居中
15.  
16. // decimalPoint:10, 刻度值/decimalPoint,可以使刻度值變小數(shù),必須是10的倍數(shù),可以不傳
17.  
18. // rightSliderStop:2, 值為一個Boolean或者在manner的值為true的時候可填number,可以不傳;而number的值就是最大值與最小值的差，設(shè)置后兩個滑動點(diǎn)是不會滑動到小于這個number的距離
19.  
20. showTitle:{
21. name:'km', String類型,用作設(shè)置單位
22. size:15, 標(biāo)簽字體大小,Number類型
23. title:'#1384e0', 頭部標(biāo)簽的字體顏色或者圓球里面的字體顏色,String類型
24. positionX:100, 標(biāo)簽字體在canvas橫向的位置,Number類型，只有manner為false或者不傳的時候生效
25. positionY:80, 標(biāo)簽字體或者圓球在canvas縱向的位置,Number類型
26. isfollow:{ 跟隨圓球大小與顏色的設(shè)置,manner的值為false或不傳的時候,這個屬性可以不給
27. view:true, manner的值為true時，view的值必須為true
28. roundSize:12, 圓球大小
29. roundColor:'rgba(10, 113, 238, 0.8)' 圓球的顏色
30. }
31. },(如果不傳不會顯示頭部標(biāo)簽)
32.  
33. scaleIn:{
34. name:'km', String類型,用作設(shè)置單位
35. size:10, 控制刻度值字體的大小,Number類型
36. valueY:108, 刻度值在canvas縱坐標(biāo)的位置,Number類型
37. pointY:113 尺度點(diǎn)在canvas縱坐標(biāo)的位置,Number類型
38. },(如果不傳不會顯示刻度值)
39.  
40. colour:{
41. colorBar:['#e5e5e5','#1384e0'], 橫條的顏色,Array類型,第一個是橫條的底色,第二個是取值范圍的顏色
42. roundColor:['#ffffff','#e5e5e5'], 圓圈顏色,Array類型,第一個是圓的顏色,第二個是圓的邊框顏色
43. scale:['#000000','#999999'] 刻度數(shù)值的字體顏色
44. },(如果不傳會顯示上面的默認(rèn)參數(shù))
45.  
46. selectedInterval:{
47. min:15,
48. max:23
49. },(min不能大區(qū)等于max,如果不傳只會顯示在橫條的兩端)
50.  
51. round:{
52. radius:10,
53. edgeLine:2
54. },(如果不傳會默認(rèn)圓的半徑為10,邊框?yàn)?)
55.  
56. // image:{
57. // url:'../../assets/image/spot-a.png', 圖片的本地路徑值為String類型；值可以為數(shù)組，但是如果是數(shù)組時數(shù)組的長度必須是2
58. // width:20, 設(shè)置圖片的寬度
59. // height:24 設(shè)置圖片的高度
60. // },(如果不傳不會顯示圖片)
61.  
62. followValue:{
63. name:'', String類型,用作設(shè)置單位
64. color:'#f8835f',
65. size:10, 設(shè)置字體大小
66. leftY:151, 隨數(shù)值在canvas縱向的位置
67. rightY:151
68. }(如果不傳不會顯示跟隨數(shù)值)
69. });

/**Page({})里面創(chuàng)建如下屬性 必須

1. 自定義(e){ bindtouchstart
2. this.selectInterval.move(e.changedTouches[0].x,e.changedTouches[0].y);
3. },
4.  
5. 自定義(e){ bindtouchmove
6. this.selectInterval.meter(e.changedTouches[0].x);
7. },
8.  
9. 自定義(e){ bindtouchend
10. this.selectInterval.texthints((min,max)=>{
11. 參數(shù)min/max返回的值是最小/大價(jià)格,超過最大值max返回null
12. console.log(min,max);
13. },true);初始化時傳入manner屬性的值為true時候,這個函數(shù)的第二個參數(shù)的true就要傳,不傳也沒什么問題，只是結(jié)果會有不同;
14. },
15.  
16. <canvas canvas-id="canvas" bindtouchstart="自定義" bindtouchmove="自定義" bindtouchend="自定義"></canvas>
17. 畫布css樣式width:100%;box-sizing: border-box;height: 自定義rpx;
18.