uniapp canvas游标卡尺效果

效果

根据公司业务仿照写的效果。原项目从微信小程序转uniapp，未测试该效果在android端效果。

uniapp直接使用canvas不可做子组件，否则无效果显示，其次显示时要考虑页面渲染超时的问题。

如效果所见，可以设置取值精度。

gitee地址：project_practice: 项目练习 - Gitee.com

一 卡尺绘制

从最小值到最大值每隔10个绘制，并设置底部数字。

要左右拉取，游标在中间位置。所以在游标不动的情况下，开始绘制位置和{x:0,y:0}距离半个屏幕宽度，绘制结束位置之后也应该保留半个屏幕位置。

假设屏幕宽度为screenWidth，canvas宽度为canvasWidth，最小值为minvaule,最大值为maxvalue，每次绘制距离间隔为ratio。

canvasWidth = (maxvalue-minvaule)*ratio+screenWidth

开始绘制点为origion={x:0,y:0}，开始绘制点x坐标值公式：origion.x = screenWidth/2。

每次绘制间隔数量interval，越小绘制越密&#x