cancas一般用于小程序的绘图，，，，，那么在微信小程序canvas区间滑动选取中要怎样制作。。。。下面为各人解答。。。。

目的js文件使用 import 引入; 然后在onLoad(){}内里要一下写入例如: this.selectInterval = new selectInterval({属性});

1. this.selectInterval = new SelectInterval({
2.  
3. canvasId:'canvas', 值必需是canvas组件的canvas-id属性的值
4.  
5. canvasHeight:100, 值必需是目今画布的高度
6.  
7. Xaxis:{left:30,right:345}, { left:30, 横条的左端 right:345, 横条的右端 }(right必需大于left,若是不传有默认值)
8.  
9. scale:[10,20,30], 刻度值Array类型,取值以一个稳固数为常量一直递增,数组任何两个前后值相减要恒即是这个常量,若是数组第一个值不是0, 会默认在数组前面添加一个0,可是0这个值不会在canvas上显示,(当数组长度是2的时间,
10. 可以设置恣意大于零的数值,但第二个值必需大于第一个值);
11.  
12. Yaxis:[125,5], 刻度值Array类型,第一个值是绘制的横条的起始高度,第二个值是横条自己的高度(若是不传默认[125,5])
13. manner:true, 切换选择滑动点的上方在滑动的时间是否有追随圆球，，，，，若是值为false那么明确显示区间滑动所得的最小值与最大值
14. bothEndsNear:310, 可以设置刻度值和标准点距离横条的开头与终点的距离,不传默认居中
15.  
16. // decimalPoint:10, 刻度值/decimalPoint,可以使刻度值变小数,必需是10的倍数,可以不传
17.  
18. // rightSliderStop:2, 值为一个Boolean或者在manner的值为true的时间可填number,可以不传;而number的值就是最大值与最小值的差，，，，，设置后两个滑动点是不会滑动到小于这个number的距离
19.  
20. showTitle:{
21. name:'km', String类型,用作设置单位
22. size:15, 标签字体巨细,Number类型
23. title:'#1384e0', 头部标签的字体颜色或者圆球内里的字体颜色,String类型
24. positionX:100, 标签字体在canvas横向的位置,Number类型，，，，，只有manner为false或者不传的时间生效
25. positionY:80, 标签字体或者圆球在canvas纵向的位置,Number类型
26. isfollow:{ 追随圆球巨细与颜色的设置,manner的值为false或不传的时间,这个属性可以不给
27. view:true, manner的值为true时，，，，，view的值必需为true
28. roundSize:12, 圆球巨细
29. roundColor:'rgba(10, 113, 238, 0.8)' 圆球的颜色
30. }
31. },(若是不传不会显示头部标签)
32.  
33. scaleIn:{
34. name:'km', String类型,用作设置单位
35. size:10, 控制刻度值字体的巨细,Number类型
36. valueY:108, 刻度值在canvas纵坐标的位置,Number类型
37. pointY:113 标准点在canvas纵坐标的位置,Number类型
38. },(若是不传不会显示刻度值)
39.  
40. colour:{
41. colorBar:['#e5e5e5','#1384e0'], 横条的颜色,Array类型,第一个是横条的底色,第二个是取值规模的颜色
42. roundColor:['#ffffff','#e5e5e5'], 圆圈颜色,Array类型,第一个是圆的颜色,第二个是圆的边框颜色
43. scale:['#000000','#999999'] 刻度数值的字体颜色
44. },(若是不传会显示上面的默认参数)
45.  
46. selectedInterval:{
47. min:15,
48. max:23
49. },(min不可大区即是max,若是不传只会显示在横条的两头)
50.  
51. round:{
52. radius:10,
53. edgeLine:2
54. },(若是不传会默认圆的半径为10,边框为2)
55.  
56. // image:{
57. // url:'../../assets/image/spot-a.png', 图片的外地路径值为String类型；；值可以为数组，，，，，可是若是是数组时数组的长度必需是2
58. // width:20, 设置图片的宽度
59. // height:24 设置图片的高度
60. // },(若是不传不会显示图片)
61.  
62. followValue:{
63. name:'', String类型,用作设置单位
64. color:'#f8835f',
65. size:10, 设置字体巨细
66. leftY:151, 随数值在canvas纵向的位置
67. rightY:151
68. }(若是不传不会显示追随数值)
69. });

/**Page({})内里建设如下属性 必需

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. 参数min/max返回的值是最小/大价钱,凌驾最大值max返回null
12. console.log(min,max);
13. },true);初始化时传入manner属性的值为true时间,这个函数的第二个参数的true就要传,不传也没什么问题，，，，，只是效果会有差别;
14. },
15.  
16. <canvas canvas-id="canvas" bindtouchstart="自界说" bindtouchmove="自界说" bindtouchend="自界说"></canvas>
17. 画布css样式width:100%;box-sizing: border-box;height: 自界说rpx;
18.