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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/375621.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Qt/C++音视频开发66-音频变速不变调/重采样/提高音量/变速变调/倍速播放/sonic库使用

一、前言 之前在做倍速这个功能的时候,发现快速播放会有滴滴滴的破音出现,正常1倍速没有这个问题,尽管这个破音间隔很短,要放大音量才能听到,但是总归是不完美的,后面发现,通过修改qaudiooutpu…

用python编写爬虫,爬取二手车信息+实验报告

题目 报告要求 工程报告链接放在这里 https://download.csdn.net/download/Samature/88805518使用 1.安装jupyter notebook 2.用jupyter notebook打开工程里的ipynb文件,再run all就行 注意事项 可能遇到的bug 暂无,有的话私信我

跟着pink老师前端入门教程-day20

二、移动WEB开发之flex布局 1、flex 布局体验 1.1 传统布局与flex布局 传统布局:兼容性好、布局繁琐、局限性、不能再移动端很好的布局 flex弹性布局:操作方便,布局极为简单,移动端应用很广泛;PC 端浏览器支持情况…

【HTML】MDN

文章目录 一、html元素1.1 <a>1.2 <abbr>1.3 <address>1.4<area>1.5 <article>1.6 <aside>1.7 <audio>1.8 <b>1.9 <base>1.10<bdi>1.11 <bdo>1.12 <blockquote>1.13 <body>1.14 <br>1.15…

Visual Studio 2010+C#实现信源和信息熵

1. 设计要求 以图形界面的方式设计一套程序&#xff0c;该程序可以实现以下功能&#xff1a; 从输入框输入单个或多个概率&#xff0c;然后使用者可以通过相关按钮的点击求解相应的对数&#xff0c;自信息以及信息熵程序要能够实现马尔可夫信源转移概率矩阵的输入并且可以计算…

【DDD】学习笔记-服务资源模型

在软件领域中&#xff0c;使用最频繁的词语之一就是“服务”。在领域驱动设计中&#xff0c;也有领域服务、应用服务之分。通常&#xff0c;一个对象被命名为服务&#xff0c;意味着它具有为客户提供某种业务行为的能力。服务与客户存在一种协作关系&#xff0c;协作的接口可以…

PCMag评选“小企业优选CRM软件”——Zoho Bigin上榜

当我们谈论企业怎样选择CRM管理系统时&#xff0c;大型企业、中型企业以及小型或初创等不同规模的企业需求各不相同&#xff0c;很难用一套软件来适配所有公司。以小企业为例&#xff0c;大多面临预算紧张、没有专业的IT部门或支持团队、暂时用不到高级定制功能等现状。基于这个…

Java面向对象 构造器的重载

