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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用python编写爬虫,爬取房产信息

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

Java 中使用多线程的方式有哪些

在 Java 中,使用多线程主要有以下几种方式: 实现 Runnable 接口:这是实现多线程的一种方式。一个类实现 Runnable 接口后,就意味着它是一个线程的执行对象。当一个线程启动时,需要一个与之关联的 Runnable 对象。 publ…

Netflix Mac(奈飞mac客户端) v2.13.0激活版

Clicker for Netflix Mac版是一款适用于Mac的最佳独立Netflix播放器,具有直接从从Dock启动Netflix,从触摸栏控制Netflix,支持画中画等多种功能,让你拥有更好的观看体验。 软件特色 •直接从Dock启动Netflix •从触摸栏控制Netflix…

每日一练:LeeCode-112、路径总和【二叉树+DFS+回溯】

本文是力扣LeeCode-112、路径总和 学习与理解过程,本文仅做学习之用,对本题感兴趣的小伙伴可以出门左拐LeeCode。 给你二叉树的根节点 root 和一个表示目标和的整数 targetSum 。判断该树中是否存在 根节点到叶子节点 的路径,这条路径上所有…

HarmonyOS4.0——IPC与RPC通信

基本概念 IPC(Inter-Process Communication)与RPC(Remote Procedure Call)用于实现跨进程通信,不同的是前者使用Binder驱动,用于设备内的跨进程通信,后者使用软总线驱动,用于跨设备…

【iOS ARKit】人形遮挡

人形遮挡简介 在 AR系统中,计算机通过对设备摄像头采集的图像进行视觉处理和组织,建立起实景空间,然后将生成的虚拟对象依据几何一致性原理嵌入到实景空间中,形成虚实融合的增强现实环境,再输出到显示系统中呈现给使用…

【数据结构】链表OJ面试题3(题库+解析)

1.前言 前五题在这http://t.csdnimg.cn/UeggB 后三题在这http://t.csdnimg.cn/gbohQ 记录每天的刷题,继续坚持! 2.OJ题目训练 9. 给定一个链表,判断链表中是否有环。 力扣(LeetCode)官网 - 全球极客挚爱的技术成…

假期最好的安排:读书学习成长

假期是每个人放松身心、充电学习的好时机。然而,很多人往往会将假期用于休闲娱乐,错失了充实自己的宝贵机会。本文将介绍如何通过读书学习成长,让你度过一个充实、有意义的假期。 一、知识拓展 假期是知识拓展的好时机。你可以选择一些与你…

嵌入式中《C++之旅》阅读笔记

constexpr constexpr的隐含意思是在编译阶段求值,对于一些求值操作,如果声明为constexpr,那么会编译器会尝试在编译阶段进行计算求值,如果求值成功,则用结果进行替换。 一个常用的例子是如下: constexpr…

深入解析 Spring 事务机制

当构建复杂的企业级应用程序时,数据一致性和可靠性是至关重要的。Spring 框架提供了强大而灵活的事务管理机制,成为开发者处理事务的首选工具。本文将深入探讨 Spring 事务的使用和原理,为大家提供全面的了解和实际应用的指导。 本文概览 首…

ORM模型类

模型 创建两个表 创建模型类 from django.db import models# Create your models here. class BookInfo(models.Model):name models.CharField(max_length10, uniqueTrue) # 书名pub_date models.DateField(nullTrue) # 发布时间read_count models.IntegerField(default…

【JSON2WEB】04 amis低代码前端框架介绍

1 什么是 amis amis 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率。 看到amis一句话的介绍,感觉就是JSON2WEB要找的前端框架。 amis是百度开源的框架,毕竟是大厂&#xff0c…

即插即用、简单有效的大语言模型推荐算法!港大联合百度推出RLMRec

论文链接: https://arxiv.org/abs/2310.15950 论文代码: https://github.com/HKUDS/RLMRec 实验室主页: https://sites.google.com/view/chaoh/group-join-us?authuser0 TLDR 本文从互信息最大化的理论角度出发,通过引入文本信号…

使用No-SQL数据库支持连接查询用例的讨论

简介 在本文中,我们将简单介绍什么是No-SQL数据库。然后我们会讨论一种使用关系数据库比较容易实现的查询,即连接查询,怎么样使用No-SQL来实现。 什么是No-SQL数据库 与No-SQL数据库相对应的是传统的关系数据库(RDBMS&#xff…

JRT监听程序

本次设计避免以往设计缺陷,老的主要为了保持兼容性,在用的设计就不好调了。 首先,接口抽象时候就不在给参数放仪器ID和处理类了,直接放仪器配置实体,接口实现想用什么属性就用什么属性,避免老方式要扩参数时…

java的excel列行合并模版

1.效果 2.模版 <tableborder"1"cellpadding"0"cellspacing"0"class"tablebor"id"TABLE"><tr align"center" class"bg217"><td style"background-color: #008000; color: #ffffff;p…

archlinux 使用 electron-ssr 代理 socks5

提前下载好 pacman 包 https://github.com/shadowsocksrr/electron-ssr/releases/download/v0.2.7/electron-ssr-0.2.7.pacman 首先要有 yay 和 aur 源&#xff0c;这个可以参考我之前的博客 虚拟机内使用 archinstall 安装 arch linux 2024.01.01 安装依赖 yay 安装的&#…

WebGL+Three.js入门与实战——绘制水平移动的点、通过鼠标控制绘制(点击绘制、移动绘制、模拟画笔)

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…

JVM 性能调优 - 常用的垃圾回收器(6)

垃圾收集器 在 JVM(Java虚拟机)中,垃圾收集器(Garbage Collector)是负责自动管理内存的组件。它的主要任务是在程序运行过程中,自动回收不再使用的对象所占用的内存空间,以便为新的对象提供足够的内存。 JVM中的垃圾收集器使用不同的算法和策略来实现垃圾收集过程,以…

第4章——深度学习入门(鱼书)

第4章 神经网络的学习 本章的主题是神经网络的学习。这里所说的“学习”是指从训练数据中自动获取最优权重参数的过程。本章中&#xff0c;为了使神经网络能进行学习&#xff0c;将导入损失函数这一指标。而学习的目的就是以该损失函数为基准&#xff0c;找出能使它的值达到最…