uni-app在image上绘制点位并回显
在 Uni-app 中绘制多边形可以通过使用 Canvas API 来实现。Uni-app 是一个使用 Vue.js 开发所有前端应用的框架,同时支持编译为 H5、小程序等多个平台。由于 Canvas 是 H5 和小程序中都支持的 API,所以通过 Canvas 绘制多边形是一个比较通用的方法。
1. 创建一个新的 Uni-app 项目(如果还没有的话)
vue create -p dcloudio/uni-preset-vue my-uni-app
cd my-uni-app
2. 开始绘制
背景:在image上绘制多边形,并将点位回传。回传后的数据格式'(1,2),(3,4)',所以需要一些方法进行处理。如你没有转换需求,可自行删除。
<template><view class="layout-wrap"><view class="draw-wrap"><view class="camera-wrap"><img:style="{ width: `${canvasWidth}px`, height: `${canvasHeight}px` }":src="cameraUrl"mode="aspectFill"class="popup-img"/><canvasid="myCanvas"canvas-id="myCanvas"@touchstart="onTouchStart"@touchend="onTouchEnd":style="{ width: `${canvasWidth}px`, height: `${canvasHeight}px` }"></canvas></view></view><view class="btn-wrap"><view class="btn reset-btn" @click="handleClear">清 除</view><view class="btn" @click="handleSubmit">确 定</view></view></view>
</template><script>
import { addCameraRegion, getCameraId } from "@/api/cabinet";
import config from "@/config";
const baseUrl = config.baseUrl;
export default {name: "draw",data() {return {points: [], // 存储触摸点canvasWidth: "",canvasHeight: "",ctx: "",cameraUrl: "",rate: "",touchNum: 0,};},onShow() {this.init();},methods: {init() {// 获取配置及绘制图形getCameraId(config.hostInfoId).then((res) => {const data = res.data;this.monitorPoints = data.monitorPoints;this.rate = data.monitorWidth / data.monitorHeight;this.canvasWidth = 1000this.canvasHeight = this.canvasWidth / this.rate;this.cameraUrl =baseUrl +"/api/monitor/player?cameraId=" +data.monitorCameraId +"&time=" +new Date().getTime();const ctx = uni.createCanvasContext("myCanvas");this.ctx = ctx;this.touchNum = 0this.setRect();});},onTouchStart(e) {if (this.touchNum === 0) {this.handleClear()}this.touchNum++;const touch = e.touches[0];this.points.push({ x: touch.x, y: touch.y });},onTouchEnd(e) {this.drawPolygon();this.ctx.draw();},drawPolygon() {const ctx = this.ctx;ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // 清除画布ctx.setStrokeStyle("#00ff00"); // 设置多边形边框颜色// 设置填充样式和透明度ctx.setLineWidth(10); // 设置多边形边框宽度ctx.beginPath();this.points.forEach((point, index) => {if (index === 0) {ctx.moveTo(point.x, point.y);} else {ctx.lineTo(point.x, point.y);}});// 如果需要闭合多边形,取消注释以下行ctx.closePath();ctx.stroke();// 绘制填充ctx.setFillStyle("rgba(0, 255, 0, 0.4)");ctx.fill();},// 根据之前的数据回显多边形(如果有的话)setRect() {try {const pointsArr = this.monitorPoints.slice(1, -1).split("),(");if (pointsArr && pointsArr.length > 1) {pointsArr.map((p) => {this.points.push({x: Math.round(p.split(",")[0] / this.rate),y: Math.round(p.split(",")[1] / this.rate),});});console.log(this.canvasWidth, this.canvasHeight);console.log(this.points);this.drawPolygon();setTimeout(() => {//必须延迟执行 不然H5不显示this.ctx.draw(); //必须加上 uniapp 没这儿玩意儿 显示不出来不比原生 不加可以显示}, 200);}} catch (error) {console.error("绘制多边形时出错:", error);}},// 提交 handleSubmit() {if (this.points.length > 1) {// 转换并发送多边形的顶点坐标const scaledPoints = [];this.points.map((point) => {scaledPoints.push(`(${Math.round(point.x * this.rate)},${Math.round(point.y * this.rate)})`);});// 提交请求} else {uni.showToast({title: "请绘制",icon: "none",});}},// 清除handleClear() {this.points = [];this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // 清除画布this.ctx.draw();},},
};
</script>
<style lang="scss" scoped>
.draw-wrap {position: relative;margin-top: 2vh;left: 7vw;
}
.camera-wrap {height: 76vh;
}
.popup-img {position: absolute;top: 0;left: 0;object-fit: contain;border: 6rpx solid #093763;box-sizing: border-box;
}#myCanvas {position: absolute;top: 0;left: 0;
}
</style>
3. 效果图
4. 解释
uni.createCanvasContext('myCanvas')
用于获取 Canvas 的绘图上下文。ctx.setStrokeStyle('red')
和ctx.setLineWidth(
10)
用于设置描边颜色和宽度。ctx.beginPath()
开始一个新的路径。ctx.moveTo(points[0].x, points[0].y)
和ctx.lineTo(points[i].x, points[i].y)
用于绘制线段。ctx.closePath()
闭合路径,使之成为一个多边形。ctx.stroke()
描边。ctx.setFillStyle('
rgba(30, 144, 255,0.5)')
和ctx.fill()
用于填充多边形。ctx.draw()
将所有绘图操作提交到 Canvas 上。
5. 坑
回显的时候,苦恼了很久,为什么点位已经传入,不能回显。后来发现,是draw方法需要加延时。
相关文章:
uni-app在image上绘制点位并回显
在 Uni-app 中绘制多边形可以通过使用 Canvas API 来实现。Uni-app 是一个使用 Vue.js 开发所有前端应用的框架,同时支持编译为 H5、小程序等多个平台。由于 Canvas 是 H5 和小程序中都支持的 API,所以通过 Canvas 绘制多边形是一个比较通用的方法。 1.…...
top命令和系统负载
1 top中的字段说明 top是一个实时系统监视工具,可以动态展现出 CPU 使用率、内存使用情况、进程状态等信息,注意这些显示的文本不能直接使用 > 追加到文件中。 [rootvv~]# top -bn 1 | head top - 20:08:28 up 138 days, 10:29, 4 users, load av…...
算法之要求对任意的i,j,k三个位置,如果i < j < k,都有arr[i] + arr[k] != arr[j],返回构造出的arr。
目录 1. 题目2. 解释3. 思路4. 代码 Code06_MakeNo5. 总结 1. 题目 给定一个正整数M,请构造出一个长度为M的数组arr,要求对任意的i,j,k三个位置,如果i < j < k,都有arr[i] arr[k] ! arr[j]返回构造…...
Y3编辑器文档4:触发器
文章目录 一、触发器简介1.1 触发器界面1.2 ECA语句编辑及快捷键1.3 参数设置1.4 变量设置1.5 实体触发器1.6 函数库与触发器复用 二、触发器的多层结构2.1 子触发器(在游戏内对新的事件进行注册)2.2 触发器变量作用域2.3 复合条件2.4 循环2.5 计时器2.6…...
Ubuntu中安装配置交叉编译工具并进行测试
01-下载获取交叉编译工具的源码 按照博文 https://blog.csdn.net/wenhao_ir/article/details/144325141的方法,把imx6ull的BSP下载好后,其中就有交叉编译工具。 当然,为了将来使用方便,我已经把它压缩并传到了百度网盘ÿ…...
HCIA笔记7--OSPF协议入门
文章目录 0. 路由分类1. OSPF介绍1.1 概念1.2 报文类型 2. 邻接关系的建立2.1 邻居关系的建立2.2 邻接关系的形成2.3 ospf状态机 3. DR与BDR3.1 为什么要有DR和BDR?3.2 DR和BDR的选举原则 4. ospf的配置4.1 内部优先级 5. 问题5.1 三层环路如何解决? Ref…...
文件系统--底层架构(图文详解)
一、文件系统的底层存储与寻址 当我们谈到文件系统的底层结构时,最关键的问题是:文件的数据与元数据(属性)如何存储在磁盘上,以及系统是如何定位这些数据的?在谈及文件系统之前,我们要先对储存…...
温州医院儿童自闭症康复中心:为孩子打开光明未来
在自闭症这一神秘而复杂的神经发育障碍面前,无数家庭曾陷入迷茫与无助。然而,在中国的大地上,有两座灯塔般的存在,它们分别为温州医院儿童自闭症康复中心和广州星贝育园自闭症儿童寄宿制学校,它们用专业的技术和无尽的…...
Tr0ll: 1 Vulnhub靶机渗透笔记
Tr0ll: 1 本博客提供的所有信息仅供学习和研究目的,旨在提高读者的网络安全意识和技术能力。请在合法合规的前提下使用本文中提供的任何技术、方法或工具。如果您选择使用本博客中的任何信息进行非法活动,您将独自承担全部法律责任。本博客明确表示不支…...
网络通信技术
网络通信技术 IP路由基础 什么是路由 路由是指导报文转发的路径信息,通过路由可以确认转发IP报文的路径。路由设备是依据路由转发报文到目的网段的网络设备,最常见的路由设备:路由器。路由设备维护着一张路由表,保存着路由信息。路由的功能 路径选择数据转发、数据过滤维…...
十一、容器化 vs 虚拟化-Docker 使用
文章目录 前言一、Docker Hello World二、Docker 容器使用三、Docker 镜像使用四、Docker 容器连接五、Docker 仓库管理六、Docker Dockerfile七、Docker Compose八、Docker Machine九、Swarm 集群管理 前言 Docker 使用 Docker 容器使用、镜像使用、容器连接、仓库管理、Do…...
npm error Error: Command failed: F:\360Downloads\Software\nodejs\node.exe
前言: 电脑环境:win7 node版本:18.20.0 npm版本:10.9.2 情景再现:电脑上是存在的vuevite的项目且可以正常运行。想着摸鱼的时间复习一下ts语法,所以想创建一个demo。按照 开始 | Vite 官方中文文档 官网创建…...
html中,实现通过拖拽调整图像尺寸
<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>html中拖拽修改图像尺寸</title> <styl…...
sqlmap详解
一.sqlmap -u URL --forms sqlmap -u http://192.168.11.136:1337//978345210/index.php --forms 针对特定的 URL 进行 SQL 注入测试,特别是针对表单(form)的 POST 注入 forms:这个参数告诉 sqlmap 解析并测试目标 URL 中的表单…...
浏览器插件开发实战
浏览器插件开发实战 [1] 入门DEMO一、创建项目二、创建manifest.json三、加载插件四、配置 service-worker.js五、以书签管理器插件为例manifest.jsonpopup.htmlpopup.js查看效果 [2] Vue项目改造成插件一、复习Vue项目的结构二、删除、添加个别文件三、重写build [3] 高级开发…...
【特殊子序列 DP】力扣552. 学生出勤记录 II
可以用字符串表示一个学生的出勤记录,其中的每个字符用来标记当天的出勤情况(缺勤、迟到、到场)。记录中只含下面三种字符: ‘A’:Absent,缺勤 ‘L’:Late,迟到 ‘P’:Pr…...
C/C++流星雨
系列文章 序号直达链接1C/C爱心代码2C/C跳动的爱心3C/C李峋同款跳动的爱心代码4C/C满屏飘字表白代码5C/C大雪纷飞代码6C/C烟花代码7C/C黑客帝国同款字母雨8C/C樱花树代码9C/C奥特曼代码10C/C精美圣诞树11C/C俄罗斯方块12C/C贪吃蛇13C/C孤单又灿烂的神-鬼怪14C/C闪烁的爱心15C/C…...
Docker 安装 Jenkins:2.346.3
准备:已安装Docker,已配置服务器安全组规则 1581 1、拉取镜像 [rootTseng ~]# docker pull jenkins/jenkins:2.346.3 2.346.3: Pulling from jenkins/jenkins 001c52e26ad5: Pull complete 6b8dd635df38: Pull complete 2ba4c74fd680: Pull complet…...
枫清科技高雪峰:从数据到知识,重塑产业智能化的核心驱动力
2024 年 12 月 5 日,由智东西主办的“2024 中国生成式 AI 大会”在上海盛大开幕,汇聚了全球 AI 领域的顶尖专家、行业领袖与技术创新者。枫清科技(Fabarta)创始人兼 CEO 高雪峰应邀出席,并在大会上发表主题演讲&#x…...
【过滤器】.NET开源 ORM 框架 SqlSugar 系列
目录 0、 过滤器介绍 1、表过滤器 (推荐) 1.1 手动添加过滤器 1.2 禁用、清空、备份和还原 1.3 联表查询设置 1.4 动态添加 2、修改和删除用过滤器 2.1 局部设置 2.2 全局设置 (5.1.4.62) 3、子查询用过滤器 4、联表过滤…...
在 Ansys Q3D 中求解直流和交流电感
提取电缆的电感对于确保电气和电子系统的性能和可靠性至关重要。本篇博客文章将介绍使用 Ansys Q3D 求解直流和交流电感的过程。 概述 在这个例子中,我们将考虑一个由两组电缆组成的简单几何:正极和负极,如下所示: 可以使用“自…...
location重定向和nginx代理
文章目录 1 location重定向1.1 概述1.2 rewrite跳转1.3 用例1.4 实验1.4.1 基于域名的跳转1.4.2 基于ip的跳转1.4.3 基于后缀名的跳转 2 nginx的代理2.1 nginx内置变量2.2 实验2.2.1 前提条件2.2.2 正向代理2.2.3 自动代理 1 location重定向 1.1 概述 重定向:就是…...
币安移除铭文市场的深度解读:背后原因及其对区块链行业的影响
引言: 就在昨天,2024年12月10号,币安宣布将移除铭文市场(Inscriptions Market)。这一消息引发了全球加密货币社区的广泛关注,尤其是在比特币NFT和数字收藏品市场快速发展的背景下。铭文市场自诞生以来迅速…...
【论文复现】基于曲率的图重新布线
📝个人主页🌹:Eternity._ 🌹🌹期待您的关注 🌹🌹 ❀ 无基于曲率的图重新布线 论文概述核心算法算法说明关键代码 运行方法数据集配置文件训练和测试 运行结果 论文概述 论文链接 Topping, Jake,…...
scala的Array
特性 类型安全:Scala 中的数组是类型安全的,这意味着一旦声明了数组的类型,就只能存储该类型的元素。 大小固定:数组的大小在创建时确定,之后不能改变。 零索引:Scala 数组与 Java 数组一样,都…...
【HarmonyOS实战开发】鸿蒙JS崩溃分析
当未处理的JS异常导致应用意外退出时,应用会生成对应的JS崩溃日志文件,开发者可通过错误日志查看引起崩溃的代码位置及分析应用崩溃的原因。本文将分别介绍JS崩溃分析思路以及典型分析案例。 一、日志信息 以下是崩溃日志信息中对应字段解释。 Device…...
【Vue3】前端使用 FFmpeg.wasm 完成用户视频录制,并对视频进行压缩处理
强烈推荐这篇博客!非常全面的一篇文章,本文是对该博客的简要概括和补充,在不同技术栈中提供一种可行思路,可先阅读该篇文章再阅读本篇: FFmpeg——在Vue项目中使用FFmpeg(安装、配置、使用、SharedArrayBu…...
与 Cursor AI 对话编程:2小时开发报修维修微信小程序
本文记录了如何通过与 Cursor AI 对话,全程不写一行代码的情况下,完成一个完整的报修小程序。整个过程展示了 AI 如何帮助我们: 生成代码 、解决问题、优化实现、完善细节。 先看一下效果图: 一、项目配置 首先我是这样和 AI 对…...
【机器学习】机器学习的基本分类-无监督学习-主成分分析(PCA:Principal Component Analysis)
主成分分析(Principal Component Analysis, PCA) 主成分分析(PCA)是一种常用的降维技术,用于将高维数据投影到低维空间,同时尽可能保留原数据的主要信息(方差)。 1. PCA 的核心思想…...
工频隔离与高频隔离的优劣对比
工频与高频隔离的优劣以及选择方法的详细介绍: 工频隔离 优点: 隔离效果好:能有效过滤电网上的谐波干扰和负载特性产生的大电流冲击,为负载提供更可靠的保护,适用于对电源稳定性和可靠性要求高的工业、医疗、交通等领…...
前端传入Grule,后端保存到 .grl 文件中
前端传入Grule,后端保存到 .grl 文件中 通过简单的输入框,将Grule的部分拆解成 规则名称 规则描述 规则优先级 规则条件 规则逻辑Grule关键字 when Then 模拟了 if 判断的条件和逻辑部分 类似于 shell 和 ruby 之类的脚本语言,有 then 关键字…...
SpringBoot【十】mybatis之xml映射文件>、<=等特殊符号写法!
一、前言🔥 环境说明:Windows10 Idea2021.3.2 Jdk1.8 SpringBoot 2.3.1.RELEASE 在利用mybatis进行开发的时候,编写sql时可能少不了>、<等比较符号,但是在mapper映射文件中直接使用是不行的,会报错࿰…...
使用Excel 对S型曲线加减速算法进行仿真
项目场景: 项目场景:代码中写了S型加减速算法,相查看生成的加减速数组,直观的展示出来,USB通信一次64字节,对于我几个个32位的频率值不太方便,于是采用Excel进行仿真。 代码中如何生成S加减速曲…...
Java面试宝典 1.13~1.31【2020.5 Beta版】
Java面试宝典 1.13~1.31【2020.5 Beta版】 <a name"14cb060b"></a> 1.Java基础 <a name"22b8b366"></a> 1.13 静态变量与实例变量的区别? 静态变量实例变量定义使用static关键字声明的实例变量在类中声明,但…...
调度系统:使用 Airflow 对 Couchbase 执行 SQL 调度时的潜在问题
使用 Airflow 对 Couchbase 执行 SQL 调度时,通常情况下不会直接遇到与 Couchbase 分布式特性相关的异常,但在某些特定情境下,可能会出现一些与分布式环境、调度和数据一致性相关的潜在问题。以下是一些可能会遇到的问题和建议的解决方案&…...
过载与简单:理解感知
通常情况下,最好的设计是使用最少设计技巧的设计。这是为什么?这一切都是关于人类大脑是如何工作的,它决定了观众对媒体的反应、感受情绪和做出决定。 注意。我们被海量的信息轰炸。不间断地处理所有这些信号会降低我们大脑的注意力。根据微…...
前端加密的方式汇总
目录 一、Base64编码 二、哈希算法 三、对称加密(AES/DES) 四、非对称加密(RSA) 五、加盐 六、Web Cryptography API? 七、总结 随着信息和数据安全重要性的日益凸显,如何保证信息数据在传输的过程中的安全成为开发者重点关注的内容。前端加密通常是指在浏览…...
git新建远程分支后,无法切换
git remote # 列出所有远程主机 git remote update origin --prune # 更新远程主机origin 整理分支 git branch -r # 列出远程分支 git branch -vv # 查看本地分支和远程分支对应关系 git checkout -b gpf origin/gpf # 新建本地分支gpf与远程gpf分支相关…...
HarmonyOS 线性容器List 常用的几个方法
List底层通过单向链表实现,每个节点有一个指向后一个元素的引用。当需要查询元素时,必须从头遍历,插入、删除效率高,查询效率低。List允许元素为null。 List和LinkedList相比,LinkedList是双向链表,可以快速…...
【21天学习AI底层概念】day2 机器学习基础
按照由浅入深的顺序,下一步学习 机器学习(Machine Learning) 的基础是最自然的选择。机器学习是人工智能的核心技术之一,很多AI系统都依赖它。以下是学习路线建议: 第二步:机器学习基础 学习目标ÿ…...
简单的Java小项目
学生选课系统 在控制台输入输出信息: 在eclipse上面的超级简单文件结构: Main.java package experiment_4;import java.util.*; import java.io.*;public class Main {public static List<Course> courseList new ArrayList<>();publi…...
TDengine Flink集成
Flink 集成 TDengine 主要涉及在 Flink 项目中配置与 TDengine 的连接,实现数据的读取和写入。以下是一个详细的指南,介绍如何在 Flink 中集成 TDengine: 一、准备工作 安装并启动 Flink: 下载并解压 Flink 安装包。启动 Flink …...
数据结构和算法-05堆和优先队列-01
堆结构(heap) 生活中我们遇见的数据结构-堆: 查看电影口碑排名第一的电影。 堆的概念 [堆(heap)] 是计算机科学中一类特殊的数据结构的统称。堆通常是一个可以被看做一棵树的数组对象。堆总是满足下列性质: 堆中某个结点的值总是不大于或不小于其父结点的…...
PDFMathTranslate,PDF多语言翻译,批量处理,学术论文,双语对照(WIN/MAC)
分享一个非常实用的PDF文档翻译项目——PDFMathTranslate。作为一个经常逛GitHub的开发者,我总喜欢翻看各种项目附带的论文,虽然大多时候是瞎研究,但却乐在其中。该项目能够完美保留公式、图表、目录和注释,对于需要阅读外文文献的…...
爬虫基础与实践
爬虫技术基础与实践 在当今数字化的时代,数据成为了宝贵的资源。爬虫技术作为获取数据的重要手段,受到了广泛的关注和应用。本文将介绍爬虫的基本概念、工作原理以及一些常用的技术和工具。 一、爬虫的基本概念 爬虫,也称为网络蜘蛛或网络机器…...
uni-app Android平台上架要求的隐私政策提示配置方法【跨端开发系列】
文章目录 前言📖一、前言二、DCloud 数据采集说明三、配置方式3.1 HBuilderX3.2.1及以上版本配置方式3.2 HBuilderX3.2.0及以下版本配置方法3.3 模板提示框3.4 无提示框 四、离线打包配置方式五、模板提示框六、二次确认提示框七、国际化八、隐私协议内容需要注意的…...
在Ubuntu上使用docker compose安装N卡GPU的Ollama服务
在现代计算环境中,利用 GPU 进行计算加速变得越来越重要。下面将讲解如何在Ubuntu上使用docker compose安装N卡GPU的Ollama服务。 1、安装 NVIDIA 容器工具 首先,需要确保你的系统已经安装了 NVIDIA 容器工具 nvidia-container-toolkit。这是让 Docker 容器访问 GPU 的关键…...
中文分词学习
1.安装 jieba 库 !pip install jieba jieba 库是用于中文分词的工具,它通过精确的分词算法来处理文本。通过分词可以将中文句子拆分成单独的词语,这对于自然语言处理任务非常重要,比如文本分类、情感分析、关键词提取。 2.中文文本分词处理…...
Seata 分布式事务
1. 分布式事务介绍 传统单体应用场景下,系统的数据保存在一个数据库实例中,通常场景的关系数据库都能自动提供事务保证,并且这种情况下的事务称为本地事务,能保证原子性、一致性、隔离性、持久性(ACID 特性)…...
Burp入门(10)-IP伪造插件
声明:学习视频来自b站up主 泷羽sec,如涉及侵权马上删除文章 感谢泷羽sec 团队的教学 视频地址:IP伪造和爬虫审计_哔哩哔哩_bilibili 本文详细介绍IP伪造插件Burp Fake IP使用。 一、插件安装 打开Burp Suite。进入扩展标签页。点击添加&…...