使用canvas开发框选功能模块demo

skyseey

已于 2022-03-28 10:41:29 修改

阅读量256

点赞数

文章标签： javascript ui

于 2022-03-28 10:38:10 首次发布

本文链接：https://blog.csdn.net/sky8880/article/details/123789162

版权

场景：新需求需要在实时视频框选算法识别的区域.

第一版本开发：使用td类似画图去遍历很呆板，线段容易出现锯齿，新能不强---舍弃

最新一版本开发：使用canvas去开发，新能改善，去除锯齿等问题

功能如图👇：

功能：

1.点击出现线段

2.双击闭合或者单击闭合

3.颜色改变-线段粗细改变-线段拐角添加圆点或者其它样式自定义接口

4.清除功能

5.输出点位位置

注意：需要源码关注留言✌

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

skyseey

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
使用canvas开发框选功能模块demo

使用canvas开发-框选功能模块demo
复制链接

扫一扫

微信小程序利用canvas画出根据文字自适应的边框

CrazBarry的博客

07-16

6257

1.需求生成海需要画出一个中空带边框的的tag，如下图。众所周知，微信小程序里的canvas画图都是需要自己一点点画出来，不想html有htmlToCanvas，直接写HTML就可以转成canvas. 2.实现参考链接首先要实现圆角边框，再把字体填充进去，我在网上找到一个方法，直接拿过来改了一下，代码如下： //画圆角边框 roundRect(ctx, x, y, w,...

canvas绘制矩形

weixin_43269800的博客

02-13

284

HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径；绘制矩形的三种方法首先要获取画布和画笔 var canvas = document.querySelector("#test");//获取画布 if(canvas.getContext){ var ctx = canvas.getContext("2d");//获取画笔 } 绘制方法的A...

1 条评论您还未登录，请先登录后发表或查看评论

Canvas绘制控件——关于Python的tkinter模块Canvas控件绘制组件的一些问题(scrollregien)：画布的滚动超出预定范围

最新发布

m0_61067876的博客

05-11

683

🍅 硬核资料：关注即可领取PPT模板、简历模板、行业经典书籍PDF。🍅 技术互助：技术群大佬指点迷津，你的问题可能不是问题，求资源在群里喊一声。🍅 面试题库：由技术群里的小伙伴们共同投稿，热乎的大厂面试真题，持续更新中。🍅 知识体系：含编程语言、算法、大数据生态圈组件（Mysql、Hive、Spark、Flink）、数据仓库、Python、前端等等。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化学习资料的朋友，可以戳这里获取。

【HTML】【一文全解Canvas】从初学到实战，彻底掌握前端绘图神器！

weixin_55846296的博客

06-09

9481

前言一、Canvas 概述二、在 HTML 中使用 Canvas三、Canvas 绘制图形1、绘制矩形2、绘制圆形a. 绘制实心圆形b. 绘制空心圆形四、Canvas 绘制文本五、Canvas 绘制图片六、Canvas 动画效果1、setInterval() 实现动画2、requestAnimationFrame() 实现动画七、Canvas 使用注意事项八、利用Canvas绘制挂钟（原理-绘制弧形）- 简单练习1、还原坐标系2、绘制背景3、绘制时钟指针4、循环绘制。

canvas开发手册完整版

零凌林的博客

04-27

2868

本文主要是关于对于canvas开发中的一些重要的语法进行整理以及附加部分demo源码帮助理解。当然本文中的语法并不完全，比较少用的语法还是要在真实的开发场景中结合官方文档进行开发

快速掌握Canvas，开发出更好的视觉和交互体验

黑马程序员官方博客

07-06

613

Canvas的应用非常广泛：首先是可视化数据的应用，比如说：百度的ECharts 、阿里的G2等图表可视化插件；其次是游戏的应用， Canvas游戏在流畅度和跨平台方面都表现很好；还有图形编辑器的应用 ……快速玩转超炫酷Canvas。

canvas 实践--绘制选择框和注册点击事件

weixin_42202310的博客

10-18

1064

生成两个元素之间的连线，需要双击弹出选框，然后点击选框中的某一点，圆点变为红色；其实最终目的是要再点击另一个元素，生成两个元素之间的连线，在这里我们只讲到选框和点击事件的实现，让我们一起来看一下如何实现的。

ES6中module模块化开发实例浅析

11-30

在ES6中，模块化开发引入了一种全新的方式来组织和管理JavaScript代码，解决了传统JavaScript中因全局变量引发的命名冲突问题。ES6模块不是基于对象的，而是基于静态的导出与导入，使得代码更加清晰和易于维护。以下...

reactive-canvas-demo

06-25

在本项目"reactive-canvas-demo"中，我们探索了如何在React框架内利用JavaScript进行交互式画布操作。这个示例着重展示了React组件与实时数据更新的结合，特别是通过集成Meteor来实现跨浏览器窗口的同步效果。让我们...

eclipse gef demo

04-27

Eclipse插件是基于OSGi（Open Service Gateway Initiative）架构的，它允许模块化地开发和扩展IDE的功能。开发Eclipse插件需要安装Eclipse IDE for RCP and RAP Developers版本，该版本包含了开发插件所需的工具和库...

