找回密码
 立即注册

QQ登录

只需一步,快速开始

[工具插件] 微信小程序 canvas区间滑动选取 只做了对宽度的响应式

[复制链接]
查看: 476|回复: 181
最佳答案
0 

7

主题

7

帖子

268

积分

新人求带

积分
268
 楼主| 发表于 2017-10-31 16:20:40 | 显示全部楼层 |阅读模式
微信小程序 canvas区间滑动选取 只做了对宽度的响应式

目标js文件引用方式 import { SelectInterval } from '层级目录/selectInterval'; 目标js文件onLoad(){}里面要一下写入例如: this.selectInterval = new selectInterval({属性});
  1.                 this.selectInterval = new SelectInterval({

  2.                 canvasId:'canvas',             值必须是canvas组件的canvas-id属性的值
  3.                
  4.                 canvasHeight:100,              值必须是当前画布的高度
  5.                
  6.                 Xaxis:{left:30,right:345},     { left:30, 横条的左端 right:345, 横条的右端 }(right必须大于left,如果不传有默认值)
  7.                
  8.                 scale:[10,20,30],              刻度值Array类型,取值以一个不变数为常量不断递增,数组任何两个前后值相减要恒等于这个常量,如果数组第一个值不是0,                                      会默认在数组前面添加一个0,但是0这个值不会在canvas上显示,(当数组长度是2的时候,
  9.                                  可以设置任意大于零的数值,但第二个值必须大于第一个值);
  10.                                                                                                                                          
  11.                 Yaxis:[125,5],                 刻度值Array类型,第一个值是绘制的横条的起始高度,第二个值是横条本身的高度(如果不传默认[125,5])
  12.                
  13.                 bothEndsNear:310,              可以设置刻度值和尺度点距离横条的开头与终点的距离,不传默认居中
  14.                
  15.                 // decimalPoint:10,            刻度值/decimalPoint,可以使刻度值变小数,必须是10的倍数,可以不传
  16.                
  17.                 // rightSliderStop:true,       值为一个Boolean,可以不传;
  18.                
  19.                 showTitle:{
  20.                         name:'km',                   String类型,用作设置单位
  21.                         size:15,                     标签字体大小,Number类型
  22.                         positionX:100,               标签字体在canvas横向的位置,Number类型
  23.                         positionY:80                 标签字体在canvas纵向的位置,Number类型
  24.                 },(如果不传不会显示头部标签)
  25.                
  26.                 scaleIn:{
  27.                         name:'km',                   String类型,用作设置单位
  28.                         size:10,                     控制刻度值字体的大小,Number类型
  29.                         valueY:108,                  刻度值在canvas纵坐标的位置,Number类型
  30.                         pointY:113                   尺度点在canvas纵坐标的位置,Number类型
  31.                 },(如果不传不会显示刻度值)
  32.                
  33.                 colour:{
  34.                         title:'#1384e0',                    头部标签的字体颜色,String类型
  35.                         colorBar:['#e5e5e5','#1384e0'],     横条的颜色,Array类型,第一个是横条的底色,第二个是取值范围的颜色
  36.                         roundColor:['#ffffff','#e5e5e5'],   圆圈颜色,Array类型,第一个是圆的颜色,第二个是圆的边框颜色
  37.                         scale:['#000000','#999999']         刻度数值的字体颜色
  38.                 },(如果不传会显示上面的默认参数)
  39.                
  40.                 selectedInterval:{
  41.                         min:15,
  42.                         max:23
  43.                 },(min不能大区等于max,如果不传只会显示在横条的两端)
  44.                
  45.                 round:{
  46.                         radius:10,
  47.                         edgeLine:2
  48.                 },(如果不传会默认圆的半径为10,边框为2)
  49.                
  50.                 // image:{
  51.                 //         url:'../../assets/image/spot-a.png',   图片的本地路径
  52.                 //         width:20,                              设置图片的宽度
  53.                 //         height:24                              设置图片的高度
  54.                 // },(如果不传不会显示图片)
  55.                
  56.                 followValue:{
  57.                         color:'#f8835f',
  58.                         size:10,                                 设置字体大小
  59.                         leftY:151,                               随数值在canvas纵向的位置
  60.                         rightY:151
  61.                 }(如果不传不会显示跟随数值)
  62.         });
复制代码

/**Page({})里面创建如下属性 必须
  1. 自定义(e){ bindtouchstart
  2.         this.selectInterval.move(e.changedTouches[0].x,e.changedTouches[0].y);
  3. },

  4. 自定义(e){ bindtouchmove
  5.         this.selectInterval.meter(e.changedTouches[0].x);
  6. },

  7. 自定义(e){ bindtouchend
  8.         this.selectInterval.texthints((min,max)=>{
  9.                 参数min/max返回的值是最小/大价格,超过最大值max返回null
  10.                 console.log(min,max);
  11.         });
  12. },

  13. <canvas canvas-id="canvas" bindtouchstart="自定义" bindtouchmove="自定义" bindtouchend="自定义"></canvas>
  14. 画布css样式width:100%;box-sizing: border-box;height: 自定义rpx;
复制代码

**/

游客,如果您要查看本帖隐藏内容请回复
回复

使用道具 举报

最佳答案
0 

0

主题

226

帖子

986

积分

专家路上

积分
986
发表于 2017-10-31 16:23:47 | 显示全部楼层
zzzzzz111111
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

226

帖子

986

积分

专家路上

积分
986
发表于 2017-10-31 16:23:51 | 显示全部楼层
1111111111111111
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

226

帖子

986

积分

专家路上

积分
986
发表于 2017-10-31 16:24:02 | 显示全部楼层
111111111111111
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

226

帖子

986

积分

专家路上

积分
986
发表于 2017-10-31 16:24:06 | 显示全部楼层
111111111111111
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

226

帖子

986

积分

专家路上

积分
986
发表于 2017-10-31 16:24:11 | 显示全部楼层
111111111111111
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

226

帖子

986

积分

专家路上

积分
986
发表于 2017-10-31 16:24:15 | 显示全部楼层
111111111111111
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

226

帖子

986

积分

专家路上

积分
986
发表于 2017-10-31 16:24:19 | 显示全部楼层
111111111111111
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

226

帖子

986

积分

专家路上

积分
986
发表于 2017-10-31 16:24:23 | 显示全部楼层
111111111111111
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

226

帖子

986

积分

专家路上

积分
986
发表于 2017-10-31 16:24:27 | 显示全部楼层
111111111111111
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com