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

相关推荐

  1. css 多种动画效果

    2024-02-08 01:06:02       44 阅读
  2. js实现走马灯效果

    2024-02-08 01:06:02       40 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-02-08 01:06:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-02-08 01:06:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-02-08 01:06:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-02-08 01:06:02       18 阅读

热门阅读

  1. PyTorch自动微分模块torch.autograd的详细介绍

    2024-02-08 01:06:02       31 阅读
  2. 蓝桥杯-“山”形数字个数(python版)

    2024-02-08 01:06:02       33 阅读
  3. Xilinx FPGA——在线升级

    2024-02-08 01:06:02       33 阅读
  4. 【力扣hot100】刷题笔记Day4

    2024-02-08 01:06:02       36 阅读
  5. SpringBoot实现即时通讯

    2024-02-08 01:06:02       24 阅读
  6. Centos7部署MetaBase-v0.48.3

    2024-02-08 01:06:02       32 阅读
  7. 【力扣】复写零,栈+双指针法

    2024-02-08 01:06:02       31 阅读
  8. LeetCodeLCR 114. 火星词典——拓扑排序

    2024-02-08 01:06:02       32 阅读
  9. Kylin系统下Qt的各种中文问题解决思路

    2024-02-08 01:06:02       33 阅读
  10. 1755. 最接近目标值的子序列和

    2024-02-08 01:06:02       32 阅读
  11. zstd字典压缩的大数据生产实践 & ctf逆向出题启发

    2024-02-08 01:06:02       28 阅读