基于HTML5的websocket和PHP技术开发的聊天室demo

04-15

9. **说明.txt**：这个文件可能提供了关于如何运行和使用这个聊天室demo的详细步骤和注意事项。通过深入理解这些关键知识点，开发者可以学习如何使用WebSocket和PHP构建实时的、交互性强的Web应用，如聊天室，并将...

CANVAS实现鼠标绘制矩形框

07-30

基于canvas的鼠标绘制矩形框的demo，多个canvas对象下支持选中，平移，删除操作，代码用VUE实现的

pureMvc框架下的flexdemo

04-05

1. **PureMVC模块**：PureMVC提供了模块化机制，使得不同功能可以分隔到不同的模块中，方便管理和扩展。 2. **PureMVC核心类**：包括`MacroCommand`、`Command`、`Mediator`、`Proxy`和`Notifier`等，它们是PureMVC...

Canvas 从 0 到 1 -- 开发 2D 游戏《保卫家园》-- 【上篇】

世界和我们都不该止步于此

08-18

2473

Canvas 是 HTML5 提供的一种新的标签形式 - 画布标签通过名字就不难理解这个标签的意思，就和一张白纸一样，我们想呈现什么样的画面都可以（前提你需要一根画笔 – JavaScript）Canvas 是一个矩形画布，可以使用 JavaScript 在画布上进行作画，控制每一个像素，也就是说他本身不具备绘画功能，是需要 JavaScript 来进行作画的，Canvas 非常的丰富多彩，拥有多种的绘制路径，矩形，图形，字符，图像等等方法，使得 Web 网页更加的美丽。...

canvas画板之绘画元素的框选

weixin_44719258的博客

12-06

1212

canvas画板之绘画元素的框选，可以点击元素进行框选，并按住手柄进行缩放移动，且可以点击backspace键删除元素

Canvas详解

热门推荐

发果叁

05-23

3万+

一、canvas 简介 1.1 什么是 canvas？（了解）是 HTML5 提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆布画布 Canvas 是一个矩形区域的画布，可以用 JavaScript 在上面绘画。控制其每一个像素。 canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 HTML5 之前的 web 页

Canvas可视化开发技术知识点总结

qq_52932975的博客

03-11

619

canvas基础使用。Canvas是HTML5新推出的绘图组件，类似于一个布局于页面上的画布，通过构建画笔，给画笔添加粗细，颜色，实现绘制路径、图形、字符等功能。

【JS】canvas实现的类似选择框的效果界面

飘逸者打瞌睡

04-26

400

用的canvas实现的效果，点击获取或重点的颜色信息。

HTML5Canvas实现简易画图工具（铅笔，直线，矩形，圆，文本框，橡皮擦等）

m0_60014407的博客

08-03

2313

初学Canvas，用canvas做了简单的画图工具体会并熟悉了一下大致的实现方案。

canvas实现框选

09-15

要在Canvas上实现框选功能，可以按照以下步骤进行操作： 1. 监听鼠标事件：使用`mousedown`、`mousemove`和`mouseup`等事件来捕获鼠标在Canvas上的操作。 2. 记录起始点：在鼠标按下时，记录下鼠标的坐标作为框选的起始点。 3. 绘制选择框：在鼠标移动过程中，根据鼠标的当前位置和起始点的位置计算出选择框的宽度和高度，并在Canvas上绘制一个边框矩形来表示选择框。 4. 确定选中元素：在鼠标松开时，根据选择框的位置和大小，判断Canvas上哪些元素被选择到。下面是一个示例代码，可以帮助你理解如何实现这个功能： ```javascript // 获取Canvas元素 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 记录起始点和选择框的位置 let startX, startY, width, height; // 保存所有可选元素的位置 const elements = [ { x: 50, y: 50, width: 50, height: 50 }, { x: 150, y: 100, width: 50, height: 50 }, { x: 200, y: 200, width: 100, height: 100 } ]; // 监听鼠标事件 canvas.addEventListener('mousedown', (e) => { startX = e.clientX - canvas.offsetLeft; startY = e.clientY - canvas.offsetTop; }); canvas.addEventListener('mousemove', (e) => { if (startX && startY) { width = e.clientX - canvas.offsetLeft - startX; height = e.clientY - canvas.offsetTop - startY; // 清空Canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制选择框 ctx.strokeStyle = 'blue'; ctx.strokeRect(startX, startY, width, height); } }); canvas.addEventListener('mouseup', () => { // 确定选中元素 const selectedElements = elements.filter((element) => { return element.x >= startX && element.x + element.width <= startX + width && element.y >= startY && element.y + element.height <= startY + height; }); // 打印选中元素 console.log(selectedElements); // 清空选择框 startX = null; startY = null; width = null; height = null; }); ``` 在上面的代码中，我们使用`mousedown`事件记录起始点，使用`mousemove`事件计算选择框的位置和大小，并在Canvas上绘制选择框。在`mouseup`事件中，我们根据选择框的位置和大小判断哪些元素被选中，并打印出来。你可以根据自己的需求进行修改和扩展，比如添加元素的绘制、多选等功能。希望对你有所帮助！如果还有其他问题，请随时提问。