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

记录--前端实现登录拼图验证

news 文章来源：https://blog.csdn.net/qq_40716795/article/details/129036379 2025/5/9 3:51:05

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

前言

不知各位朋友现在在web端进行登录的时候有没有注意一个变化，以前登录的时候是直接账号密码通过就可以直接登录，再后来图形验证码，数字结果运算验证，到现在的拼图验证。这一系列的转变都是为了防止机器操作，但对于我们来说，有亿点麻烦，但也没办法呀。

今天我们也一起来做一个制造亿点麻烦的人，实现一个拼图验证。

实现原理

这个实现原理并不复杂，我们只需要一张图作为我们的拼接素材，我们再单独弄一个盒子，然后移动它，到我们的指定位置，到达指定范围内即验证通过，反之验证未通过。

既然原理我们知道了，那我们就开干吧。

实现前端登录拼图验证

本篇文章以 css 为主， javascript为辅实现。

搭建框架

我们要实现这个功能，我们需要先搭建出来一个框架。

// css<style>.check{width: 400px;height: 300px;background-repeat: no-repeat;background-size: 100% 100%;background-image: url(https://img0.baidu.com/it/u=2028084904,3939052004&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);}
</style>// html<div class="check"></div>

我们画出来后，它就长下面图这样。

添加被校验区域及校验区域

我们需要添加一个被校验的区域及校验区域，用来做我们的校验，像下图这两个东西。

这里我们使用伪类来实现这两个区域。

