VUE篇之可拖动裁剪框

涉及知识点： offsetLeft, offsetTop, offsetWidth, offsetHeight；offsetX, offsetY；clientX，clientY

css:clip-path

学习直通车：HTMLElement.offsetLeft - Web API 接口参考 | MDN

MouseEvent.offsetX - Web API 接口参考 | MDN

MouseEvent.clientX - Web API 接口参考 | MDN

clip-path - CSS：层叠样式表 | MDN

1.布局搭建

<template><div class="wrap"><div ref="box1" class="box1" @mousemove="onMouseMove" @mouseup="onMouseUp" @mouseleave="onMouseUp"><img class="img1" src="./images/7.jpg" alt="" /><img ref="clipImg" class="img2" src="./images/7.jpg" alt="" /><div ref="cropBox" class="cropBox" @mousedown="onMouseCropBoxDown"><div class="leftUp" @mousedown="onMouseDownDot($event, 'leftUp')"></div><div class="up" @mousedown="onMouseDownDot($event, 'up')"></div><div class="rightUp" @mousedown="onMouseDownDot($event, 'rightUp')"></div><div class="right" @mousedown="onMouseDownDot($event, 'right')"></div><div class="rightDown" @mousedown="onMouseDownDot($event, 'rightDown')"></div><div class="down" @mousedown="onMouseDownDot($event, 'down')"></div><div class="leftDown" @mousedown="onMouseDownDot($event, 'leftDown')"></div><div class="left" @mousedown="onMouseDownDot($event, 'left')"></div></div></div><div class="box2"><img ref="previewImg" src="./images/7.jpg" alt="" /></div></div>
</template>

2.css样式

@mixin css混入

$boxWidth 变量定义

<style lang="scss">
.wrap {display: flex;padding: 30px;$boxWidth: 400px; //盒子大小$boxHeight: 400px;$defaultCropBoxWidth: 150px; //裁切框初始值$defaultCropBoxHeight: 150px;$dotWidth: 6px; //点.box1 {width: $boxWidth;height: $boxHeight;border: 1px solid #000;position: relative;box-sizing: border-box;@mixin img {position: absolute;left: 0;top: 0;width: 100%;height: 100%;-webkit-user-drag: none !important;user-select: none;}.img1 {@include img;opacity: 0.5;}.img2 {@include img;clip-path: polygon(0 0,$defaultCropBoxWidth 0,$defaultCropBoxWidth $defaultCropBoxHeight,0 $defaultCropBoxHeight);}.cropBox {position: absolute;left: 0;top: 0;width: $defaultCropBoxWidth;height: $defaultCropBoxHeight;border: 1px solid #fff;cursor: all-scroll;$halfDotWidth: calc(6px / -2);@mixin dot {position: absolute;width: $dotWidth;height: $dotWidth;background-color: #fff;}.leftUp {@include dot;top: $halfDotWidth;left: $halfDotWidth;cursor: nw-resize;}.up {@include dot;top: $halfDotWidth;left: 50%;margin-left: $halfDotWidth;cursor: n-resize;}.rightUp {@include dot;top: $halfDotWidth;right: $halfDotWidth;cursor: ne-resize;}.right {@include dot;top: 50%;margin-top: $halfDotWidth;right: $halfDotWidth;cursor: e-resize;}.rightDown {@include dot;bottom: $halfDotWidth;right: $halfDotWidth;cursor: se-resize;}.down {@include dot;bottom: $halfDotWidth;left: 50%;margin-left: $halfDotWidth;cursor: s-resize;}.leftDown {@include dot;bottom: $halfDotWidth;left: $halfDotWidth;cursor: sw-resize;}.left {@include dot;top: 50%;margin-top: $halfDotWidth;left: $halfDotWidth;cursor: w-resize;}}}.box2 {width: $boxWidth;height: $boxHeight;margin-left: 50px;position: relative;img {position: absolute;left: 0;top: 0;width: 400px;height: 400px;display: block;clip-path: polygon(0 0,$defaultCropBoxWidth 0,$defaultCropBoxWidth $defaultCropBoxHeight,0 $defaultCropBoxHeight);-webkit-user-drag: none !important;user-select: none;}}
}
</style>

