uniapp canvas游标卡尺效果

效果

uniapp canvas游标卡尺效果_第1张图片

根据公司业务仿照写的效果。原项目从微信小程序转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

你可能感兴趣的:(前端,uni-app,前端)