uni-app：实现页面效果2（canvas绘制，根据页面宽度调整元素位置）

效果

 

代码

<template><view><!-- 车搭配指示器-双显 --><view class="content_position"><view class="content"><view class="SN"><view class="SN_title">设备1</view><view class="SN_input">SN：<input type="text"><!-- <image :src="edit" mode=""></image> --></view></view><view class="line1"><view class="line1_item3"><view class="item3_top"><view class="item3_top_title_position"><view class="item3_top_title"><view>CO/VI</view></view></view><view class="item3_top_canvas_position"><canvas style="width:100%; height: 80px;" canvas-id="firstCanvas"id="firstCanvas"></canvas></view><view class="item3_top_text_position"><view class="top_text1"><view><view class="text_center">CO浓度值</view><view class="circle"><view><view class="text_center">0</view><view class="text_center">PPM</view></view></view></view></view><view class="top_text2"><view><view class="text_center">VI可见度</view><view class="circle"><view><view class="text_center">0</view><view class="text_center">0M</view></view></view></view></view></view></view><view class="item3_bottom"><view class="line1_item3_block2"><view class="block2"><view class="title">CO信号输入</view><view class="green_ring_select"><view>DI7</view><view><image :src="down" mode=""></image></view></view><view class="block2_input"><view class="block2_input_title">量程</view><view class="block2_input_data"><input type="text" value="0PPM"><input type="text" value="300PPM"></view></view></view></view><view class="line1_item3_block2"><view class="block2"><view class="title">CO信号输入</view><view class="green_ring_select"><view>DI7</view><view><image :src="down" mode=""></image></view></view><view class="block2_input"><view class="block2_input_title">量程</view><view class="block2_input_data"><input type="text" value="0M"><input type="text" value="5000M"></view></view></view></view></view></view></view></view></view></view>
</template><script>export default {data() {return {down: getApp().globalData.icon + 'look/down.png',}},onReady: function(e) {//创建一个画布上下文对象，用于进行绘图操作。'firstCanvas'是一个指定的画布标识符，表示在页面上的哪个 <canvas> 元素上进行绘制。var context = uni.createCanvasContext('firstCanvas')var width = '';const query = uni.createSelectorQuery();//获取宽度query.select('#firstCanvas').fields({size: true}, (res) => {width = res.width;}).exec();//绘制路径中的线条。context.setStrokeStyle("#aaaaff")// 设置线条的宽度为2个像素。context.setLineWidth(2)// 绘制横线context.beginPath(); // 开始路径绘制context.moveTo(width / 2, 0); // 将起点移动到 (0, 100)context.lineTo(width / 2, 50);context.stroke(); // 绘制线条var x1 = width / 4; // 第一个竖线的起点 x 坐标var y1 = 50; // 第一个竖线的起点 y 坐标var y2 = 30; // 短竖线的高度var horizontalLength = width / 2; // 横线的长度context.beginPath();context.moveTo(x1, y1 + y2); // 移动到第一个短竖线的起点context.lineTo(x1, y1); // 绘制第一个短竖线context.moveTo(x1 + horizontalLength, y1 + y2); // 移动到横线的右端下方context.lineTo(x1 + horizontalLength, y1); // 绘制第二个短竖线context.moveTo(x1, y1); // 移动到横线的左端下方context.lineTo(x1 + horizontalLength, y1); // 绘制横线/*  */context.stroke(); // 绘制线条// 将之前的绘图操作渲染到画布上。context.draw()// 获取父元素的宽度var parentWidth = document.querySelector('.item3_top_text_position').offsetWidth;console.log(parentWidth);// 计算margin-left的值var marginLeft = parentWidth / 4;// 设置样式document.querySelector('.top_text2').style.marginLeft = marginLeft + 'px';document.querySelector('.top_text1').style.marginLeft = '-' + marginLeft + 'px';},methods: {}}
</script><style lang="scss">page {background-color: #f3f4f6;}.text_center {display: flex;justify-content: center;}/* 总体样式 */.content_position {width: 100%;display: flex;align-items: center;justify-content: center;}.content {width: 90%;padding: 2% 0;}/* SN 样式 */.SN {color: #6b6c6e;padding: 2%;display: flex;// border:1px solid black;justify-content: space-between;/* 将左右视图分散对齐 */.SN_input {display: flex;// border:1px solid black;input {border-bottom: 1px solid #a3a4a6;width: 200rpx;}image {width: 48rpx;height: 48rpx;}}}// 行1样式.line1 {// border: 1px solid black;background-color: #fff;border-radius: 15px;margin: 3% 0;padding: 3% 0;}.line1_item3 {// 顶部样式.item3_top {// position:relative;s}//第一行标题//标题位置.item3_top_title_position {// border: 1px solid black;display: flex;align-items: center;justify-content: center;}//标题内容.item3_top_title {width: 160rpx;height: 160rpx;border-radius: 50%;background-color: #edf1fc;color: #8196ec;font-size: 120%;font-weight: bold;display: flex;align-items: center;justify-content: center;// border:1px solid black}//画布位置.item3_top_canvas_position {// border: 1px solid black;display: flex;align-items: center;justify-content: center;}//文本位置.item3_top_text_position {// border: 1px solid black;position: relative;height: 400rpx;}.top_text1 {position: absolute;left: 50%;transform: translateX(-50%);margin-left: -85px;// border: 1px solid black;width: 220rpx;height: 350rpx;background-color: #edf1fc;border-radius: 10px;display: flex;align-items: center;justify-content: center;}.top_text2 {position: absolute;left: 50%;transform: translateX(-50%);margin-left: 85px;// border: 1px solid black;width: 220rpx;height: 350rpx;background-color: #edf1fc;border-radius: 10px;display: flex;align-items: center;justify-content: center;}.circle {width: 140rpx;height: 140rpx;border-radius: 50%;font-size: 95%;display: flex;align-items: center;justify-content: center;background-color: #e8e8e8;}// 底部样式.item3_bottom {display: flex;justify-content: space-between; //分散排列// border: 1px solid black;}//两列.line1_item3_block2 {display: flex;text-align: center;margin: 0 5%; //增加底部两个模块之间的距离}//两个小块样式.block2_input {margin: 5% 0;display: flex;}// 底部两小块标题.block2_input_title {width: 30%;display: flex;align-items: center; //竖直居中justify-content: center; //水平居中// border: 1px solid black;}.block2_input_data {width: 70%;}.block2_input_data input {margin: 5% 0;border: 1px solid #808080;border-radius: 20px;padding: 2% 5%;color: #737373;text-align: right;}//绿环样式.green_ring_select {background-color: #6da54f;border-radius: 20px;color: #fff;font-size: 95%;display: flex;align-items: center;padding: 1% 0;margin: 5% 0;// width:200rpx;view:nth-child(1) {width: 60%;display: flex;justify-content: center;align-items: center;}view:nth-child(2) {width: 40%;display: flex;justify-content: center;align-items: center;image {width: 30rpx;height: 30rpx;}}}}
</style>

上面的额问题或许在手机端执行会出现问题 ，修改后的代码

<template><view><!-- 车搭配指示器-双显 --><view class="content_position"><view class="content"><view class="SN"><view class="SN_title">设备1</view><view class="SN_input">SN：<input type="text"><!-- <image :src="edit" mode=""></image> --></view></view><view class="line1"><view class="line1_item3"><view class="item3_top"><view class="item3_top_title_position"><view class="item3_top_title"><view>CO/VI</view></view></view><view class="item3_top_canvas_position"><canvas style="width:100%; height: 80px;" canvas-id="firstCanvas"id="firstCanvas"></canvas></view><view class="item3_top_text_position"><view class="top_text1" ref="myView1" :style="{ marginLeft: marginLeft1 + 'px' }"><view><view class="text_center">CO浓度值</view><view class="circle"><view><view class="text_center">0</view><view class="text_center">PPM</view></view></view></view></view><view class="top_text2" ref="myView2" :style="{ marginLeft: marginLeft2 + 'px'}"><view><view class="text_center">VI可见度</view><view class="circle"><view><view class="text_center">0</view><view class="text_center">0M</view></view></view></view></view></view></view><view class="item3_bottom"><view class="line1_item3_block2"><view class="block2"><view class="title">CO信号输入</view><view class="green_ring_select"><view>DI7</view><view><image :src="down" mode=""></image></view></view><view class="block2_input"><view class="block2_input_title">量程</view><view class="block2_input_data"><input type="text" value="0PPM"><input type="text" value="300PPM"></view></view></view></view><view class="line1_item3_block2"><view class="block2"><view class="title">CO信号输入</view><view class="green_ring_select"><view>DI7</view><view><image :src="down" mode=""></image></view></view><view class="block2_input"><view class="block2_input_title">量程</view><view class="block2_input_data"><input type="text" value="0M"><input type="text" value="5000M"></view></view></view></view></view></view></view></view></view></view>
</template><script>export default {data() {return {down: getApp().globalData.icon + 'look/down.png',marginLeft1: 0, // 子元素的外边距marginLeft2: 0, // 子元素的外边距}},onReady: function(e) {//创建一个画布上下文对象，用于进行绘图操作。'firstCanvas'是一个指定的画布标识符，表示在页面上的哪个 <canvas> 元素上进行绘制。var context = uni.createCanvasContext('firstCanvas')var width = '';const query = uni.createSelectorQuery();//获取宽度query.select('#firstCanvas').fields({size: true}, (res) => {width = res.width;//获取到宽度进行绘制//绘制路径中的线条。context.setStrokeStyle("#aaaaff")// 设置线条的宽度为2个像素。context.setLineWidth(2)// 绘制横线context.beginPath(); // 开始路径绘制context.moveTo(width / 2, 0); // 将起点移动到 (0, 100)context.lineTo(width / 2, 50);context.stroke(); // 绘制线条var x1 = width / 4; // 第一个竖线的起点 x 坐标var y1 = 50; // 第一个竖线的起点 y 坐标var y2 = 30; // 短竖线的高度var horizontalLength = width / 2; // 横线的长度context.beginPath();context.moveTo(x1, y1 + y2); // 移动到第一个短竖线的起点context.lineTo(x1, y1); // 绘制第一个短竖线context.moveTo(x1 + horizontalLength, y1 + y2); // 移动到横线的右端下方context.lineTo(x1 + horizontalLength, y1); // 绘制第二个短竖线context.moveTo(x1, y1); // 移动到横线的左端下方context.lineTo(x1 + horizontalLength, y1); // 绘制横线/*  */context.stroke(); // 绘制线条// 将之前的绘图操作渲染到画布上。context.draw()}).exec();//获取父元素宽度query.select('.item3_top_text_position').fields({size: true}, (res) => {const parentWidth = res.width;// console.log("父元素的宽度：" + parentWidth)var marginLeft = parentWidth / 4;this.marginLeft1 = marginLeft;this.marginLeft2 = '-' + marginLeft;}).exec();},methods: {}}
</script><style lang="scss">page {background-color: #f3f4f6;}.text_center {display: flex;justify-content: center;}/* 总体样式 */.content_position {width: 100%;display: flex;align-items: center;justify-content: center;}.content {width: 90%;padding: 2% 0;}/* SN 样式 */.SN {color: #6b6c6e;padding: 2%;display: flex;// border:1px solid black;justify-content: space-between;/* 将左右视图分散对齐 */.SN_input {display: flex;// border:1px solid black;input {border-bottom: 1px solid #a3a4a6;width: 200rpx;}image {width: 48rpx;height: 48rpx;}}}// 行1样式.line1 {// border: 1px solid black;background-color: #fff;border-radius: 15px;margin: 3% 0;padding: 3% 0;}.line1_item3 {// 顶部样式.item3_top {// position:relative;s}//第一行标题//标题位置.item3_top_title_position {// border: 1px solid black;display: flex;align-items: center;justify-content: center;}//标题内容.item3_top_title {width: 160rpx;height: 160rpx;border-radius: 50%;background-color: #edf1fc;color: #8196ec;font-size: 120%;font-weight: bold;display: flex;align-items: center;justify-content: center;// border:1px solid black}//画布位置.item3_top_canvas_position {// border: 1px solid black;display: flex;align-items: center;justify-content: center;}//文本位置.item3_top_text_position {// border: 1px solid black;position: relative;height: 400rpx;}.top_text1 {position: absolute;left: 50%;transform: translateX(-50%);margin-left: -85px;// border: 1px solid black;width: 220rpx;height: 350rpx;background-color: #edf1fc;border-radius: 10px;display: flex;align-items: center;justify-content: center;}.top_text2 {position: absolute;left: 50%;transform: translateX(-50%);margin-left: 85px;// border: 1px solid black;width: 220rpx;height: 350rpx;background-color: #edf1fc;border-radius: 10px;display: flex;align-items: center;justify-content: center;}.circle {width: 140rpx;height: 140rpx;border-radius: 50%;font-size: 95%;display: flex;align-items: center;justify-content: center;background-color: #e8e8e8;}// 底部样式.item3_bottom {display: flex;justify-content: space-between; //分散排列// border: 1px solid black;}//两列.line1_item3_block2 {display: flex;text-align: center;margin: 0 5%; //增加底部两个模块之间的距离}//两个小块样式.block2_input {margin: 5% 0;display: flex;}// 底部两小块标题.block2_input_title {width: 30%;display: flex;align-items: center; //竖直居中justify-content: center; //水平居中// border: 1px solid black;}.block2_input_data {width: 70%;}.block2_input_data input {margin: 5% 0;border: 1px solid #808080;border-radius: 20px;padding: 2% 5%;color: #737373;text-align: right;}//绿环样式.green_ring_select {background-color: #6da54f;border-radius: 20px;color: #fff;font-size: 95%;display: flex;align-items: center;padding: 1% 0;margin: 5% 0;// width:200rpx;view:nth-child(1) {width: 60%;display: flex;justify-content: center;align-items: center;}view:nth-child(2) {width: 40%;display: flex;justify-content: center;align-items: center;image {width: 30rpx;height: 30rpx;}}}}
</style>

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

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

相关文章

视频讲解|含可再生能源的热电联供型微网经济运行优化（含确定性和源荷随机两部分代码）

视频讲解|含可再生能源的热电联供型微网经济运行优化（含确定性和源荷随机两部分代码）

1 主要内容 该视频为《含可再生能源的热电联供型微网经济运行优化》代码讲解内容&#xff0c;对应的资源下载链接为考虑源荷不确定性的热电联供微网优化-王锐matlab&#xff08;含视频讲解&#xff09;&#xff0c;对该程序进行了详尽的讲解&#xff0c;基本做到句句分析和讲解…
阅读更多...
源码系列 之 ThreadLocal

源码系列 之 ThreadLocal

简介 ThreadLocal的作用是做数据隔离&#xff0c;存储的变量只属于当前线程&#xff0c;相当于当前线程的局部变量&#xff0c;多线程环境下&#xff0c;不会被别的线程访问与修改。常用于存储线程私有成员变量、上下文&#xff0c;和用于同一线程&#xff0c;不同层级方法间传…
阅读更多...
【数据结构】链表与LinkedList

【数据结构】链表与LinkedList

作者主页&#xff1a;paper jie 的博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文录入于《JAVA数据结构》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和精…
阅读更多...
Ubuntu中启动HDFS后没有NameNode解决办法

Ubuntu中启动HDFS后没有NameNode解决办法

关闭进程&#xff1a; stop-dfs.sh 格式化&#xff1a; hadoop namenode -format 出现报错信息&#xff1a; 23/10/03 22:27:04 WARN fs.FileUtil: Failed to delete file or dir [/usr/data/hadoop/tmp/dfs/name/current/fsimage_0000000000000000000.md5]: it still exi…
阅读更多...
3种等待方式，让你学会Selenium设置自动化等待测试脚本！

3种等待方式，让你学会Selenium设置自动化等待测试脚本！

一、Selenium脚本为什么要设置等待方式&#xff1f;——即他的应用背景到底是什么 应用Selenium时&#xff0c;浏览器加载过程中无法立即显示对应的页面元素从而无法进行元素操作&#xff0c;需设置一定的等待时间去等待元素的出现。&#xff08;简单来说&#xff0c;就是设置…
阅读更多...
黑马mysql教程笔记（mysql8教程）基础篇——数据库相关概念、mysql安装及卸载、数据模型、SQL通用语法及分类（DDL、DML、DQL、DCL）

黑马mysql教程笔记（mysql8教程）基础篇——数据库相关概念、mysql安装及卸载、数据模型、SQL通用语法及分类（DDL、DML、DQL、DCL）

参考文章1&#xff1a;https://www.bilibili.com/video/BV1Kr4y1i7ru/ 参考文章2&#xff1a;https://dhc.pythonanywhere.com/article/public/1/ 文章目录 基础篇数据库相关概念&#xff08;数据库DataBase&#xff08;DB&#xff09;、数据库管理系统DataBase Management Sy…
阅读更多...
正则表达式基本使用

正则表达式基本使用

文章目录 1. 基本介绍2. 元字符(Metacharacter)-转义号 \\3. 元字符-字符匹配符3.1 案例 4. 元字符-选择匹配符5. 元字符-限定符6. 元字符-定位符7. 分组7.1 捕获分组7.2 非捕获分组 8. 非贪婪匹配9. 应用实例10. 正则验证复杂URL 1. 基本介绍 如果要想灵活的运用正则表达式&a…
阅读更多...
【算法学习】-【双指针】-【快乐数】

【算法学习】-【双指针】-【快乐数】

LeetCode原题链接&#xff1a;202. 快乐数 下面是题目描述&#xff1a; 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。 然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无限循环 但始终变不到 1。 如果…
阅读更多...
Linux：minishell

Linux：minishell

目录 1.实现逻辑 2.代码及效果展示 1.打印字符串提示用户输入指令 2.父进程拆解指令 3.子进程执行指令,父进程等待结果 4.效果 3.实现过程中遇到的问题 1.打印字符串的时候不显示 2.多换了一行 3.cd路径无效 4.优化 1.ll指令 2.给文件或目录加上颜色 代码链接 模…
阅读更多...
Redis相关概念

Redis相关概念

1. 什么是Redis&#xff1f;它主要用来什么的&#xff1f; Redis&#xff0c;英文全称是Remote Dictionary Server&#xff08;远程字典服务&#xff09;&#xff0c;是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提…
阅读更多...
IDT 一款自动化挖掘未授权访问漏洞的信息收集工具

IDT 一款自动化挖掘未授权访问漏洞的信息收集工具

IDT v1.0 IDT 意为 Interface detection&#xff08;接口探测) 项目地址: https://github.com/cikeroot/IDT/该工具主要的功能是对批量url或者接口进行存活探测&#xff0c;支持浏览器自动打开指定的url&#xff0c;避免手动重复打开网址。只需输入存在批量的url文件即可。 …
阅读更多...
SpringBoot快速入门

SpringBoot快速入门

搭建SpringBoot工程&#xff0c;定义hello方法&#xff0c;返回“Hello SpringBoot” ②导入springboot工程需要继承的父工程&#xff1b;以及web开发的起步依赖。 ③编写Controller ④引导类就是SpringBoot项目的一个入口。 写注解写main方法调用run方法 快速构建SpringBoo…
阅读更多...
动态规划-状态机（188. 买卖股票的最佳时机 IV）

动态规划-状态机（188. 买卖股票的最佳时机 IV）

状态分类&#xff1a; f[i,j,0]考虑前i只股票&#xff0c;进行了j笔交易&#xff0c;目前未持有股票 所能获得最大利润 f[i,j,1]考虑前i只股票&#xff0c;进行了j笔交易&#xff0c;目前持有股票 所能获得最大利润 状态转移&#xff1a; f[i][j][0] Math.max(f[i-1][j][0],f[…
阅读更多...
DevExpress WinForms图表组件 - 直观的数据信息呈现方式！（二）

DevExpress WinForms图表组件 - 直观的数据信息呈现方式！（二）

在上文中&#xff08;点击这里回顾>>&#xff09;&#xff0c;我们为大家介绍了DevExpress WinForms图表控件的互动图表、图标设计器及可定制功能等&#xff0c;本文将继续介绍DevExpress WinForms图表控件的数据分析、大数据功能等&#xff0c;欢迎持续关注我们哦~ Dev…
阅读更多...
力扣-350.两个数组的交集||

力扣-350.两个数组的交集||

Idea 首先遍历第一个数组&#xff0c;用哈希表存储每个数字及其出现的次数。 然后遍历第二个数组&#xff0c;每出现重复的数字&#xff0c;并判断该数字在哈希表的次数是不是大于0&#xff0c;如果大于则存入答案数组&#xff0c;并将哈希表次数减1&#xff0c;直接遍历结束。…
阅读更多...
pycharm中个人编程时常用到的快捷键

pycharm中个人编程时常用到的快捷键

pycharm中个人编程时常用到的快捷键&#xff1a; 仅个人经验总结&#xff0c;不为其他&#xff01; 1.CTRLShiftAlt鼠标选择多个位置 可以同时在多个位置进行编辑同样的内容 2. Ctrel Alt L快速将代码格式标准化 3. Ctrl F 在当前py文件中查找 4. Ctrl R快速替换当前…
阅读更多...
接口自动化中如何完成接口加密与解密？

接口自动化中如何完成接口加密与解密？

加密是一种限制对网络上传输数据的访问权的技术。将密文还原为原始明文的过程称为解密&#xff0c;它是加密的反向处理。在接口开发中使用加密、解密技术&#xff0c;可以防止机密数据被泄露或篡改。在接口自动化测试过程中&#xff0c;如果要验证加密接口响应值正确性的话&…
阅读更多...
JUC第十四讲：JUC锁: ReentrantReadWriteLock详解

JUC第十四讲：JUC锁: ReentrantReadWriteLock详解

JUC第十四讲&#xff1a;JUC锁: ReentrantReadWriteLock详解 本文是JUC第十四讲&#xff1a;JUC锁 - ReentrantReadWriteLock详解。ReentrantReadWriteLock表示可重入读写锁&#xff0c;ReentrantReadWriteLock中包含了两种锁&#xff0c;读锁ReadLock和写锁WriteLock&#xff…
阅读更多...
C/C++字符函数和字符串函数详解————内存函数详解与模拟

C/C++字符函数和字符串函数详解————内存函数详解与模拟

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言程序设计————KTV C语言小游戏 C语言进阶 C语言刷题 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂。 目录 1.前言 2 .memcpy函数 3.memmove函…
阅读更多...
【Office】超简单，Excel快速完成不规则合并单元格排序

【Office】超简单，Excel快速完成不规则合并单元格排序

演示效果&#xff1a;将下图已经合并了的单元格按照单位名称排序并将同一个单位的数据合并在了一起。 Step 1&#xff1a;取消合并 选中所有的数据后&#xff0c;点击 “开始”-“合并单元格” &#xff0c;并且取消数据源的合并。 Step 2&#xff1a;填充数据 选中需要填…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023