以上可以完成如下布局

3.实现拖拽预览

<script>
const WIDTH = 400;
const HEIGHT = 400;
const MIN = 50;
export default {data() {return {startCropMouseX: 0,stertCropMouseY: 0,inSelectBox: false, //判断是否在选框中拖动};},mounted() {},methods: {// 选框移动onMouseMove(e) {// offsetLeft返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。const { offsetLeft, offsetTop, offsetWidth, offsetHeight } = this.$refs.cropBox;const { offsetX, offsetY } = e;if (this.inSelectBox) {const xChange = offsetX - this.startCropMouseX; //获取移动距离const yChange = offsetY - this.stertCropMouseY;let left = offsetLeft + xChange; //每次移动时，获取选框位置let top = offsetTop + yChange;if (left <= 0) {left = 0;this.$refs.cropBox.style.left = `${left}px`;} else if (left + offsetWidth >= WIDTH) {left = WIDTH - offsetWidth; //总宽度-自身宽度this.$refs.cropBox.style.left = `${left}px`;} else {this.$refs.cropBox.style.left = `${left}px`;}if (top <= 0) {top = 0;this.$refs.cropBox.style.top = `${top}px`;} else if (top + offsetHeight >= HEIGHT) {top = HEIGHT - offsetHeight; //总高度-自身高度this.$refs.cropBox.style.top = `${top}px`;} else {this.$refs.cropBox.style.top = `${top}px`;}this.setHeightView();this.setPreviewImg();}},// 鼠标抬起onMouseUp(e) {this.inSelectBox = false;},// 选框拖动onMouseCropBoxDown(e) {const { offsetX, offsetY } = e;this.startCropMouseX = offsetX;this.stertCropMouseY = offsetY;this.inSelectBox = true;},// 设置选区可见位置setHeightView() {const { offsetLeft, offsetTop, offsetHeight, offsetWidth } = this.$refs.cropBox;this.$refs.clipImg.style.clipPath = this.getLabel(offsetLeft, offsetTop, offsetHeight, offsetWidth);},// 设置预览图片setPreviewImg() {const { offsetLeft, offsetTop, offsetHeight, offsetWidth } = this.$refs.cropBox;this.$refs.previewImg.style.left = `-${offsetLeft}px`;this.$refs.previewImg.style.top = `-${offsetTop}px`;this.$refs.previewImg.style.clipPath = this.getLabel(offsetLeft, offsetTop, offsetHeight, offsetWidth);},// 获取裁切pathgetLabel(offsetLeft, offsetTop, offsetHeight, offsetWidth) {return `polygon(${offsetLeft}px ${offsetTop}px,${offsetLeft + offsetWidth}px ${offsetTop}px,${offsetLeft + offsetWidth}px ${offsetTop + offsetHeight}px,${offsetLeft}px ${offsetTop + offsetHeight}px)`;}}
};
</script>

4.实现裁剪

实现裁剪主要是进行点的拖拽，主要方法是上下左右；对于上左可以采用上的方法+左的方法即可

定义变量：

currentDot: '',

isDotDown: false //是否点位拉伸

 上 下 左  右 方法

 // 右移 获取拉伸宽度+cropBox自身宽度rightMove(e) {let x = e.clientX; //鼠标X坐标（用offsetX有bug）const { offsetLeft } = this.$refs.box1;const maxX = offsetLeft + WIDTH - 2;if (x > maxX) {x = maxX;}const { offsetWidth, offsetLeft: left } = this.$refs.cropBox;// 上一次点到浏览器距离const preX = offsetLeft + left + offsetWidth;const addWidth = x - preX;this.$refs.cropBox.style.width = `${offsetWidth + addWidth}px`;},// 上移upMove(e) {let y = e.clientY; //鼠标Y坐标const { offsetTop } = this.$refs.box1;if (y < offsetTop) {y = offsetTop;}const { offsetHeight, offsetTop: top } = this.$refs.cropBox;// 右侧线距离浏览器的距离-ythis.$refs.cropBox.style.height = `${offsetHeight + offsetTop + top - y}px`;// y-parent距离浏览器的距离this.$refs.cropBox.style.top = `${y - offsetTop}px`;},// 下移downMove(e) {let y = e.clientY;const { offsetTop } = this.$refs.box1;const maxY = offsetTop + HEIGHT - 2;if (y > maxY) {y = maxY;}const { offsetHeight, offsetTop: top } = this.$refs.cropBox;// 上一次点到浏览器距离const preY = offsetHeight + top + offsetTop;const addWidth = y - preY;this.$refs.cropBox.style.height = `${offsetHeight + addWidth}px`;},// 左移leftMove(e) {let x = e.clientX; //鼠标X坐标const { offsetLeft } = this.$refs.box1;if (x < offsetLeft) {x = offsetLeft;}const { offsetWidth, offsetLeft: left } = this.$refs.cropBox;// 右侧线距离浏览器的距离-xthis.$refs.cropBox.style.width = `${offsetWidth + offsetLeft + left - x}px`;// x-parent距离浏览器的距离this.$refs.cropBox.style.left = `${x - offsetLeft}px`;}

给每个点增加方法调用

 // 选框移动onMouseMove(e) {.....之前代码if (this.isDotDown) {switch (this.currentDot) {case 'right':this.rightMove(e);break;case 'up':this.upMove(e);break;case 'left':this.leftMove(e);break;case 'down':this.downMove(e);break;case 'rightUp':this.rightMove(e);this.upMove(e);break;case 'leftUp':this.leftMove(e);this.upMove(e);break;case 'leftDown':this.leftMove(e);this.downMove(e);break;case 'rightDown':this.rightMove(e);this.downMove(e);break;default:break;}this.setHeightView();this.setPreviewImg();}},

完整的代码文件查看：

<template><div class="wrap"><div ref="box1" class="box1" @mousemove="onMouseMove" @mouseup="onMouseUp" @mouseleave="onMouseUp"><img class="img1" src="./images/7.jpg" alt="" /><img ref="clipImg" class="img2" src="./images/7.jpg" alt="" /><div ref="cropBox" class="cropBox" @mousedown="onMouseCropBoxDown"><div class="leftUp" @mousedown="onMouseDownDot($event, 'leftUp')"></div><div class="up" @mousedown="onMouseDownDot($event, 'up')"></div><div class="rightUp" @mousedown="onMouseDownDot($event, 'rightUp')"></div><div class="right" @mousedown="onMouseDownDot($event, 'right')"></div><div class="rightDown" @mousedown="onMouseDownDot($event, 'rightDown')"></div><div class="down" @mousedown="onMouseDownDot($event, 'down')"></div><div class="leftDown" @mousedown="onMouseDownDot($event, 'leftDown')"></div><div class="left" @mousedown="onMouseDownDot($event, 'left')"></div></div></div><div class="box2"><img ref="previewImg" src="./images/7.jpg" alt="" /></div></div>
</template>
<script>
const WIDTH = 400;
const HEIGHT = 400;
const MIN = 50;
export default {data() {return {currentDot: '',startCropMouseX: 0,stertCropMouseY: 0,inSelectBox: false, //判断是否在选框中拖动isDotDown: false //是否是点位拉伸};},mounted() {},methods: {// 选框移动onMouseMove(e) {// offsetLeft返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。const { offsetLeft, offsetTop, offsetWidth, offsetHeight } = this.$refs.cropBox;const { offsetX, offsetY } = e;if (this.inSelectBox) {const xChange = offsetX - this.startCropMouseX; //获取移动距离const yChange = offsetY - this.stertCropMouseY;let left = offsetLeft + xChange; //每次移动时，获取选框位置let top = offsetTop + yChange;if (left <= 0) {left = 0;this.$refs.cropBox.style.left = `${left}px`;} else if (left + offsetWidth >= WIDTH) {left = WIDTH - offsetWidth; //总宽度-自身宽度this.$refs.cropBox.style.left = `${left}px`;} else {this.$refs.cropBox.style.left = `${left}px`;}if (top <= 0) {top = 0;this.$refs.cropBox.style.top = `${top}px`;} else if (top + offsetHeight >= HEIGHT) {top = HEIGHT - offsetHeight; //总高度-自身高度this.$refs.cropBox.style.top = `${top}px`;} else {this.$refs.cropBox.style.top = `${top}px`;}this.setHeightView();this.setPreviewImg();}if (this.isDotDown) {switch (this.currentDot) {case 'right':this.rightMove(e);break;case 'up':this.upMove(e);break;case 'left':this.leftMove(e);break;case 'down':this.downMove(e);break;case 'rightUp':this.rightMove(e);this.upMove(e);break;case 'leftUp':this.leftMove(e);this.upMove(e);break;case 'leftDown':this.leftMove(e);this.downMove(e);break;case 'rightDown':this.rightMove(e);this.downMove(e);break;default:break;}this.setHeightView();this.setPreviewImg();}},// 鼠标抬起onMouseUp(e) {this.inSelectBox = false;this.isDotDown = false;},// 选框拖动onMouseCropBoxDown(e) {const { offsetX, offsetY } = e;this.startCropMouseX = offsetX;this.stertCropMouseY = offsetY;this.inSelectBox = true;},// 点位移动onMouseDownDot(e, localtion) {e.stopPropagation();this.currentDot = localtion;this.isDotDown = true;},// 设置选区可见位置setHeightView() {const { offsetLeft, offsetTop, offsetHeight, offsetWidth } = this.$refs.cropBox;this.$refs.clipImg.style.clipPath = this.getLabel(offsetLeft, offsetTop, offsetHeight, offsetWidth);},// 设置预览图片setPreviewImg() {const { offsetLeft, offsetTop, offsetHeight, offsetWidth } = this.$refs.cropBox;this.$refs.previewImg.style.left = `-${offsetLeft}px`;this.$refs.previewImg.style.top = `-${offsetTop}px`;this.$refs.previewImg.style.clipPath = this.getLabel(offsetLeft, offsetTop, offsetHeight, offsetWidth);},// 获取裁切pathgetLabel(offsetLeft, offsetTop, offsetHeight, offsetWidth) {return `polygon(${offsetLeft}px ${offsetTop}px,${offsetLeft + offsetWidth}px ${offsetTop}px,${offsetLeft + offsetWidth}px ${offsetTop + offsetHeight}px,${offsetLeft}px ${offsetTop + offsetHeight}px)`;},// 右移 获取拉伸宽度+cropBox自身宽度rightMove(e) {let x = e.clientX; //鼠标X坐标（用offsetX有bug）const { offsetLeft } = this.$refs.box1;const maxX = offsetLeft + WIDTH - 2;if (x > maxX) {x = maxX;}const { offsetWidth, offsetLeft: left } = this.$refs.cropBox;// 上一次点到浏览器距离const preX = offsetLeft + left + offsetWidth;const addWidth = x - preX;this.$refs.cropBox.style.width = `${offsetWidth + addWidth}px`;},// 上移upMove(e) {let y = e.clientY; //鼠标Y坐标const { offsetTop } = this.$refs.box1;if (y < offsetTop) {y = offsetTop;}const { offsetHeight, offsetTop: top } = this.$refs.cropBox;// 右侧线距离浏览器的距离-ythis.$refs.cropBox.style.height = `${offsetHeight + offsetTop + top - y}px`;// y-parent距离浏览器的距离this.$refs.cropBox.style.top = `${y - offsetTop}px`;},// 下移downMove(e) {let y = e.clientY;const { offsetTop } = this.$refs.box1;const maxY = offsetTop + HEIGHT - 2;if (y > maxY) {y = maxY;}const { offsetHeight, offsetTop: top } = this.$refs.cropBox;// 上一次点到浏览器距离const preY = offsetHeight + top + offsetTop;const addWidth = y - preY;this.$refs.cropBox.style.height = `${offsetHeight + addWidth}px`;},// 左移leftMove(e) {let x = e.clientX; //鼠标X坐标const { offsetLeft } = this.$refs.box1;if (x < offsetLeft) {x = offsetLeft;}const { offsetWidth, offsetLeft: left } = this.$refs.cropBox;// 右侧线距离浏览器的距离-xthis.$refs.cropBox.style.width = `${offsetWidth + offsetLeft + left - x}px`;// x-parent距离浏览器的距离this.$refs.cropBox.style.left = `${x - offsetLeft}px`;}}
};
</script><style lang="scss">
.wrap {display: flex;padding: 30px;$boxWidth: 400px; //盒子大小$boxHeight: 400px;$defaultCropBoxWidth: 150px; //裁切框初始值$defaultCropBoxHeight: 150px;$dotWidth: 6px; //点.box1 {width: $boxWidth;height: $boxHeight;border: 1px solid #000;position: relative;box-sizing: border-box;@mixin img {position: absolute;left: 0;top: 0;width: 100%;height: 100%;-webkit-user-drag: none !important;user-select: none;}.img1 {@include img;opacity: 0.5;}.img2 {@include img;clip-path: polygon(0 0,$defaultCropBoxWidth 0,$defaultCropBoxWidth $defaultCropBoxHeight,0 $defaultCropBoxHeight);}.cropBox {position: absolute;left: 0;top: 0;width: $defaultCropBoxWidth;height: $defaultCropBoxHeight;border: 1px solid #fff;cursor: all-scroll;$halfDotWidth: calc(6px / -2);@mixin dot {position: absolute;width: $dotWidth;height: $dotWidth;background-color: #fff;}.leftUp {@include dot;top: $halfDotWidth;left: $halfDotWidth;cursor: nw-resize;}.up {@include dot;top: $halfDotWidth;left: 50%;margin-left: $halfDotWidth;cursor: n-resize;}.rightUp {@include dot;top: $halfDotWidth;right: $halfDotWidth;cursor: ne-resize;}.right {@include dot;top: 50%;margin-top: $halfDotWidth;right: $halfDotWidth;cursor: e-resize;}.rightDown {@include dot;bottom: $halfDotWidth;right: $halfDotWidth;cursor: se-resize;}.down {@include dot;bottom: $halfDotWidth;left: 50%;margin-left: $halfDotWidth;cursor: s-resize;}.leftDown {@include dot;bottom: $halfDotWidth;left: $halfDotWidth;cursor: sw-resize;}.left {@include dot;top: 50%;margin-top: $halfDotWidth;left: $halfDotWidth;cursor: w-resize;}}}.box2 {width: $boxWidth;height: $boxHeight;margin-left: 50px;position: relative;img {position: absolute;left: 0;top: 0;width: 400px;height: 400px;display: block;clip-path: polygon(0 0,$defaultCropBoxWidth 0,$defaultCropBoxWidth $defaultCropBoxHeight,0 $defaultCropBoxHeight);-webkit-user-drag: none !important;user-select: none;}}
}
</style>

未完待续。。。。后续会增加一个获取的裁剪图片 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/234019.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

利用原始套接字解决mac地址错误问题【南瑞SysKeeper-2000】

利用原始套接字解决mac地址错误问题【南瑞SysKeeper-2000】

一&#xff1a;案例描述 一键可视顺控图像智能项目在网络部署过程中&#xff0c;对网络限制隔离安全性要求很高&#xff0c;用到正向隔离装置&#xff08;南瑞SysKeeper-2000型号&#xff09;。 图一 正向装置示意图 现场发现问题&#xff1a;直连网线情况下&#xff0c;我方…
阅读更多...
德人合科技 | 公司电脑文件加密系统

德人合科技 | 公司电脑文件加密系统

公司电脑文件加密系统是一种可以对电脑文件进行加密的保护机制。它使用驱动层透明加密技术&#xff0c;能够在用户无感知的情况下对文件进行加密&#xff0c;从源头上保障数据安全和使用安全。 PC端访问地址&#xff1a; www.drhchina.com 此类系统主要有以下几个特点和功能&a…
阅读更多...
Web前端-JavaScript（js循环）

Web前端-JavaScript（js循环）

1.循环 1.1 for循环 语法结构 for(初始化变量; 条件表达式; 操作表达式 ){//循环体 }名称作用初始化变量通常被用于初始化一个计数器&#xff0c;该表达式可以使用 var 关键字声明新的变量&#xff0c;这个变量帮我们来记录次数。条件表达式用于确定每一次循环是否能被执行。…
阅读更多...
Git账户密码http方式的配置

Git账户密码http方式的配置

Git账户密码http方式的配置 入门 git在提交时每次都需要输入密码和账号信息&#xff0c;可以将账号和密码进行持久化存储&#xff0c; 当git push的时候输入一次用户名和密码就会被记录&#xff0c; 不需要每次输入&#xff0c;提高效率&#xff0c;进行一下配置&#xff1…
阅读更多...
深入学习《大学计算机》系列之第1章 1.4节——从二进制起源窥见的奥秘

深入学习《大学计算机》系列之第1章 1.4节——从二进制起源窥见的奥秘

一.欢迎来到我的酒馆 第1章 1.4节&#xff0c;从二进制起源窥见的奥秘。 目录 一.欢迎来到我的酒馆二.二进制的起源1.关于莱布尼茨2.莱布尼茨和牛顿的恩怨情仇 二.二进制的起源 本节内容属于知识拓展&#xff0c;通过讲解几个小故事&#xff0c;向大家介绍二进制的起源。 1.关…
阅读更多...
基于低代码的文档管理系统：实现高效协作与控制

基于低代码的文档管理系统：实现高效协作与控制

在企业和组织中&#xff0c;文档管理是一项至关重要的任务。文档包括各种类型的信息&#xff0c;如合同、报告、会议记录、产品规格等&#xff0c;它们都需要被妥善保管并确保随时可供查阅。 传统的文档管理方法往往效率低下&#xff0c;且容易出错。随着技术的发展&#xff0…
阅读更多...
亚信安慧AntDB数据库引领大数据新纪元，星河案例彰显卓越表现

亚信安慧AntDB数据库引领大数据新纪元，星河案例彰显卓越表现

亚信科技及其附属公司亚信安慧在第六届大数据“星河”案例评选中&#xff0c;凭借其卓越的数据库技术实力&#xff0c;再次站在了行业的聚光灯下。这次的显著成果不仅是对亚信科技技术能力的肯定&#xff0c;更是对其在数据库领域持续创新和领先地位的认可。 图&#xff1a;亚信…
阅读更多...
3D小球跑酷

3D小球跑酷

目录 一、前言 二、开发环境 三、场景搭建 1. 创建项目 2. 创建场景内物体 2.1 创建跑道 2.2 创建玩家 2.3 创建障碍物 2.4 改变跑道和障碍物的颜色 2.4.1 创建材质 2.4.2 给跑道和障碍物更换材质 四、功能脚本实现 1. 创建玩家脚本 2. 相机跟随 3. 胜负的判定 3…
阅读更多...
单光子如何“玩转”单原子？| 量子简史

单光子如何“玩转”单原子？| 量子简史

在量子力学诞生约100年后的今天&#xff0c;物理学家仍在不断了解光与物质之间的相互作用。 上世纪初&#xff0c;量子力学发展的驱动力之一是人们需要了解为什么原子只能发出特定波长的光。不久之后&#xff0c;量子力学被应用于分子&#xff0c;然后是固体。从另一个方向来看…
阅读更多...
Springboot数据加密篇

Springboot数据加密篇

一、密码加密 1.1Hash算法(MD5/SHA-512等) 哈希算法&#xff0c;又称摘要算法&#xff08;Digest&#xff09;&#xff0c;是一种将任意长度的输入通过散列函数变换成固定长度的输出的单向密码体制。这种映射的规则就是哈希算法&#xff0c;而通过原始数据映射之后得到的二进制…
阅读更多...
STM32——串口通信应用篇

STM32——串口通信应用篇

一、引言 STM32微控制器是一款功能强大的嵌入式系统芯片&#xff0c;广泛应用于各种领域。其中&#xff0c;串口通信是其重要功能之一&#xff0c;可用于与外部设备进行数据交换和控制。本文将介绍STM32串口通信的基本原理、应用场景以及实现方法。 二、STM32串口通信基本原理 …
阅读更多...
三维模型轻量化工具

三维模型轻量化工具

老子云三维模型服务平台&#xff1a;常规模型轻量化通过底层算法快速有效的对常规模型进行轻量化处理&#xff0c;目前包含两种处理模式&#xff1a;减面模式、合并模式。 减面模式&#xff1a;保留原始模型信息&#xff0c;仅使模型网格更轻量。合并模式&#xff1a;合并模型材…
阅读更多...
探秘 AJAX：让网页变得更智能的异步技术(下)

探秘 AJAX：让网页变得更智能的异步技术(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…
阅读更多...
Linux笔记---网络操作命令详细介绍

Linux笔记---网络操作命令详细介绍

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Linux学习 ⛳️ 功不唐捐&#xff0c;玉汝于成 前言&#xff1a; 网络操作是Linux系统中常见的任务之一&#xff0c;它涵盖了测试网络连接、配置网络接口、显示网络统计信息以及远程登录和文件传…
阅读更多...
178. 第K短路（A*启发式算法）

178. 第K短路（A*启发式算法）

178. 第K短路 - AcWing题库 给定一张 N 个点&#xff08;编号 1,2…N&#xff09;&#xff0c;M 条边的有向图&#xff0c;求从起点 S 到终点 T 的第 K 短路的长度&#xff0c;路径允许重复经过点或边。 注意&#xff1a; 每条最短路中至少要包含一条边。 输入格式 第一行包…
阅读更多...
测试工具Jmeter：界面介绍、核心选项说明、核心选项用途

测试工具Jmeter：界面介绍、核心选项说明、核心选项用途

本文章主要介绍Jmeter的界面布局&#xff0c;以及各个选项的功能和它们的用途。 JMeter基本原理是建立一个线程池&#xff0c;多线程运行取样器产生大量负载&#xff0c;在运行过程中通过断言来验证结果的正确性&#xff0c;通过监听器来记录测试结果。 1. Jmeter主界面 当我…
阅读更多...
多维时序 | MATLAB实现SSA-CNN-LSTM-Multihead-Attention多头注意力机制多变量时间序列预测

多维时序 | MATLAB实现SSA-CNN-LSTM-Multihead-Attention多头注意力机制多变量时间序列预测

多维时序 | MATLAB实现SSA-CNN-LSTM-Multihead-Attention多头注意力机制多变量时间序列预测 目录 多维时序 | MATLAB实现SSA-CNN-LSTM-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 MATLAB实现SSA-CNN-LST…
阅读更多...
路由器设置代理IP教程，http代理怎么固定IP地址？

路由器设置代理IP教程，http代理怎么固定IP地址？

路由器设置代理IP教程 一、确定代理IP地址 首先&#xff0c;你需要确定你要使用的代理IP地址。你可以从代理服务提供商处获取代理IP地址和端口号。 二、登录路由器管理界面 在浏览器中输入路由器的IP地址&#xff0c;输入账号和密码&#xff0c;进入路由器的管理界面。 三、设置…
阅读更多...
【MATLAB第83期】基于MATLAB的LSTM代理模型的SOBOL全局敏感性运用

【MATLAB第83期】基于MATLAB的LSTM代理模型的SOBOL全局敏感性运用

【MATLAB第83期】基于MATLAB的LSTM代理模型的SOBOL全局敏感性运用 引言 在前面几期&#xff0c;介绍了敏感性分析法&#xff0c;本期来介绍lstm作为代理模型的sobol全局敏感性分析模型。 【MATLAB第31期】基于MATLAB的降维/全局敏感性分析/特征排序/数据处理回归问题MATLAB代…
阅读更多...
基于单片机的火灾报警器 （论文+源码）

基于单片机的火灾报警器 （论文+源码）

1.系统设计 本系统由火灾检测模块、A/D转换模块、信号处理模块、声光报警模块和灭火装置模块组成。火灾检测模块由温度检测和烟雾检测构成&#xff0c;其温度传感器选用DS18B20&#xff0c;烟雾传感器选用MQ-2烟雾传感器。A/D转换模块选用常用的模数转换芯片ADC0832。声光报警模…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023