当前位置: 首页 > news >正文

Uni-app开发Canvas当子组件示例,点点绘制图形

前言

使用Uni-app 实现封装一个Canvas渲染的子组件,实现通过传入两点绘制一条完整的路程
具体逻辑看我发的后端和数据库设计
C# 根据两点名称,寻找两短路程的最优解,【有数据库设计,完整代码】

即使不了解具体逻辑,该文章同样可以帮助想要实现使用Canvas当子组件,以及点点绘制图形问题的疑惑

注意事项

问题一:在使用canvas开发时为什么图形没有渲染

1.注意画布的尺寸canvas 标签默认宽度300px、高度150px
2.同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作

问题二:为什么当子组件时Canvas渲染不出来

1.没有写canvas-id
2.uni.createCanvasContext方法没有传入组件实例(单独作为组件引入时,vue2为this,vue3为getCurrentInstance())
3.canvas标签上写了type=“2d”(单独作为组件引入时)
4.没有在onReady或者onMounted生命周期里实列话canvas

Uni-app代码

子组件

<template><view class="countStyle"><scroll-view scroll-x scroll-y><view class="bgimg" :style="{ 'background-image': 'url(' + imager + ')' }"><canvas canvas-id="firstCanvas" id="firstCanvas" class="cansStyle" /></view></scroll-view></view>
</template><script setup>import { ref, onMounted, getCurrentInstance } from 'vue';import config from '@/config';import { VerifyPilot } from './canvasConfig.js';const imager = ref(config.config.baseUrl + '/wximages/menu/unloadWork.png');const points = ref([]);const instance = getCurrentInstance()const props = defineProps({PtName: "",});// 在组件加载后获取数据并绘制onMounted(() => {VerifyPilot({ PtName: props.PtName }).then((val) => {for (let i = 0; i < val.data.length; i++) {const { xAxis, yAxis } = val.data[i];points.value.push({ x: xAxis, y: yAxis });}drawPolyline();});});function drawPolyline() {const canvas = uni.createCanvasContext('firstCanvas', instance);canvas.setStrokeStyle("#ffff00");canvas.setLineWidth(5);canvas.moveTo(points.value[0].x, points.value[0].y);for (let i = 1; i < points.value.length; i++) {canvas.lineTo(points.value[i].x, points.value[i].y);}canvas.stroke();canvas.draw();}
</script><style lang="scss" scoped>.countStyle {overflow: auto;}.bgimg {height: 600px;width: 450px;background-size: cover;background-repeat: no-repeat;background-position: center;}.cansStyle {height: 600px;width: 450px;}
</style>

父组件

<template><div class="my-img-div"><dotBitmap :PtName='PtName' /></div>
</template><script setup>import dotBitmap from "@/pages/driver/dotBitmap/index"import { ref } from 'vue'const PtName = ref('GM3,K8F')
</script><style lang="scss" scoped>.my-img-div {width: 100%;}
</style>

手机尺寸兼容

上述代码,通过scroll-view,我们可以对图片进行上下滑动,但有些需求是图片要自适应手机宽度,可以参考该连接uni-app使用canvas适配手机宽高进行渲染

相关文章:

Uni-app开发Canvas当子组件示例,点点绘制图形

前言 使用Uni-app 实现封装一个Canvas渲染的子组件&#xff0c;实现通过传入两点绘制一条完整的路程 具体逻辑看我发的后端和数据库设计 C# 根据两点名称&#xff0c;寻找两短路程的最优解&#xff0c;【有数据库设计&#xff0c;完整代码】 即使不了解具体逻辑&#xff0c;该…...

从金蝶云星空到钉钉通过接口配置打通数据

从金蝶云星空到钉钉通过接口配置打通数据 对接系统金蝶云星空 金蝶K/3Cloud&#xff08;金蝶云星空&#xff09;是移动互联网时代的新型ERP&#xff0c;是基于WEB2.0与云技术的新时代企业管理服务平台。金蝶K/3Cloud围绕着“生态、人人、体验”&#xff0c;旨在帮助企业打造面…...

Unreal发布Android在刘海屏手机上不能全屏显示问题

Unreal 4.27发布Android在刘海屏手机上不能全屏显示问题 Android设置全屏刘海屏全屏设置4.27设置刘海屏在部分手机不能显示问题 Android设置全屏 AndroidManifest.xml文件配置 ...<activity android:name"com.epicgames.ue4.GameActivity" android:label"st…...

hive库表占用空间大小的命令

1、查每个hive表占用的空间大小 hdfs dfs -du -h /user/hive/warehouse 2、按占用空间大小降序排列 hdfs dfs -du /user/hive/warehouse/ipms.db | sort -nr 3、查某一个分区占用空间大小&#xff08;单位G) hadoop fs -ls /user/hive/warehouse/ipms.db/dw_ft_se_nt_u_gen…...

关于go中的select

笔记仓库&#xff1a;gitee.com/xiaoyinhui 代码中的解释纯个人理解&#xff0c;有不对的望指出 package testsimport ("fmt""testing" )var uCnt int 0func TestSelece(t *testing.T) {// 对于 select 语句&#xff0c;在进入该语句时&#xff0c;会按源…...

【Node.js从基础到高级运用】十一、构建RESTful API

在本篇博客中&#xff0c;我们将综合之前讨论的内容&#xff0c;深入探索如何使用Node.js构建一个RESTful API。我们将重点讨论设计合理的API端点&#xff0c;展示如何通过代码实现这些端点&#xff0c;并指导如何使用Postman测试我们的API&#xff0c;确保其按预期工作。 前提…...

