实现带刻度滑尺

wxml 布局

<view><view class="value">{{value}}</view><scroll-view scroll-x="true" bindscroll="bindscroll" scroll-left="{{scrollLeft}}"><canvas canvas-id="canvas-ruler" id="canvas-ruler"style="height: {{canvasHeight}}px; width: {{canvasWidth}}px;"></canvas></scroll-view><canvas canvas-id="canvas-cursor" id="canvas-cursor"></canvas>
</view>

wxss 样式

page {display: flex;flex-direction: column;
}/* value */
.value {color: #48c23d;font-size: 100rpx;text-align: center;line-height: 140rpx;
}/* value单位 */
.value:after {font-size: 16px;color: gray;content: 'mmhg';margin-left: 5px;
}/* 画布 */
#canvas-ruler {width: 1000px;/*height: 80px;*//*border: 1px solid #ccc;*/
}/* 游标 */
#canvas-cursor {width: 100%;height: 40px;/*border: 1px solid #cc1;*/
}

var that;
var deltaX = 0;
var minValue = 1;
var app = getApp();
Page({data: {value: 0,canvasHeight: 80},onLoad: function (options) {that = this;// 绘制标尺that.drawRuler();// 绘制三角形游标that.drawCursor();},drawRuler: function() {/* 1.定义变量 */// 1.1 定义原点与终点，x轴方向起点与终点各留半屏空白var origion = {x: app.screenWidth / 2, y: that.data.canvasHeight};var end = {x: app.screenWidth / 2, y: that.data.canvasHeight};// 1.2 定义刻度线高度var heightDecimal = 50;var heightDigit = 25;// 1.3 定义文本标签字体大小var fontSize = 20;// 1.4 最小刻度值// 已经定义在全局，便于bindscroll访问// 1.5 总刻度值var maxValue = 200;// 1.6 当前刻度值var currentValue = 20;// 1.7 每个刻度所占位的pxvar ratio = 10;// 1.8 画布宽度var canvasWidth = maxValue * ratio + app.screenWidth - minValue * ratio;// 设定scroll-view初始偏移that.setData({canvasWidth: canvasWidth,scrollLeft: (currentValue - minValue) * ratio});/* 2.绘制 */// 2.1初始化contextconst context = wx.createCanvasContext('canvas-ruler');// 遍历maxValuefor (var i = 0; i <= maxValue; i++) {context.beginPath();// 2.2 画刻度线context.moveTo(origion.x + (i - minValue) * ratio, origion.y);// 画线到刻度高度，10的位数就加高context.lineTo(origion.x + (i - minValue) * ratio, origion.y - (i % ratio == 0 ? heightDecimal : heightDigit));// 设置属性context.setLineWidth(2);// 10的位数就加深context.setStrokeStyle(i % ratio == 0 ? 'gray' : 'darkgray');// 描线context.stroke();// 2.3 描绘文本标签context.setFillStyle('gray');if (i % ratio == 0) {context.setFontSize(fontSize);// 为零补一个空格，让它看起来2位数，页面更整齐context.fillText(i == 0 ? ' ' + i : i, origion.x + (i - minValue) * ratio - fontSize / 2, fontSize);}context.closePath();}// 2.4 绘制到contextcontext.draw();},drawCursor: function () {/* 定义变量 */// 定义三角形顶点 TODO xvar center = {x: app.screenWidth / 2, y: 5};// 定义三角形边长var length = 20;// 左端点var left = {x: center.x - length / 2, y: center.y + length / 2 * Math.sqrt(3)};// 右端点var right = {x: center.x + length / 2, y: center.y + length / 2 * Math.sqrt(3)};// 初始化contextconst context = wx.createCanvasContext('canvas-cursor');context.moveTo(center.x, center.y);context.lineTo(left.x, left.y);context.lineTo(right.x, right.y);// fill()填充而不是stroke()描边，于是省去手动回归原点，context.lineTo(center.x, center.y);context.setFillStyle('#48c23d');context.fill();context.draw();},bindscroll: function (e) {// deltaX 水平位置偏移位，每次滑动一次触发一次，所以需要记录从第一次触发滑动起，一共滑动了多少距离deltaX += e.detail.deltaX;var value = (- deltaX / 10 + minValue).toFixed(1)if (value < 0.01) {value = 0;} else if (value >= 200.0) {value = 200.0;}// 数据绑定that.setData({value: value});// console.log(deltaX)},
});

转载至 https://my.oschina.net/huangxiujie/blog/865634

微信小程序实现带刻尺度滑块相关推荐

小程序提交表单mysql_GitHub - kun19911227/minipro: 微信小程序提交带图片的表单
minipro 微信小程序提交带图片的表单目录说明 upload_images ├── pages │ ├── upload_info 提交表单 │ └── display_info 信息展示 ├─ ...
微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下效果如图 WXML WXSS .Carousel{ margin-top: 49px; background-color ...
微信小程序中带参数返回上一页的方法总结（三种）
本篇文章给大家带来的内容是关于微信小程序中带参数返回上一页的方法总结(三种),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 方法一把当前页面数据放入本地缓存( wx.setStor ...
微信小程序获取带表情的微信名乱码问题
微信小程序获取带表情的微信名乱码问题在后台获取完微信用户数据后,对微信名进行UTF-8编码 URLEncoder.encode(nickName, "utf-8") ,将编码后的 ...
微信小程序组件 —— 带搜索功能的选择器
微信小程序组件 -- 带搜索功能的选择器效果组件 search-picker 文件 wxml 文件: <view class="search-picker">< ...
微信流媒体直播java_微信小程序直播带货教程
微信小程序直播带货教程微信小程序正式推出直播带货组件,很多正在使用 "api工厂" 的用户,这几天一直在问,现有小程序如何使用直播带货的功能,需要不需要做很复杂的改动?是否需要重 ...
微信小程序路径带参数跳转
微信小程序路径带参数跳转 release_con: function () {console.log(this.data.cateid)wx.navigateTo({url: '/pages/rele ...
【微信小程序】带你做一个公众号留言系统（附源码）
公众号留言小程序正式开源,文章底部有源码获取方式. 我当时就用微信小程序做了一个留言助手,用了大约一个月左右的时间,留言系统的基本功能包括留言.点赞.筛选.置顶.删除.关联多个公众号等,只需要把小程序 ...
微信小程序自带地图_小程序丨教你：如何打开小程序如何打开微信自带的地图（附源码）...
教你小程序系列教程:教你小程序系列教程: 1.教你:微信小程序如何实现scroll-view隐藏滚动条 2.教你:如何使用scroll-view组件实现视图垂直滚动(附源码) 3.教你:小程序如何使用 ...
android 微信小程序 gps 飘,微信小程序自带 GPS 定位的坑
微信小程序打卡定位调试了一天始终差五百多米.百度坐标转换各种问题都找了都没问题,最终发现是小程序自带定位有问题,文档里也没有写,大坑. const getLocation = function(cal ...

微信小程序实现带刻尺度滑块

实现带刻度滑尺

微信小程序实现带刻尺度滑块相关推荐

最新文章

热门文章

微信小程序 实现带刻尺度滑块

实现带刻度滑尺

微信小程序 实现带刻尺度滑块相关推荐

最新文章

热门文章

微信小程序实现带刻尺度滑块

微信小程序实现带刻尺度滑块相关推荐