在视频上绘制区域:使用Vue和JavaScript实现交互式画布
在数字时代,交互式媒体内容的创建和消费变得越来越普遍。特别是视频内容,它不仅提供了视觉信息,还允许用户与之互动,从而增强了用户体验。本文将介绍如何使用Vue.js框架和JavaScript创建一个交互式组件,该组件允许用户在视频上绘制区域。
技术栈简介
为了实现这一功能,我们将使用以下技术:
- Vue.js:一个渐进式的JavaScript框架,用于构建用户界面。
- HTML5 Canvas:HTML5提供的一个元素,允许通过JavaScript在网页上绘制图形。
- JavaScript:用于实现交互逻辑和处理用户输入。
实现步骤
1. 创建Vue组件
首先,我们需要创建一个Vue组件,它将包含视频播放器和用于绘制的画布。
<template><div><div class="btn"><el-buttontype="primary"plain@click="initDraw"v-if="isDisabled">开始绘制</el-button><el-button type="primary" plain @click="closeDialogCanvas" v-else>清除全部</el-button></div><div class="videoContainer"><video ref="videoPlayer" class="video" :src="videoUrl" controls autoplay></video><div ref="drawArea" class="draw-area"><!-- Canvas将被useDraw函数动态创建并添加到DOM中 --></div></div></div>
</template>
2. 引入绘制逻辑
我们将使用一个自定义的JavaScript模块useDraw.js
,它封装了绘制逻辑。这个模块提供了初始化画布、绘制图形、清除画布等功能,可去资源库下载完整文件。
import useDraw from './useDraw.js';
3. 初始化和控制绘制
在Vue组件的methods
中,我们定义了initDraw
和clearCanvas
方法来初始化画布和清除绘制。
data() {return {graphCoordinateList: [], // 视频区域数据drawInstance: null, // 保存useDraw的实例videoUrl: 'https://www.w3schools.com/html/movie.mp4', // 替换为你的视频URLisDisabled:true,};
},
methods: {// 加载画布initDraw() {this.isDisabled = false;const drawArea = this.$refs.drawArea;const options = {canvasStyle: {lineWidth: 2,strokeStyle: "red",fillStyle: "rgba(255, 0, 0, 0.3)",},initPoints: this.graphCoordinateList,onComplete: (points) => {console.log("绘图完成,坐标点:", points);this.graphCoordinateList = points;},onClear: () => {console.log("画布已清空");},};// 初始化useDraw,并保存实例引用this.drawInstance = useDraw();this.drawInstance.init(drawArea, options);},// 清除画布clearCanvas() {console.log("清除画布");if (this.drawInstance) {// 清除画布并重新初始化this.drawInstance.onClear(); // 调用useDraw的destroy方法this.drawInstance = null; // 重置实例引用// this.initDraw(); // 可以重新初始化绘图环境}},// 清除画布-关闭弹窗closeDialogCanvas() {console.log("清除画布-关闭弹窗");this.graphCoordinateList = [];if (this.drawInstance) {// 清除画布并重新初始化this.drawInstance.onClear(); // 调用useDraw的destroy方法this.drawInstance = null; // 重置实例引用this.initDraw(); // 可以重新初始化绘图环境}},// 父组件调用方法,例: this.$refs.fenceVideoRef.initVideo()initVideo() {this.$nextTick(res=>{console.log(this.graphCoordinateList,this.isDisabled,'视频区域数据');if(this.graphCoordinateList.length > 0){// 如果有值则渲染区域出来this.initDraw();this.isDisabled = false}else{this.isDisabled = true}})},
},
4. 清理资源
在组件销毁前,我们需要清理画布资源,以避免内存泄漏。
// 在组件销毁前清理资源
beforeDestroy() {if (this.drawInstance) {this.drawInstance.destroy();}
},
5. 样式设置
最后,我们需要为视频容器和画布设置样式,以确保它们正确显示。
<style lang="scss" scoped>
.btn {display: flex;justify-content: space-between;margin-bottom: 20px;white-space: nowrap;
}.videoContainer {position: relative;width: 100%;max-width: 100%; /* 根据视频尺寸调整 */height: 700px;.video {width: 100%;height: 100%;background-color: #000; /* 视频加载前背景色 */}.draw-area {width: 100%;height: 90%;position: absolute;top: 0;left: 0;}
}
</style>
结论
通过上述步骤,我们成功地在Vue.js应用中实现了一个交互式的视频绘制组件。用户可以在视频上自由绘制区域,这为视频内容的交互提供了新的可能性。这种技术可以应用于教育、游戏、视频编辑等多个领域,为用户提供更加丰富和个性化的体验。
相关文章:

在视频上绘制区域:使用Vue和JavaScript实现交互式画布
在数字时代,交互式媒体内容的创建和消费变得越来越普遍。特别是视频内容,它不仅提供了视觉信息,还允许用户与之互动,从而增强了用户体验。本文将介绍如何使用Vue.js框架和JavaScript创建一个交互式组件,该组件允许用户…...
31. RabbitMQ顺序消费
1. 前言 上个小节中我们介绍了 RabbitMQ 中如何防止消息丢失,即保证消息发送的 At Least Once 性质,除此之外,如何防止消息被重复消费,即保证消息消费的 Exactly Once 性质,也是业务逻辑中需要考虑的问题。 2. 消息消费顺序 面试官提问:业务中使用了 RabbitMQ 消息队列…...
BERT-BiLSTM-CRF模型实战
文章目录 BERT-BiLSTM-CRF模型项目结构数据预处理运行环境使用方法关于BERT-BiLSTM-CRF参考文章BERT-BiLSTM-CRF模型 使用谷歌的BERT模型在BiLSTM-CRF模型上进行预训练用于中文命名实体识别。 项目结构 bert_bilstm_crf_ner_pytorchtorch_nerbert-base-chinese --…...

npm 安装 与 切换 淘宝镜像
一、镜像源 npm默认镜像源是国外的,安装依赖速度较慢,使用国内的镜像源速度会快一些。 1、设置淘宝镜像源: #最新地址 淘宝 NPM 镜像站喊你切换新域名啦! npm config set registry https://registry.npm.taobao.org(弃用了&…...

在Windows系统上安装的 Arrow C++ 库
在Windows系统上安装的 Arrow C 库 正文第一步第二步第三步第四步注: 检查是否安装成功 吐槽 正文 第一步 git clone gitgithub.com:apache/arrow.git第二步 打开powershell (好像cmd也可以,不过我试了powershell中不报错,cmd中报错,不是很清楚为什么) 打开arrow的目录 cd …...
格雷母线电缆头安装方法视频-武汉正向科技
正向科技|格雷母线电缆头怎么处理? 正向科技格雷母线采用整体热压工艺生产,一次成型,防护等级 IP67,用在直线或环形位移检测,抗污染能力强,防水、油、灰尘、蒸汽等,能在强粉尘、高温的环境下稳定…...

统信服务器操作系统【Cron定时任务服务】
Cron定时任务服务服务介绍、服务管理、服务配置 文章目录 一、功能概述二、功能介绍1. Cron 服务管理2.Cron 服务管理3.Cron 服务配置run-parts一、功能概述 cron是一个可以用来根据时间、日期、月份、星期的组合来 调度对周期性任务执行的守护进程。利用 cron 所提供的功能,可…...
微前端中的路由加载流程
1. 初始化基座应用 基座应用:基座应用是微前端架构中的主应用,负责管理和协调各个子应用的加载和卸载。 初始化:基座应用在启动时会初始化路由配置,注册各个子应用的路由。 2. 注册子应用 子应用需要向基座应用注册自己的路由和…...

Axure大屏可视化模板:跨领域数据分析平台原型案例
随着信息技术的飞速发展,数据可视化已成为各行各业提升管理效率、优化决策过程的重要手段。Axure作为一款强大的原型设计工具,其大屏可视化模板在农业、园区、城市、企业数据可视化、医疗等多个领域得到了广泛应用。本文将通过几个具体案例,展…...
机器学习(1)——线性回归、线性分类与梯度下降
文章目录 线性回归线性分类线性可分数据线性不可分数据逻辑回归支持向量机 梯度下降批量梯度下降随机梯度下降批量随机梯度下降 线性回归 概述: 在一元线性回归中,我们假设目标变量y与特征变量x存在线性关系,模型表达式为: y …...
完整的端到端的中文聊天机器人
这段代码是一个完整的端到端的中文聊天机器人的实现,包括数据处理、模型训练、预测和图形用户界面(GUI),下面是对各个部分功能的详细说明: 1. 导入必要的库 import os os.environ[CUDA_LAUNCH_BLOCKING] = 1import torch import torch.nn as nn import torch.optim as o…...

【有啥问啥】Stackelberg博弈方法:概念、原理及其在AI中的应用
Stackelberg博弈方法:概念、原理及其在AI中的应用 1. 什么是Stackelberg博弈? Stackelberg博弈(Stackelberg Competition)是一种不对称的领导者-追随者(Leader-Follower)博弈模型,由德国经济学…...
【UI自动化】前言
系列文章目录 【UI自动化】前言 自动化不能代替手工测试,自动化都是以手工测试为基础,自动化测试实现的步骤要依赖手工; 文章目录 系列文章目录【UI自动化】前言 自动化测试的类型自动化解决的问题什么是UI测试测试分类一、使用UI自动化的…...

Unity对象池的高级写法 (Plus优化版)
唐老师关于对物体分类的OOD的写法确实十分好,代码也耦合度也低,但是我有个简单的写法同样能实现一样的效果,所以我就充分发挥了一下主观能动性 相较于基本功能,这一版做出了如下改动 1.限制了对象池最大数量,多出来的…...
vue3<script setup>中computed
在 Vue 3 中,<script setup> 语法糖是 Composition API 的一种简化写法,它允许你更简洁地编写组件逻辑。在 <script setup> 中使用 computed 与在普通 <script> 标签中使用 Composition API 的方式类似,但通常我们会借助 i…...
【已解决】使用JAVA语言实现递归调用-本关任务:用循环和递归算法求 n(小于 10 的正整数) 的阶乘 n!。
本关任务:用循环和递归算法求 n(小于 10 的正整数) 的阶乘 n!。 测试说明 平台会对你编写的代码进行测试,比对你输出的数值与实际正确数值,只有所有数据全部计算正确才能通过测试: 测试输入:1…...
BiRefNet 教程:基于 PyTorch 实现的双向精细化网络
BiRefNet 教程:基于 PyTorch 实现的双向精细化网络 BiRefNet 是一个图像分割网络,专注于复杂任务如背景移除、掩码生成、伪装物体检测、显著性目标检测等。该模型结合了编码器、解码器、多尺度特征提取、以及梯度监督机制,能够有效处理不同类…...
Oracle 数据库安装和配置指南(新)
目录 1. 什么是Oracle数据库? 2. 安装前的准备工作 2.1 硬件要求 2.2 软件要求 2.3 下载Oracle安装包 3. Oracle数据库的安装步骤 3.1 Windows系统安装步骤 3.2 Linux系统安装步骤 4. 配置Oracle数据库 4.1 设置环境变量(Linux) 4.…...

JavaScript的注释与常见输出方式
注释 源码中注释是不被引擎所解释的,它的作用是对代码进行解释。Javascript 提供两种注释的写法:一种是单行注释,用//起头;另一种是多行注释,放在/*和*/之间。 单行注释: //这是单行注释 多行注释: /*这是 多行 注…...

深入探索Android开发之Java核心技术学习大全
Android作为全球最流行的移动操作系统之一,其开发技能的需求日益增长。本文将为您介绍一套专为Android开发者设计的Java核心技术学习资料,包括详细的学习大纲、PDF文档、源代码以及配套视频教程,帮助您从Java基础到高级特性,再到A…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文? 多租户隔离:自动为接入设备追加租户前缀,后端按 ClientID 拆分队列。零代码鉴权:将入站用户名替换为 OAuth Access-Token,后端 Broker 统一校验。灰度发布:根据 IP/地理位写…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
docker 部署发现spring.profiles.active 问题
报错: org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...
关于uniapp展示PDF的解决方案
在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项: 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库: npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

Unity中的transform.up
2025年6月8日,周日下午 在Unity中,transform.up是Transform组件的一个属性,表示游戏对象在世界空间中的“上”方向(Y轴正方向),且会随对象旋转动态变化。以下是关键点解析: 基本定义 transfor…...

【Veristand】Veristand环境安装教程-Linux RT / Windows
首先声明,此教程是针对Simulink编译模型并导入Veristand中编写的,同时需要注意的是老用户编译可能用的是Veristand Model Framework,那个是历史版本,且NI不会再维护,新版本编译支持为VeriStand Model Generation Suppo…...