校验区域

    .check::before{content: '';width: 50px;height: 50px;background: rgba(0, 0, 0, 0.5);border: 1px solid #fff;position: absolute;top: 100px;left: 280px;}

这样一个校验区域就做好了。

被校验区域

这里我们需要使用到background-position根据我们的校验区域大小进行切出我们的被校验区域。

background-image和background-repeat我们直接继承，background-position设置为校验区域的坐标位置(也就是距离top和left的距离)，我们将background-size图片大小设为原盒子的大小。这样我们就得到了校验区域的那一片区域，也就是我们的被校验区域了。

    .check-child{content: '';width: 50px;height: 50px;border: 1px solid #fff;background-image: inherit;background-repeat: inherit;background-size: 400px 300px;background-position: -280px -100px;position: absolute;top: 100px;left: 10px;}// html<!-- 被校验区域 --><div class="check-child"></div>

添加拖动条

这里我们两个区域都添加完了，我们需要添加一个拖动条。

我们先添加一个拖动区域。

    // css.drag{width: 400px;height: 50px;background-color: #e3e3e3;margin-top: 10px;position: relative;}// html<div class="drag"></div>

现在拖动区域有了，我们需要在拖动区域内添加一个可拖动的盒子，及操作说明，不然看起来交互效果不友好。

添加可拖动的盒子及交互说明

我们添加一个可以拖动的盒子。

    // css.drag-child{width: 50px;height: 50px;background-color: aquamarine;z-index: 10;position: absolute;top: 0;left: 0;}// html<!-- 可拖动的盒子 --><div class="drag-child"></div>

 为了我们友好的交互，我们在拖动区域内给他添加操作说明。

    // css.drag-tips{display: flex;align-items: center;justify-content: end;width: 95%;height: 100%;margin: 0 auto;font-size: 12px;color: #8a8a8a;}// html<!-- 可拖动的盒子 --><div class="drag-tips"><span>按住左边按钮向右拖动完成上方图像验证</span></div>

拖动条动起来

这一步我们需要让我们的拖动盒子动起来，让他可以在拖动区域内随意的左右拖动。

    // 获取元素实例const drag = document.querySelector('.drag-child')// 声明鼠标按下事件const dragMouseDown = event => {// 添加鼠标移动事件document.addEventListener('mousemove', dragMouseMove)}// 监听鼠标移动事件const dragMouseMove = event => {// 获取当前 x 轴坐标const { offsetX } = eventif(offsetX < 0 || offsetX > 350){return}// 修改可移动盒子的 x 轴坐标drag.style.transform = `translateX(${offsetX}px)`}// 结束鼠标监听事件const dragMouseUP = event => {// 移除鼠标移动事件document.removeEventListener('mousemove', dragMouseMove)}// 添加鼠标按下事件document.addEventListener('mousedown', dragMouseDown)// 添加鼠标弹起事件document.addEventListener('mouseup', dragMouseUP)

现在我们的盒子就可以正常的拖动了，但现在它还有几个问题，我们后面来解决。

  1. 提示文字会被选中；
  2. 在拖动区域内拖动会闪烁；

联动被校验区域

我们先让被校验区域跟着我们的拖动动起来。

    // 图形校验const check = document.querySelector('.check-child')// 修改被校验区域坐标check.style.left = `${offsetX}px`

这样我们的被校验区域就能够跟着动了，我们声明一个方法用来表示，通过校验的回调。

    // 通过校验回调const success = () => {console.log('通过校验');}// 监听鼠标移动事件const dragMouseMove = event => {// 获取当前 x 轴坐标const { offsetX } = eventif(offsetX < 0 || offsetX > 350){return}// 修改可移动盒子的 x 轴坐标drag.style.transform = `translateX(${offsetX}px)`// 修改被校验区域坐标check.style.transform = `translateX(${offsetX}px)`if(offsetX >= 278 && offsetX <= 285){// 执行回调success()}}

添加交互动画

这里我们在鼠标移出监听的时候添加一个动画，当当前未通过校验的时候我们给他还原到初始位置。

@keyframes move {to {transform: translateX(0);}
}

    // 结束鼠标监听事件const dragMouseUP = event => {// 移除鼠标移动事件document.removeEventListener('mousemove', dragMouseMove)// 获取当前 x 轴坐标const { offsetX } = eventif(offsetX < 278 || offsetX > 285){// 修改可移动盒子的 x 轴坐标drag.style.animation = 'move 0.5s ease-in-out'// 修改被校验区域坐标check.style.animation = 'move 0.5s ease-in-out'// 动画结束监听回调const animationEnd = ()=>{// 修改可移动盒子的 x 轴坐标drag.style.transform = `translateX(${0}px)`// 修改被校验区域坐标check.style.transform = `translateX(${0}px)`// 清除动画属性drag.style.animation = ''check.style.animation = ''// 移出动画结束监听document.removeEventListener("animationend", animationEnd)}// 添加动画结束监听document.addEventListener("animationend", animationEnd)}}

当我们未通过校验，且放开鼠标的时候，它就会自动回到初始位置。

解决遗留问题

1、 提示文字会被选中

我们在提示文字的样式中添加user-select: none;，禁用掉文字选择。

    /* 提示文字说明 */.drag-tips{display: flex;align-items: center;justify-content: end;width: 95%;height: 100%;margin: 0 auto;font-size: 12px;color: #8a8a8a;user-select: none;z-index: 1;position: absolute;top: 0;left: 0;}

2、 在拖动区域内拖动会闪烁

我们将我们刚刚使用的offsetX改为pageX。这里需要注意一下边距偏移量的问题哦。

    // 监听鼠标移动事件const dragMouseMove = event => {console.log(event);// 获取当前 x 轴坐标const { pageX }  = eventif(pageX < 0 || pageX > 350){return}// 修改可移动盒子的 x 轴坐标drag.style.transform = `translateX(${pageX}px)`// 修改被校验区域坐标check.style.transform = `translateX(${pageX}px)`if(pageX >= 278 && pageX <= 285){// 执行回调success()}}// 结束鼠标监听事件const dragMouseUP = event => {// 移除鼠标移动事件document.removeEventListener('mousemove', dragMouseMove)// 获取当前 x 轴坐标const { pageX } = eventif(pageX < 278 || pageX > 285){// 修改可移动盒子的 x 轴坐标drag.style.animation = 'move 0.5s ease-in-out'// 修改被校验区域坐标check.style.animation = 'move 0.5s ease-in-out'// 动画结束监听回调const animationEnd = ()=>{// 修改可移动盒子的 x 轴坐标drag.style.transform = `translateX(${0}px)`// 修改被校验区域坐标check.style.transform = `translateX(${0}px)`// 清除动画属性drag.style.animation = ''check.style.animation = ''// 移出动画结束监听document.removeEventListener("animationend", animationEnd)}// 添加动画结束监听document.addEventListener("animationend", animationEnd)}}

效果图

我们看一下效果图。

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>drag</title><style>*{margin: 0;padding: 0;}body{padding: 20px;}/* 图形拼图验证码 */.check{width: 400px;height: 300px;background-repeat: no-repeat;background-size: 100% 100%;background-image: url(https://img0.baidu.com/it/u=2028084904,3939052004&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);position: relative;}.check::before{content: '';width: 50px;height: 50px;background: rgba(0, 0, 0, 0.5);border: 1px solid #fff;position: absolute;top: 100px;left: 280px;}.check-child{content: '';width: 50px;height: 50px;border: 1px solid #fff;background-image: inherit;background-repeat: inherit;background-size: 400px 300px;background-position: -280px -100px;position: absolute;top: 100px;left: 0;}/* 拖动条 */.drag{width: 400px;height: 50px;background-color: #e3e3e3;margin-top: 10px;position: relative;}/* 可拖动的盒子 */.drag-child{width: 50px;height: 50px;background-color: aquamarine;z-index: 10;position: absolute;top: 0;left: 0;}/* 提示文字说明 */.drag-tips{display: flex;align-items: center;justify-content: end;width: 95%;height: 100%;margin: 0 auto;font-size: 12px;color: #8a8a8a;user-select: none;z-index: 1;position: absolute;top: 0;left: 0;}@keyframes move {to {transform: translateX(0);}}</style>
</head>
<body><!-- 图形校验区域 --><div class="check"><!-- 被校验区域 --><div class="check-child"></div></div><!-- 拖动条 --><div class="drag"><!-- 操作说明 --><div class="drag-tips"><span>按住左边按钮向右拖动完成上方图像验证</span></div><!-- 可拖动的盒子 --><div class="drag-child"></div></div>
</body>
<script>// 获取元素实例const drag = document.querySelector('.drag-child')// 图形被校验区域const check = document.querySelector('.check-child')// 通过校验回调const success = () => {console.log('通过校验');}// 声明鼠标按下事件const dragMouseDown = event => {// 添加鼠标移动事件document.addEventListener('mousemove', dragMouseMove)}// 监听鼠标移动事件const dragMouseMove = event => {// 获取当前 x 轴坐标const { pageX }  = eventif(pageX < 0 || pageX > 350){return}// 修改可移动盒子的 x 轴坐标drag.style.transform = `translateX(${pageX}px)`// 修改被校验区域坐标check.style.transform = `translateX(${pageX}px)`if(pageX >= 278 && pageX <= 285){// 执行回调success()}}// 结束鼠标监听事件const dragMouseUP = event => {// 移除鼠标移动事件document.removeEventListener('mousemove', dragMouseMove)// 获取当前 x 轴坐标const { pageX } = eventif(pageX < 278 || pageX > 285){// 修改可移动盒子的 x 轴坐标drag.style.animation = 'move 0.5s ease-in-out'// 修改被校验区域坐标check.style.animation = 'move 0.5s ease-in-out'// 动画结束监听回调const animationEnd = ()=>{// 修改可移动盒子的 x 轴坐标drag.style.transform = `translateX(${0}px)`// 修改被校验区域坐标check.style.transform = `translateX(${0}px)`// 清除动画属性drag.style.animation = ''check.style.animation = ''// 移出动画结束监听document.removeEventListener("animationend", animationEnd)}// 添加动画结束监听document.addEventListener("animationend", animationEnd)}}// 添加鼠标按下事件document.addEventListener('mousedown', dragMouseDown)// 添加鼠标弹起事件document.addEventListener('mouseup', dragMouseUP)</script>
</html>

本文转载于：

https://juejin.cn/post/7175818459379417146

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

相关文章：

记录--前端实现登录拼图验证

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 前言 不知各位朋友现在在web端进行登录的时候有没有注意一个变化&#xff0c;以前登录的时候是直接账号密码通过就可以直接登录&#xff0c;再后来图形验证码&#xff0c;数字结果运算验证&#xff0c…...

编程日记 2023/2/15 15:21:03

【Go语言基础】Go语言中的map集合详细使用(附带源码）

文章目录Go语言中的map集合1-1 定义1-2 map遍历1-3 map集合删除1-4 map是引用类型Go语言中的map集合 Go 语言提供了内置类型 map集合&#xff0c;它将一个值与一个键关联起来&#xff0c;可以使用相应的键检索值。 map是一种集合&#xff0c;可以像遍历数组或切片那样去遍历它…...

编程日记 2023/2/15 15:19:55

C++11 lambda

Lambda 介绍 Lambda 函数也叫匿名函数&#xff0c; 是C 11中新增的特性; 1. Lambda函数的好处 如果你的代码里面存在大量的小函数&#xff0c;而这些函数一般只被调用一次&#xff0c;那么将他们重构成 lambda 表达式。 Lambda函数使代码变得更加紧凑、更加结构化和更富有表现…...

编程日记 2023/2/15 15:18:47

【新】华为OD机试 - 分苹果（Python）

分苹果 题目 AB两个人把苹果分为两堆 A希望按照他的计算规则等分苹果 他的计算规则是按照二级制加法计算 并且不计算进位12+5=9(1100+0101=9), B的计算规则是十进制加法, 包括正常进位,B希望在满足A的情况下获取苹果重量最多 输入苹果的数量和每个苹果重量 输出满足A的情况下…...

编程日记 2023/2/15 15:17:37

Python 模块

Python 模块(Module)&#xff0c;是一个 Python 文件&#xff0c;以 .py 结尾&#xff0c;包含了 Python 对象定义和Python语句。 模块让你能够有逻辑地组织你的 Python 代码段。 把相关的代码分配到一个模块里能让你的代码更好用&#xff0c;更易懂。 模块能定义函数&#…...

编程日记 2023/2/15 15:16:27

gdb调试功能从零到会（Linux详解）

目录 &#x1f440; 1.安装gdb &#x1f440;2.判断是否安装成功 &#x1f440;3.改成debug方式发布。 &#x1f440; 4.gdb功能简介 前言 gdb是Linux 下功能全面的调试工具。gdb支持断点、单步执行、打印变量、观察变量、查看寄存器、查看堆栈等调试手段。在Linux环境软件…...

编程日记 2023/2/15 15:15:18

【C语言学习笔记】：数组、指针相关面试题

无特殊说明情况下&#xff0c;下面所有题s目都是linux下的32位C程序。 「1、计算以下sizeof的值。」 char str1[] {a, b, c, d, e}; char str2[] "abcde";char *ptr "abcde";char book[][80]{"计算机应用基础","C语言","C程…...

编程日记 2023/2/15 15:14:09

go语言环境配置 项目启动

一 安装go语言 go语言各个版本之间兼容性比较差。所以可能你需要安装固定的版本 1 安装最新版的go brew install go2 查看go可以安装的版本 brew search go3 安装指定版本的go brew install go1.134 查看安装的go语言的版本 go version5 查看go的安装路径 which go || w…...

编程日记 2023/2/15 15:11:52

Springboot 使用插件 自动生成Mock单元测试 Squaretest

缘起 很多公司对分支单测覆盖率会有一定的要求&#xff0c;比如 单测覆盖率要达到 60% 或者 80%才可以发布。 有时候工期相对紧张&#xff0c;就优先开发功能&#xff0c;测试功能&#xff0c;然后再去补单元测试。 但是编写单元测试又比较浪费时间&#xff0c;有没有能够很大…...

编程日记 2023/2/15 15:10:44

「JVM 执行引擎」栈架构的字节码的解释执行引擎

JVM 执行引擎在执行 Java 代码时有解释执行&#xff08;通过解释器执行&#xff09;和编译执行&#xff08;通过即时编译器产生本地代码执行&#xff09;两种选择&#xff1b; HotSpot 实际的实现中&#xff0c;模版解释器工作时&#xff0c;并不是按照概念模型中进行机械式计…...

编程日记 2023/2/15 15:09:37

SSM项目-商城后台管理系统

SSM项目-商城后台管理系统开发说明开发环境项目界面演示项目功能具体的技术指标开发过程1、搭建SSM框架1.1、建库建表1.2、新建Maven工程1.3、配置pom.xml1.4、目录结构1.5、jdbc.properties1.6、mybatis-config.xml1.7 两个Spring的配置文件applicationContext_dao.xmlapplica…...

编程日记 2023/2/15 15:08:28

什么是装运单IFTMIN?

符合EDIFACT国际报文标准的IFTMIN主要用于传输电子运输订单&#xff0c;这些装运单作为EDI数据交换的一部分&#xff0c;由客户或托运人发送给物流服务提供商。通过EDI传输的运输信息可以被用来计划当前所需的运输能力&#xff0c;并且物流服务提供商也可以据此提前将包装材料准…...

编程日记 2023/2/15 15:07:18

深度负反馈

负反馈放大电路的方块图因为负反馈放大电路有四种组态&#xff0c;而且对于同一种组态&#xff0c;具体电路也各不相同&#xff1b;所以为了研究负反馈放大电路的共同规律&#xff0c;可以利用方块图来描述所有电路一.负反馈放大电路的方块图表示法任何负反馈放大电路都可以用下…...

编程日记 2023/2/15 15:06:09

【每日随笔】手指训练 ( 产品需求探索、技术无关 | 手指训练作用 | 哪些人需要手指训练 | 手指操 | 手指康复训练器材 )

文章目录一、手指训练作用二、哪些人需要手指训练三、手指操四、手指康复训练器材产品需求探索 , 研究下手指训练的市场 , 前景 , 是否可以开发 ; 一、手指训练作用 手指训练作用 : 改善 上肢协调性手眼 协调性训练提高 手指 抓握 能力提高 手指 灵活性提高 上肢运动 准确性 和…...

编程日记 2023/2/15 15:05:02

Apple Safari 16.3 - macOS 专属免费浏览器 (独立安装包免费下载)

Safari 浏览器 16 for macOS Montery, Big Sur 请访问原文链接&#xff1a;https://sysin.org/blog/apple-safari-16/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;www.sysin.org 之前 Safari 浏览器伴随 macOS 更新一起发布&#xff…...

编程日记 2023/2/15 15:02:45

【java】Spring Boot --Spring Boot 集成 MyBatis

文章目录1. 前言2. 实例场景3. 数据库模块实现4. Spring Boot 后端实现4.1 使用 Spring Initializr 创建项目4.2 引入项目依赖4.3 数据源配置4.4 开发数据对象类4.5 开发数据访问层4.6 添加 MyBatis 映射文件5. 测试6. 小结1. 前言 企业级应用数据持久层框架&#xff0c;最常见…...

编程日记 2023/2/15 15:01:39

python正则表达式

python正则表达式 作者&#xff1a;AOAIYI 创作不易&#xff0c;如果觉得文章不错或能帮到你学习&#xff0c;记得点赞收藏评论一下哦 文章目录python正则表达式一、实验目的二、实验原理三、实验环境四、实验内容五、实验步骤总结一、实验目的 学会使用常见的正则表达式 二、…...

编程日记 2023/2/15 15:00:34

【C++】二叉树的非递归遍历

非递归遍历二叉树一、二叉树的前序遍历二、二叉树的中序遍历三、二叉树的后序遍历3.1 方法一3.2 方法二一、二叉树的前序遍历 题目链接 我们可以把任何一棵树看成左路节点&#xff0c;左路节点和右子树。先访问左路节点&#xff0c;再访问左路节点的右子树。在右子树中也重复这…...

编程日记 2023/2/15 14:59:25

Linux——线程同步（条件变量、POSIX信号量）和线程池

一.线程同步&#xff08;一&#xff09;.概念线程同步是一种多线程关系&#xff0c;指的是线程之间按照特定顺序访问临界资源&#xff0c;进而能够避免线程饥饿问题。所谓线程饥饿指的是某个线程长期“霸占”临界资源&#xff0c;导致其他线程无法访问该资源。而通过线程同步机…...

编程日记 2023/2/15 14:58:19

leaflet 上传CSV文件，导出geojson格式文件（064）

第064个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+leaflet中加载CSV文件，将图形显示在地图上。点击导出geojson，下载成geojson文件。 直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果. 文章目录 示例效果配置方式示例源代码（共114行）安装插件…...

编程日记 2023/2/15 14:57:10

Java内部类

文章目录一、内部类的概念二、内部类的分析三、内部类的分类1. 成员内部类2. 静态内部类3. 局部内部类4. 匿名内部类匿名内部类与Lambda表达式一、内部类的概念 在 Java 中&#xff0c;可以将一个类定义在另一个类里面或者一个方法里面&#xff0c;这样的类称为内部类。内部类…...

编程日记 2023/2/15 14:56:04

Centos系统里运行java的jar包

目前使用springboot开发是嵌入方式的tomcat&#xff0c;不需要单独使用tomcat&#xff0c;那么经常在服务器上运行jar包&#xff0c;这里记录一下在centos7系统里运行jar的方式。在运行之前需要确定centos7系统是否安装了java环境以及配置环境变量&#xff0c;还有jar需要运行的…...

编程日记 2023/2/15 14:54:59

招标采购流程的电子招标采购，是管理复杂供应链和多层供应商的高效方式。

负载均衡&#xff08;Load Balance&#xff09; 由于目前现有网络的各个核心部分随着业务量的提高&#xff0c;访问量和数据流量的快速增长&#xff0c;其处理能力和计算强度也相应地增大&#xff0c;使得单一的服务器设备根本无法承担。在此情况下&#xff0c;如果扔掉现有设…...

编程日记 2023/2/15 14:53:53

【C语言】C程序结构和基本语法

1、C语言程序结构 我们学习一门编程语言&#xff0c;第一个实例都是"hello world!"&#xff0c;下面看一个最简单的C程序结构。 #include <stdio.h>int main() {/* 我的第一个 C 程序 */printf("Hello, World! \n");return 0; }程序的第一行 #incl…...

编程日记 2023/2/15 14:52:47

YOLOv8 目标检测 | 自定义数据集

本文介绍了使用用于目标检测的自定义数据训练 YOLOv8 模型。我正在使用来自 kaggle 的 yolo 格式的“Face Mask Dataset”&#xff0c;数据集链接如下&#xff1a;https://www.kaggle.com/datasets/maalialharbi/face-mask-dataset?resourcedownloadYOLOv8 是目前最先进的 YOL…...

编程日记 2023/2/15 14:51:41

Lua语法入门

注意&#xff1a;文章将持续更新完善 文章目录一. 初识Lua二. HelloWorld三. Lua的数据类型四. 变量五. 循环六. 函数七. 条件控制一. 初识Lua Lua 是一种轻量小巧的脚本语言&#xff0c;用标准C语言编写并以源代码形式开放&#xff0c; 其设计目的是为了嵌入应用程序中&#…...

编程日记 2023/2/15 14:49:30

华为OD机试真题JAVA实现【最小步骤数】真题+解题思路+代码（20222023）

🔥系列专栏 华为OD机试（JAVA）真题目录汇总华为OD机试（Python）真题目录汇总华为OD机试（C++）真题目录汇总华为OD机试（JavaScript）真题目录汇总文章目录 🔥系列专栏题目输入输出示例一输入输出说明示例二输入输出解题思路...

编程日记 2023/2/15 14:48:21

预检请求OPTIONS

这里写目录标题简单请求和非简单请求简单请求非简单请求预检请求OPTIONS简单请求和非简单请求 浏览器将请求分为两大类&#xff1a;简单请求&#xff08;simple request&#xff09;和非简单请求&#xff08;not-so-simple request&#xff09; 简单请求 简单请求&#xff0…...

编程日记 2023/2/15 14:47:12

引入短信服务发送手机验证码进行安全校验

其他方案>引入QQ邮箱发送验证码进行安全校验 相对短信验证码&#xff0c;操作更简单而且免费 最近想给自己的项目在注册时加点安全校验&#xff0c;准备使用免费的邮箱验证来着&#xff0c;在上一篇引入QQ邮箱进行安全校验时&#xff0c;看有朋友说阿里云会送一些短信服务免…...

编程日记 2023/2/15 14:46:05

opencv绘制直线

大家好&#xff0c;我是csdn的博主&#xff1a;lqj_本人 这是我的个人博客主页&#xff1a; lqj_本人的博客_CSDN博客-微信小程序,前端,python领域博主lqj_本人擅长微信小程序,前端,python,等方面的知识https://blog.csdn.net/lbcyllqj?spm1011.2415.3001.5343哔哩哔哩欢迎关注…...

编程日记 2023/2/15 14:44:56