分享 一个类似 ps 辅助线功能

效果图片:

提示:这里的样式我做边做了修改,根据个人情况而定。

//你也可以npm下载
$ npm install --save vue-ruler-tool

在这里插入图片描述

特点

  • 没有依赖
  • 可拖动的辅助线
  • 快捷键支持

开始使用 1. even.js

/*** @description 绑定事件 on(element, event, handler)*/
export const on = (function () {if ((document.addEventListener)) {return function (element: any, event: any, handler: any) {if (element && event && handler) {element.addEventListener(event, handler, false)}}} else {return function (element: any, event: string, handler: any) {if (element && event && handler) {element.attachEvent('on' + event, handler)}}}
})()/*** @description 解绑事件 off(element, event, handler)*/
export const off = (function () {if ((document.removeEventListener)) {return function (element: any, event: any, handler: any) {if (element && event) {element.removeEventListener(event, handler, false)}}} else {return function (element: any, event: string, handler: any) {if (element && event) {element.detachEvent('on' + event, handler)}}}
})()

组建rules代码:

提示:这里我运用的npm install

<template><div :style="wrapperStyle" class="vue-ruler-wrapper" onselectstart="return false;" ref="el"><section v-show="rulerToggle"><div ref="horizontalRuler" class="vue-ruler-h" @mousedown.stop="horizontalDragRuler"><spanv-for="(item,index) in xScale":key="index":style="{ left: index * 50 + 2 + 'px' }"class="n">{{ item.id }}</span></div><div ref="verticalRuler" class="vue-ruler-v" @mousedown.stop="verticalDragRuler"><spanv-for="(item,index) in yScale":key="index":style="{ top: index * 50 + 2 + 'px' }"class="n">{{ item.id }}</span></div><div :style="{ top: verticalDottedTop + 'px' }" class="vue-ruler-ref-dot-h" /><div :style="{ left: horizontalDottedLeft + 'px' }" class="vue-ruler-ref-dot-v" /><divv-for="item in lineList":title="item.title":style="getLineStyle(item)":key="item.id":class="`vue-ruler-ref-line-${item.type}`"@mousedown="handleDragLine(item)"></div></section><div ref="content" class="vue-ruler-content" :style="contentStyle"><slot /></div><div v-show="isDrag" class="vue-ruler-content-mask"></div></div>
</template>
<script lang="ts">
import { computed, defineComponent, onBeforeUnmount, onMounted, Ref, ref, watch } from 'vue';
import { on, off } from './event';
export default defineComponent({name: 'V3RulerComponent',props: {position: {type: String,default: 'relative',validator: (val: string) => {return ['absolute', 'fixed', 'relative', 'static', 'inherit'].indexOf(val) !== -1}}, // 规定元素的定位类型isHotKey: {type: Boolean, default: true}, // 热键开关isScaleRevise: {type: Boolean, default: false}, // 刻度修正(根据content进行刻度重置)value: {type: Array,default: () => {return [{ type: 'h', site: 50 }, { type: 'v', site: 180 }] //}}, // 预置参考线contentLayout: {type: Object,default: () => {return { top: 0, left: 0 }}}, // 内容部分布局parent: {type: Boolean,default: false},visible: {type: Boolean,default: true},stepLength: {type: Number,default: 50,validator: (val: number) => val % 10 === 0} // 步长},setup(props, context) {const size = 17;let left_top = 18;//18 内容左上填充let windowWidth = ref(0); // 窗口宽度let windowHeight = ref(0); // 窗口高度let xScale = ref<[{id:number}]>([{id:0}]); // 水平刻度let yScale= ref<[{id:number}]>([{id:0}]); // 垂直刻度let topSpacing = 0; // 标尺与窗口上间距let leftSpacing = 0; //  标尺与窗口左间距let isDrag = ref(false);let dragFlag = ''; // 拖动开始标记,可能值x(从水平标尺开始拖动);y(从垂直标尺开始拖动)let horizontalDottedLeft = ref(-999); // 水平虚线位置let verticalDottedTop = ref(-999); // 垂直虚线位置let rulerWidth = 0; // 垂直标尺的宽度let rulerHeight = 0; // 水平标尺的高度let dragLineId = ''; // 被移动线的ID//refconst content = ref(null);const el = ref(null);const verticalRuler = ref(null);const horizontalRuler = ref(null);const keyCode = {r: 82}; // 快捷键参数let rulerToggle = ref(true); // 标尺辅助线显示开关const wrapperStyle:any = computed(() => {return {width: windowWidth.value + 'px',height: windowHeight.value + 'px',position: props.position}});const contentStyle = computed(() => {// padding: left_top + 'px 0px 0px ' + left_top + 'px'return {left: props.contentLayout.left + 'px',top: props.contentLayout.top + 'px',padding: left_top + 'px 0px 0px 0px'}});const lineList = computed(() => {let hCount = 0;let vCount = 0;return props.value.map((item: any) => {const isH = item.type === 'h'return {id: `${item.type}_${isH ? hCount++ : vCount++}`,type: item.type,title: item.site.toFixed(2) + 'px',[isH ? 'top' : 'left']: item.site / (props.stepLength / 50) + size}})});watch(() => props.visible, (visible: any) => {rulerToggle.value = visible;}, {immediate: true});onMounted(() => {on(document, 'mousemove', dottedLineMove)on(document, 'mouseup', dottedLineUp)on(document, 'keyup', keyboard)init()on(window, 'resize', windowResize)});onBeforeUnmount(() => {off(document, 'mousemove', dottedLineMove)off(document, 'mouseup', dottedLineUp)off(document, 'keyup', keyboard)off(window, 'resize', windowResize)});//functionconst init = (() => {box()scaleCalc()});const windowResize = (() => {xScale.value = [{id:0}]yScale.value = [{id:0}]init()});const getLineStyle = (({ type, top, left }: any) => {return type === 'h' ? { top: top + 'px' } : { left: left + 'px' }});const handleDragLine = (({ type, id }: any) => {return type === 'h' ? dragHorizontalLine(id) : dragVerticalLine(id)});//获取窗口宽与高const box = (() => {if (props.isScaleRevise) { // 根据内容部分进行刻度修正const contentLeft = (content.value as any).offsetLeftconst contentTop = (content.value as any).offsetTopgetCalcRevise(xScale.value, contentLeft)getCalcRevise(yScale.value, contentTop)}if (props.parent) {const style = window.getComputedStyle((el.value as any).parentNode, null);windowWidth.value = parseInt(style.getPropertyValue('width'), 10);windowHeight.value = parseInt(style.getPropertyValue('height'), 10);} else {windowWidth.value = document.documentElement.clientWidth - leftSpacingwindowHeight.value = document.documentElement.clientHeight - topSpacing}rulerWidth = (verticalRuler.value as any).clientWidth;rulerHeight = (horizontalRuler.value as any).clientHeight;setSpacing()});const setSpacing = (() => {topSpacing = (horizontalRuler.value as any).getBoundingClientRect().y //.offsetParent.offsetTopleftSpacing = (verticalRuler.value as any).getBoundingClientRect().x// .offsetParent.offsetLeft});// 计算刻度const scaleCalc = (() => {getCalc(xScale.value, windowWidth.value);getCalc(yScale.value, windowHeight.value);});//获取刻度const getCalc = ((array: [{id:number}], length: any) => {for (let i = 0; i < length * props.stepLength / 50; i += props.stepLength) {if (i % props.stepLength === 0) {array.push({ id: i })}}});// 获取矫正刻度方法const getCalcRevise = ((array: [{id:number}], length: any) => {for (let i = 0; i < length; i += 1) {if (i % props.stepLength === 0 && i + props.stepLength <= length) {array.push({ id: i })}}});//生成一个参考线const newLine = ((val: any) => {isDrag.value = truedragFlag = val});//虚线移动const dottedLineMove = (($event: any) => {setSpacing()switch (dragFlag) {case 'x':if (isDrag.value) {verticalDottedTop.value = $event.pageY - topSpacing}breakcase 'y':if (isDrag.value) {horizontalDottedLeft.value = $event.pageX - leftSpacing}breakcase 'h':if (isDrag.value) {verticalDottedTop.value = $event.pageY - topSpacing}breakcase 'v':if (isDrag.value) {horizontalDottedLeft.value = $event.pageX - leftSpacing}breakdefault:break}});//虚线松开const dottedLineUp = (($event: any) => {setSpacing()if (isDrag.value) {isDrag.value = falseconst cloneList = JSON.parse(JSON.stringify(props.value))switch (dragFlag) {case 'x':cloneList.push({type: 'h',site: ($event.pageY - topSpacing - size) * (props.stepLength / 50)})context.emit('input', cloneList);breakcase 'y':cloneList.push({type: 'v',site: ($event.pageX - leftSpacing - size) * (props.stepLength / 50)})context.emit('input', cloneList);breakcase 'h':dragCalc(cloneList, $event.pageY, topSpacing, rulerHeight, 'h')context.emit('input', cloneList);breakcase 'v':dragCalc(cloneList, $event.pageX, leftSpacing, rulerWidth, 'v')context.emit('input', cloneList);breakdefault:break}verticalDottedTop.value = horizontalDottedLeft.value = -10}});const dragCalc = ((list: any, page: any, spacing: any, ruler: any, type: any) => {if (page - spacing < ruler) {let Index, idlineList.value.forEach((item: any, index: any) => {if (item.id === dragLineId) {Index = indexid = item.id}})list.splice(Index, 1, {type: type,site: -600})} else {let Index, idlineList.value.forEach((item, index) => {if (item.id === dragLineId) {Index = indexid = item.id}})list.splice(Index, 1, {type: type,site: (page - spacing - size) * (props.stepLength / 50)})}});//水平标尺按下鼠标const horizontalDragRuler = (() => {newLine('x')});//垂直标尺按下鼠标const verticalDragRuler = (() => {newLine('y')});// 水平线处按下鼠标const dragHorizontalLine = ((id: any) => {isDrag.value = truedragFlag = 'h'dragLineId = id});// 垂直线处按下鼠标const dragVerticalLine = ((id: any) => {isDrag.value = truedragFlag = 'v'dragLineId = id});//键盘事件const keyboard = (($event: any) => {if (props.isHotKey) {switch ($event.keyCode) {case keyCode.r:rulerToggle.value = !rulerToggle.valuecontext.emit('update:visible', rulerToggle.value)if (rulerToggle.value) {left_top = 18 ;//18} else {left_top = 0;}break}}});return {wrapperStyle, rulerToggle, horizontalDragRuler, xScale, verticalDragRuler, yScale, verticalDottedTop, horizontalDottedLeft, lineList, getLineStyle, handleDragLine, contentStyle, isDrag, content, el, verticalRuler, horizontalRuler};},
})
</script>
<style lang="scss">
.vue-ruler{&-wrapper {left: 0;top: 0;z-index: 999;overflow: hidden;user-select: none;}&-h,&-v,&-ref-line-v,&-ref-line-h,&-ref-dot-h,&-ref-dot-v {position: absolute;left: 0;top: 0;overflow: hidden;z-index: 999;}&-h,&-v,&-ref-line-v,&-ref-line-h,&-ref-dot-h,&-ref-dot-v {position: absolute;left: 0;top: 0;overflow: hidden;z-index: 999;}&-h {width: 100%;height: 18px;left: 18px;opacity: 0.6;//background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAASCAMAAAAuTX21AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFMzMzAAAABqjYlAAAACNJREFUeNpiYCAdMDKRCka1jGoBA2JZZGshiaCXFpIBQIABAAplBkCmQpujAAAAAElFTkSuQmCC)//repeat-x; /*./image/ruler_h.png*/background-image: repeating-linear-gradient(to right, #656565 0, #656565 0.05em, transparent 0, transparent 4em), repeating-linear-gradient(to right, #656565 0, #656565 0.05em, transparent 0, transparent 2em), repeating-linear-gradient(to right, #656565 0, #656565 0.05em, transparent 0, transparent 1em);//background-size: 100% 10px, 100% 6px, 100% 4px;//background-repeat: no-repeat;//background-position: 0.05em 100%, 0.05em 100%, 0.05em 100%;background-size: 100% 18px, 100% 7px,100% 7px;background-repeat: no-repeat;background-position: 100% 0.05em , 100% 0.05em ,100% 0.05em;//border-bottom: 1px solid #656565;}&-v {width: 18px;height: 100%;top: 18px;opacity: 0.6;//background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAyCAMAAABmvHtTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFMzMzAAAABqjYlAAAACBJREFUeNpiYGBEBwwMTGiAakI0NX7U9aOuHyGuBwgwAH6bBkAR6jkzAAAAAElFTkSuQmCC)//repeat-y; /*./image/ruler_v.png*/background-image: repeating-linear-gradient(to bottom, #656565 0, #656565 0.05em, transparent 0, transparent 4em), repeating-linear-gradient(to bottom, #656565 0, #656565 0.05em, transparent 0, transparent 2em), repeating-linear-gradient(to bottom, #656565 0, #656565 0.05em, transparent 0, transparent 1em);background-size: 18px 100%, 7px 100% , 7px 100%;background-repeat: no-repeat;background-position: 0.05em 100%, 0.05em 100%, 0.05em 100%;//border-bottom: 1px solid #656565;}&-v .n,&-h .n {position: absolute;font: 10px/1 Arial, sans-serif;color: transparent;cursor: default;}&-v .n {width: 8px;left: 3px;word-wrap: break-word;}&-h .n {top: 1px;}&-ref-line-v,&-ref-line-h,&-ref-dot-h,&-ref-dot-v {z-index: 998;}&-ref-line-h {width: 100%;height: 3px;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAABCAMAAADU3h9xAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFSv//AAAAH8VRuAAAAA5JREFUeNpiYIACgAADAAAJAAE0lmO3AAAAAElFTkSuQmCC)repeat-x left center; /*./image/line_h.png*/cursor: n-resize; /*url(./image/cur_move_h.cur), move*/}&-ref-line-v {width: 3px;height: 100%;_height: 9999px;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAMAAAAPxGVzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFSv//AAAAH8VRuAAAAA5JREFUeNpiYEAFAAEGAAAQAAGePof9AAAAAElFTkSuQmCC)repeat-y center top; /*./image/line_v.png*/cursor: w-resize; /*url(./image/cur_move_v.cur), move*/}&-ref-dot-h {width: 100%;height: 3px;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFf39/F3PnHQAAAAJ0Uk5T/wDltzBKAAAAEElEQVR42mJgYGRgZAQIMAAADQAExkizYQAAAABJRU5ErkJggg==)repeat-x left 1px; /*./image/line_dot.png*/cursor: n-resize; /*url(./image/cur_move_h.cur), move*/top: -10px;}&-ref-dot-v {width: 3px;height: 100%;_height: 9999px;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFf39/F3PnHQAAAAJ0Uk5T/wDltzBKAAAAEElEQVR42mJgYGRgZAQIMAAADQAExkizYQAAAABJRU5ErkJggg==)repeat-y 1px top; /*./image/line_dot.png*/cursor: w-resize; /*url(./image/cur_move_v.cur), move*/left: -10px;}&-content {position: absolute;z-index: 997;}&-content-mask{position: absolute;width: 100%;height: 100%;background: transparent;z-index: 998;}
}
</style>

使用组建:

提示:这里可以添加计划学习的时间

 <Rules :style="`width:${canvasStyle.width}px;`":value="presetLine":is-hot-key="true":step-length="50":parent="true":is-scale-revise="true":visible.sync="rulesVisible"@input="cloneList">//内容部分</Rules>//是否显示/隐藏let rulesVisible = ref(false);//默认辅助线let presetLine = ref([{ type: 'h', site: 200 }, { type: 'v', site: 100 }]);//获取辅助线const cloneList = (list:any)=>{presetLine.value = list ;console.log("cloneList",list)console.log("presetLine",presetLine.value )}

总结:

还有一种 我个人感觉也挺好的,地址放在这里了,需要的可以试试:http://mark-rolich.github.io/RulersGuides.js/

npm i ruler-guides

效果图我也给你们放在下方了:
在这里插入图片描述

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

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

相关文章

通用商城项目(中)

金山编译器出问题了。下面段落标号全出问题了&#xff0c;排版也出问题了。懒得改了。 使用对象存储OSS&#xff0c;保存品牌logo 新建Module&#xff0c;提供上传、显示服务 有些不明所以的&#xff0c;按照steinliving-commodity配置了一通pom.xml 新建application.yml&…

【NLP概念源和流】 06-编码器-解码器模型(6/20 部分)

一、说明 在机器翻译等任务中,我们必须从一系列输入词映射到一系列输出词。读者必须注意,这与“序列标记”不同,在“序列标记”中,该任务是将序列中的每个单词映射到预定义的类,如词性或命名实体任务。 作者生成 在上面的

【嵌入式学习笔记】嵌入式入门3——串口

1.数据通信的基础概念 1.1.串行/并行通信 数据通信按数据通信方式分类&#xff1a;串行通信、并行通信 1.2.单工/半双工/全双工通信 数据通信按数据传输方向分类&#xff1a;单工通信、半双工通信、全双工通信 单工通信&#xff1a;数据只能沿一个方向传输半双工通信&…

防雷工程行业应用和施工工艺

防雷工程是指通过各种手段和措施&#xff0c;保护建筑物、设备和人员免受雷电侵害的技术。在我国&#xff0c;由于雷电活动频繁&#xff0c;防雷工程的重要性不言而喻。地凯科技将介绍防雷工程的基本知识、相关案例以及防雷器产品。 一、防雷工程的基本知识 雷电的危害 雷电…

真机搭建中小网络

这是b站上的一个视频&#xff0c;演示了如何搭建一个典型的中小网络&#xff0c;供企业使用 一、上行端口&#xff1a;上行端口就是连接汇聚或者核心层的口&#xff0c;或者是出广域网互联网的口。也可理解成上传数据的端口。 二、下行端口&#xff1a;连接数据线进行下载的端…

pytorch学习——如何构建一个神经网络——以手写数字识别为例

目录 一.概念介绍 1.1神经网络核心组件 1.2神经网络结构示意图 1.3使用pytorch构建神经网络的主要工具 二、实现手写数字识别 2.1环境 2.2主要步骤 2.3神经网络结构 2.4准备数据 2.4.1导入模块 2.4.2定义一些超参数 2.4.3下载数据并对数据进行预处理 2.4.4可视化数…

RocketMQ生产者和消费者都开启Message Trace后,Consume Message Trace没有消费轨迹

一、依赖 <dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-spring-boot-starter</artifactId><version>2.0.3</version> </dependency>二、场景 1、生产者和消费者所属同一个程序 2、生产者开启消…

【css】css实现水平和垂直居中

通过 justify-content 和 align-items设置水平和垂直居中&#xff0c; justify-content 设置水平方向&#xff0c;align-items设置垂直方向。 代码&#xff1a; <style> .center {display: flex;justify-content: center;align-items: center;height: 200px;border: 3px…

【前端入门之旅】HTML中元素和标签有什么区别?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 标签&#xff08;Tag&#xff09;⭐元素&#xff08;Element&#xff09;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&a…

千“垂”百炼:垂直领域与语言模型

这一系列文章仍然坚持走“通俗理解”的风格&#xff0c;用尽量简短、简单、通俗的话来描述清楚每一件事情。本系列主要关注语言模型在垂直领域尝试的相关工作。 This series of articles still sticks to the "general understanding" style, describing everything…

网络安全--原型链污染

目录 1.什么是原型链污染 2.原型链三属性 1&#xff09;prototype 2)constructor 3)__proto__ 4&#xff09;原型链三属性之间关系 3.JavaScript原型链继承 1&#xff09;分析 2&#xff09;总结 3)运行结果 4.原型链污染简单实验 1&#xff09;实验一 2&#xff0…

微信小程序animation动画,微信小程序animation动画无限循环播放

需求是酱紫的&#xff1a; 页面顶部的喇叭通知&#xff0c;内容不固定&#xff0c;宽度不固定&#xff0c;就是做走马灯&#xff08;轮播&#xff09;效果&#xff0c;从左到右的走马灯&#xff08;轮播&#xff09;&#xff0c;每播放一遍暂停 1500ms &#xff5e; 2000ms 刚…

【ASP.NET MVC】MYSQL安装配置(4)

一、安装配置 1、下载MYSQL绿色版压缩包&#xff08;略&#xff09; 2、解压到目录&#xff0c;比如E:\mysql目录 3、设置环境变量 添加bin目录到path&#xff0c;方便运行Mysql的命令 先打开系统的《环境变量》配置 双击系统变量中的Path 添加Mysql的BIN目录到path: 4、在…

解决一个Yarn异常:Alerts for Timeline service 2.0 Reader

【背景】 环境是用Ambari搭建的大数据环境&#xff0c;版本是2.7.3&#xff0c;Hdp是3.1.0&#xff1b;我们用这一套组件搭建了好几个环境&#xff0c;都有这个异常告警&#xff0c;但hive、spark都运行正常&#xff0c;可以正常使用&#xff0c;所以也一直没有去费时间解决这…

jar命令的安装与使用

场景&#xff1a; 项目中经常遇到使用WinR软件替换jar包中的文件&#xff0c;有时候存在WinRAR解压替换时提示没有权限&#xff0c;此时winRAR不能用还有有什么方法替换jar包中的文件。 方法&#xff1a; 使用jar命令进行修改替换 问题&#xff1a; 执行jar命令报错jar 不…

ubuntu git操作记录设置ssh key

用到的命令&#xff1a; 安装git sudo apt-get install git配置git用户和邮箱 git config --global user.name “用户名” git config --global user.email “邮箱地址”安装ssh sudo apt-get install ssh然后查看安装状态&#xff1a; ps -e | grep sshd4. 查看有无ssh k…

一次web网页设计实践——checkbox单选、复选功能的实现

由于工作内容原因近期做了一个网页&#xff0c;记录下。 需求&#xff1a; 写一个如下的页面&#xff0c;包括checkbox单选&#xff0c;checkbox多选&#xff0c;slect&#xff0c;text等控件 内容&#xff1a; 一、checkbox &#xff08;Wlan 开关&#xff09; 要求&#x…

只需十四步,从零开始掌握Python机器学习

推荐阅读&#xff08;点击标题查看&#xff09; 1、Python 数据挖掘与机器学习实践技术应用 2、R-Meta分析与【文献计量分析、贝叶斯、机器学习等】多技术融合实践与拓展 3、最新基于MATLAB 2023a的机器学习、深度学习 4、【八天】“全面助力AI科研、教学与实践技能”夏令营…

python项目开发案例集锦,python项目案例代码

这篇文章主要介绍了python项目开发案例集锦(全彩版)&#xff0c;具有一定借鉴价值&#xff0c;需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获&#xff0c;下面让小编带着大家一起了解一下。 前言 22个通过Python构建的项目&#xff0c;以此来学习Python编程。 ① 骰…

变透明的黑匣子:UCLA 开发可解释神经网络 SNN 预测山体滑坡

内容一览&#xff1a;由于涉及到多种时空变化因素&#xff0c;山体滑坡预测一直以来都非常困难。深度神经网络 (DNN) 可以提高预测准确性&#xff0c;但其本身并不具备可解释性。本文中&#xff0c;UCLA 研究人员引入了 SNN。SNN 具有完全可解释性、高准确性、高泛化能力和低模…