目录 创建类测试构造器的重载分析 创建类 public class Person02 {//属性&#xff1a;String name;int age;double height;//空构造器public Person02(){}public Person02(String name,int age,double height){//当形参名字和属性名字重名的时候&#xff0c;会出现就近原则&am…

Excel——重复项处理

一、高亮重复项 选择需要高亮重复项的列/单元格 选择【数据】——【重复项】—— 【高亮重复项】 如果高亮重复项的数据较长&#xff0c;例如&#xff1a;身份证号、银行卡&#xff0c;可以勾选下列选项&#xff0c;能够精准检查重复项。 结果如下所示 如果想要清除高亮的重复…

项目02《游戏-10-开发》Unity3D

【完成本集功能后共享1-10集整套代码】 基于 项目02《游戏-09-开发》Unity3D &#xff0c; 任务&#xff1a;传送至其他场景&#xff0c; 首先在场景中加入传送门&#xff0c; 设置人物标签&#xff0c; using UnityEngine; using UnityEngine.SceneManagement; u…

12.0 Zookeeper 数据同步流程

在 Zookeeper 中&#xff0c;主要依赖 ZAB 协议来实现分布式数据一致性。 ZAB 协议分为两部分&#xff1a; 消息广播崩溃恢复 消息广播 Zookeeper 使用单一的主进程 Leader 来接收和处理客户端所有事务请求&#xff0c;并采用 ZAB 协议的原子广播协议&#xff0c;将事务请求…

docker 运行jar包 指定配置文件

要在Docker中运行JAR包并指定配置文件&#xff0c;你可以创建一个Dockerfile来定义你的容器环境&#xff0c;并在其中指定如何运行JAR包和配置文件。下面是一个简单的例子&#xff0c;展示了如何在Dockerfile中设置这些配置&#xff1a; 第一步&#xff1a;创建 Dockerfile文件…

RCS系统之:机器人状态

在设计RCS系统平台时&#xff0c;机器人总共设计状态有&#xff1a; 离线模式&#xff1b; 如图&#xff0c;18号机器人呈灰黑色&#xff0c;表示机器人没有上电状态 工作模式&#xff1b; 如图&#xff0c;10号机器人成绿色&#xff0c;表示机器人处于工作模式&#xff0c;等…

SQL--约束

概述 概念&#xff1a;约束是作用于表中字段上的规则&#xff0c;用于限制存储在表中的数据。 目的&#xff1a;保证数据库中数据的正确、有效性和完整性。 分类: 约束演示 上面我们介绍了数据库中常见的约束&#xff0c;以及约束涉及到的关键字&#xff0c;那这些约束我们…

IDEA创建Java类时自动添加注释(作者、年份、月份)

目录 IDEA创建Java类时自动添加注释&#xff08;作者、年份、月份&#xff09;如图&#xff1a; IDEA创建Java类时自动添加注释&#xff08;作者、年份、月份&#xff09; 简单记录下&#xff0c;IDEA创建Java类时自动添加注释&#xff08;作者、年份、月份&#xff09;&#…

Mysql MGR搭建

一、架构说明 1.1 架构概述 MGR(单主)VIP架构是一种分布式数据库架构&#xff0c;其中数据库系统采用单主复制模式&#xff0c; 同时引入虚拟IP(VIP)来提高可用性和可扩展性。 这种架构结合了传统主从复制和虚拟IP技术的优势&#xff0c;为数据库系统提供了高可用、 高性能和…

Python HTTP隧道在远程通信中的应用:穿越网络的“魔法门”

在这个数字化时代&#xff0c;远程通信就像是我们日常生活中的“魔法门”&#xff0c;让我们可以随时随地与远方的朋友、同事或服务器进行交流。而在这扇“魔法门”的背后&#xff0c;Python HTTP隧道技术发挥着举足轻重的作用。 想象一下&#xff0c;你坐在家里的沙发上&…

python二维数组初始化的一个极其隐蔽的bug(浅拷贝)

初始化一个三行三列的矩阵 m n 3初始化方式1 a [[0 for i in range(m)] for j in range(n)]初始化方式2 b [] row [0 for i in range(0,m)] for i in range(0,n):b.append(row)分别输出两个初始化的结果 for row in a:print(row) for row in b:print(row)当前的输出为…

龙测科技荣获2023年度技术生态构建奖

本月&#xff0c;由极客传媒举办的“有被Q到”2024 InfoQ 极客传媒合作伙伴年会顺利举办&#xff0c;龙测科技喜获2023年度技术生态构建奖。 InfoQ是首批将Node.js、HTML5、Docker等技术全面引入中国的技术媒体之一&#xff0c;秉承“扎根社区、服务社区、引领社区”的理念&…

【element-ui】el-select下拉框el-date-picker弹出框定位问题解决方案

问题描述&#xff1a; 项目开发过程中发现el-select和el-date-picker弹出框显示时候&#xff0c;滚动屏幕&#xff0c;导致弹出框定位出现问题。 首先考虑到看一下element-ui官网提供的api&#xff0c;如下图 1、select提供了popper-append-to-body属性的配置 代码如下&#x…