利用canvas封装录像时间轴拖动(uniapp),封装上传uniapp插件市场

已于 2023-12-15 10:40:25 修改
阅读量702 收藏 8
点赞数 7
文章标签： uni-app vue.js
于 2023-12-15 10:38:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38062866/article/details/135011342
版权

gitee项目地址,项目是一个空项目,其中包含了封装的插件,自己阅读,由于利用了canvas所以在使用中暂不支持.nvue,待优化;

项目也是借鉴了github上的一个项目,timeline-canvas,​​​​​​​

​​​​​​​

阳光先做
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas上纯JS实现可滑动时间刻度轴
liangpx.blog
07-18 8542
canvas上纯JS实现可滑动时间刻度轴、刻度轴
使用canvas写的时间轴插件，可以实现拖动、点击返回时间点、增加录像块、放大缩小等功能
04-25
分享一个使用canvas写的时间轴插件 这是一个使用canvas写的时间轴插件，可以实现拖动、点击返回时间点、增加录像块、放大缩小等功能 在我工作项目中用在了视频回放时间轴部分 项目开发刚好用到，找了很久终于合适
基于时间轴的海康DVR视频回放
05-04
1.运行环境 .netframework4.0 vs2005 atl 2.注册组件 运行reg.bat 3.运行 输入海康dvr 信息，然后进行检索回放。
推荐开源项目：Timeline Canvas - 基于HTML5的可交互时间线图表库
最新发布
gitblog_00007的博客
04-01 488
推荐开源项目：Timeline Canvas - 基于HTML5的可交互时间线图表库 项目地址:https://gitcode.com/liaoanran/timeline-canvas 该项目，Timeline Canvas，是一个轻量级、响应式的时间线图表生成器，基于HTML5 Canvas技术和JavaScript编写。它为开发者提供了一种简单且灵活的方式来展示历史事件、项目进度或者任何需要...
canvas在刻度直尺上实现可拖动的时间指针效果
qq_37656005的博客
04-20 795
效果图： html代码： <style> .line-wrapper { width: 700px; position: relative; margin: 10px 0; } .line { position: absolute; padding-left: 5px; height: 120px; top: 0; cursor: ew-res
使用canvas编写时间轴插件
weixin_30733003的博客
03-02 1558
使用canvas编写时间轴插件 背景 项目中有一个视频广场的功能，需要一个时间轴类似视频播放中进度条功能一样显示录像情况，并且可以点击、拖动、放大缩小展示时间轴，获取到时间轴的某个时间。原来的时间轴是使用了timeslider 这个插件，原插件中是使用原生的js 绘制dom节点来显示时间轴，后面使用起来发现每一次重绘就要操作上百个dom节点，性能很差，所以决定采用canvas来重写时间轴。 效果如...
视频回放时间轴
weixin_56421672的博客
02-20 2514
前端手写时间轴
vue+canvas 录像类的时间进度组件（白嫖党永不为奴！！！）
qq_45599738的博客
10-27 1935
vue+canvas 视频监控一类的时间进度条控件
html 、canvas、 jquery 时间轴拖动效果
12-17
运用Canvas 依赖jquery 实现 时间轴拖动效果 应用场景：视频回放，定时定位播放时间等等。
js封装成插件_Canvas统计图插件编写实例
12-12
之前就说过，我想写一个canvas画统计图的插件，现在写好了 先说下实现的功能吧： 　1.可以通过自定义X轴坐标属性和Y轴坐标属性按比例画出统计图 　2.可以选择画折现图还是柱形统计图，或者两者都实现 　3.可以自由...
html2canvas将HTML内容写入Canvas生成图片 uniapp
12-16
html2canvas 能够实现在浏览器端、app端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。
timeline:使用 GWT 和 HTML5（纯 Canvas）制作的时间轴库
07-03
时间线 使用 GWT 和 HTML5 制作的时间轴库 特征： 整个小部件是一个画布。 一切都显示在里面 在 GWT 中实现 面向事件：触发事件 BrowseEvent(Date) 和 IntervalChange(Date, Date)，因此可以使用更复杂的小部件进一步扩展 支持 timezoneJS 库。 开发人员可以指定库使用的时区。 您可以在阅读更多相关信息 鼠标浏览：拖放平移，鼠标滚轮缩放 行可以使用图标和标签进行自定义 时间块可定制颜色
封装canvas各种方法的vue组件
09-07
封装canvas各种方法的vue组件、文字、多行文字7矩形、图片功能的vue；canvas组件
视频回放，进度条时间显示（vue3）
qq_70032585的博客
11-17 790
【代码】视频回放，进度条时间显示（vue3）
video-time-slider，用于IVR视频回播的时间选择插件
liyoro的专栏
01-10 2228
video-time-slider，用于IVR视频回播的时间选择插件，为项目微信小程序制作，基于uni-app开发
js自定义时间轴组件
wcxrib的博客
01-22 794
自定义的时间轴组件对录像记录进行加载渲染,播放器回调时间与下面时间轴相互联动，集拖动、点击、缩放、无限加载等于一体的时间轴组件。
vue 视频 时间进度条组件-使用npm组件
肖帅的博客
03-29 3630
vue 视频 时间进度条组件 有些视频是以视频流的形式进行渲染的，没有视频滚动条，所以就写了24h的时间组件 组件已上传到npm上，npm i as-time-line下载安装即可，最少需要1.2.0版本 https://www.npmjs.com/package/as-time-line 1，安装 npm i as-time-line -S 2，引用，在vue里面的main.js中引入，添加代码如下 import timeLine from "as-time-line"; import "as-
uni-app之使用内置组件Canvas
码奴一只猿
07-04 9944
UniApp 是一个基于 Vue.js 的跨平台开发框架，它允许开发者使用一套代码同时构建多个平台的应用程序。UniApp 提供了丰富的内置组件，其中包括 Canvas 组件，用于在应用中绘制图形和实现图形动画效果。本文将详细介绍 UniApp 内置组件 Canvas 的使用方法，以及提供示例代码和说明，帮助读者快速上手。
uniapp 使用 wxml2canvas插件画圆角图片
04-04
1. 安装wxml2canvas插件 在uniapp项目中的HBuilderX编辑器中，打开插件市场，搜索wxml2canvas插件并安装。 2. 引入wxml2canvas插件 在需要使用wxml2canvas插件的页面中，引入wxml2canvas插件： ```javascript import wxml2canvas from '@/wxml2canvas/wxml2canvas.js'; ``` 3. 绘制圆角图片 在页面中，使用wxml2canvas插件的draw函数绘制圆角图片： ```javascript draw() { let that = this; let query = uni.createSelectorQuery().in(this); query.select('#myCanvas').fields({ node: true, size: true }).exec((res) => { const canvas = res[0].node; const ctx = canvas.getContext('2d'); const dpr = uni.getSystemInfoSync().pixelRatio; canvas.width = res[0].width * dpr; canvas.height = res[0].height * dpr; ctx.scale(dpr, dpr); const image = canvas.createImage(); image.src = that.data.imageUrl; image.onload = () => { // 绘制圆角图片 that.drawRoundImage(ctx, image, 0, 0, res[0].width, res[0].height, 10); }; }); }, drawRoundImage(ctx, img, x, y, w, h, r) { ctx.save(); ctx.beginPath(); // 绘制圆角矩形 ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5); ctx.lineTo(x + w - r, y); ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2); ctx.lineTo(x + w, y + h - r); ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5); ctx.lineTo(x + r, y + h); ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI); ctx.closePath(); ctx.clip(); // 绘制图片 ctx.drawImage(img, x, y, w, h); ctx.restore(); } ``` 4. 在页面中使用canvas标签 在页面中添加canvas标签，并赋予一个id值： ```html <canvas id="myCanvas" style="width: 100%; height: 300rpx;"></canvas> ``` 5. 调用draw函数 在页面的onLoad函数中，调用draw函数绘制圆角图片： ```javascript onLoad() { this.draw(); }, ``` 以上就是使用wxml2canvas插件在uniapp中绘制圆角图片的完整流程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值