微信小程序canvas区间滑动选取

cancas一般用于小程序的绘图,那么在微信小程序canvas区间滑动选取中要如何制作。下面为大家解答。

 

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


微信小程序canvas区间滑动选取

  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.  

【本站声明】
  1、本站文章中所选用的图片及文字来源于网络以及用户投稿,由于未联系到知识产权人或未发现有关知识产权的登记,如有知识产权人并不愿意我们使用,如果有侵权请立即联系。
  2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责,仅系客观性描述,如您需要了解该类商品/服务详细的资讯,请您直接与该类商品/服务的提供者联系。


KESION 科汛软件

KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商,长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。

KESION 不断通过技术创新,提供产品和服务,助力企业向数字化转型,通过科技驱动商业革新,让商业变得更智慧!



▼点击进入科汛官网了解更多



热门标签
微信小程序 SaaS
上/下篇
  • 微信小程序用户画像API,获取小程序新增或活跃用户的画像分布数据

  • 微信小程序判断页面滑动方向

换一换相关推荐
精选内容
热点精选