Python和MATLAB数字信号波形和模型模拟

要点 Python和MATLAB实现以下波形和模型模拟 以给定采样率模拟正弦信号&#xff0c;生成给定参数的方波信号&#xff0c;生成给定参数隔离矩形脉冲&#xff0c;生成并绘制线性调频信号。快速傅里叶变换结果释义&#xff1a;复数离散傅里叶变换、频率仓和快速傅里叶变换移位&am…...

华为OD技术C卷“测试用例执行计划”Java解答

描述 示例 算法思路1 整体思路是&#xff0c;先读取特性的优先级和测试用例覆盖的特性列表&#xff0c;然后计算每个测试用例的优先级&#xff0c;并将其与测试用例的索引存储到二维数组中。最后按照优先级和索引排序&#xff0c;输出测试用例的索引&#xff0c;即为执行顺序。…...

solana 入门 1

solana-co-learn Solana 开发学习笔记(一)——从 Hello World 出发 安装开发环境 windows下环境配置 wsl First start with installing WSL on your system. wsl --install wsl安装Ubuntu 列出可用的分发版 wsl.exe --list --online显示&#xff1a; 以下是可安装的有效…...

JavaEE之多线程(创建线程的五种写法)详解

&#x1f63d;博主CSDN主页: 小源_&#x1f63d; &#x1f58b;️个人专栏: JavaEE &#x1f600;努力追逐大佬们的步伐~ 目录 1. 前言 2. 操作系统"内核" 3. 创建线程的五种写法 (我们重点要掌握最后一种写法!!) 3.1 继承 Thread, 重写 run 3. 2 实现 Runnabl…...

ChatGPT国内能用吗?中国用户怎么才能使用ChatGPT?

与ChatGPT类似的国内网站&#xff0c;他们都能提供和ChatGPT相似的能力&#xff0c;而且可以在国内直接使用。 点击直达方式 百科GPT官网&#xff1a;baikegpt.cn ChatGPT是基于GPT-3.5架构的语言模型的一个实例&#xff0c;由OpenAI开发。以下是ChatGPT的发展历史&#xff1…...

集群保持集群负载均衡和hash一致性

集群保持负载均衡和一致性哈希是在构建分布式系统时经常涉及的两个重要概念。 负载均衡&#xff1a; - 在集群中&#xff0c;负载均衡是指将传入的请求有效地分发到不同的服务器上&#xff0c;以确保每台服务器都能够处理适量的流量&#xff0c;避免某些服务器过载而造成性能问…...

吴恩达深度学习笔记:神经网络的编程基础2.9-2.14

目录 第一门课&#xff1a;神经网络和深度学习 (Neural Networks and Deep Learning)第二周&#xff1a;神经网络的编程基础 (Basics of Neural Network programming)2.9 逻辑回归中的梯度下降&#xff08;Logistic Regression Gradient Descent&#xff09; 第一门课&#xff…...

在C++项目中使用python脚本(四种)常见报错解决

上一期我们讲了如何在C中使用python脚本&#xff0c;这期讲讲过程中常会遇到的一些错误。 一、c代码未设置python路径 Py_SetPythonHome(L"D:\\anaconda3\\envs\\envpython3.7");这一句很重要&#xff0c;切记加上并且换成自己的路径 Py_SetPythonHome(L"D:\\a…...

微前端框架 qiankun 配置使用【基于 vue/react脚手架创建项目 】

qiankun官方文档&#xff1a;qiankun - qiankun 一、创建主应用&#xff1a; 这里以 vue 为主应用&#xff0c;vue版本&#xff1a;2.x // 全局安装vue脚手架 npm install -g vue/clivue create main-app 省略 vue 创建项目过程&#xff0c;若不会可以自行百度查阅教程 …...

nodejs切换淘宝源

1. 查看当前地址 npm config get registrynpm config get disturl2. 设置当前地址&#xff08;设置为淘宝镜像&#xff09; npm config set registry http://registry.npm.taobao.org/3. 设置当前地址&#xff08;设置为默认地址&#xff09; npm config set registry https…...

怎么避免电脑数据被拷贝?电脑如何禁用USB功能?

在无纸化办公的今天&#xff0c;很多重要数据都存放在电脑中。为了避免数据泄露&#xff0c;需要采用安全的方式保护电脑数据。那么&#xff0c;该如何避免电脑数据被拷贝呢&#xff1f;下面我们就来了解一下。 方法一&#xff1a;物理隔绝 物理隔绝是一种原始但有效的USB禁用…...

给电脑加硬件的办法 先找电脑支持的接口,再买相同接口的

需求&#xff1a;我硬盘太小&#xff0c;换或加一个大硬盘 结论&#xff1a;接口是NVMe PCIe 3.0 x4 1.找到硬盘型号 主硬盘 三星 MZALQ512HALU-000L2 (512 GB / 固态硬盘) 2.上官网查 或用bing查 非官方渠道信息&#xff0c;不确定。...

uniapp微信小程序_自定义交费逻辑编写

一、首先看最终效果 先说下整体逻辑,选中状态为淡紫色,点击哪个金额,充值页面上就显示多少金额 二、代码 <view class"addMoney"><view class"addMoneyTittle">充值金额</view><view class"selfaddmoney" :class"{…...

论文阅读——RingMo

RingMo: A Remote Sensing Foundation Model With Masked Image Modeling 与自然场景相比&#xff0c;RS图像存在以下困难。 1&#xff09;分辨率和方位范围大&#xff1a;受遥感传感器的影响&#xff0c;图像具有多种空间分辨率。此外&#xff0c;与自然图像的实例通常由于重…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...