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

2023-10-28 14:30
文章标签 功能 分享 类似 ps 辅助线

本文主要是介绍分享 一个类似 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

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

这篇关于分享 一个类似 ps 辅助线功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/293853。

相关文章

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya（不是本人，claude AI）在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容： 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用
阅读更多...
C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
【专题】2024飞行汽车技术全景报告合集PDF分享（附原数据表）

【专题】2024飞行汽车技术全景报告合集PDF分享（附原数据表）

原文链接： https://tecdat.cn/?p=37628 6月16日，小鹏汇天旅航者X2在北京大兴国际机场临空经济区完成首飞，这也是小鹏汇天的产品在京津冀地区进行的首次飞行。小鹏汇天方面还表示，公司准备量产，并计划今年四季度开启预售小鹏汇天分体式飞行汽车，探索分体式飞行汽车城际通勤。阅读原文，获取专题报告合集全文，解锁文末271份飞行汽车相关行业研究报告。 据悉，业内人士对飞行汽车行业
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
Spring框架5 - 容器的扩展功能 (ApplicationContext)

Spring框架5 - 容器的扩展功能 (ApplicationContext)

private static ApplicationContext applicationContext;static {applicationContext = new ClassPathXmlApplicationContext("bean.xml");} BeanFactory的功能扩展类ApplicationContext进行深度的分析。ApplicationConext与 BeanF
阅读更多...
JavaFX应用更新检测功能（在线自动更新方案）

JavaFX应用更新检测功能（在线自动更新方案）

JavaFX开发的桌面应用属于C端，一般来说需要版本检测和自动更新功能，这里记录一下一种版本检测和自动更新的方法。 1. 整体方案 JavaFX.应用版本检测、自动更新主要涉及一下步骤： 读取本地应用版本拉取远程版本并比较两个版本如果需要升级，那么拉取更新历史弹出升级控制窗口用户选择升级时，拉取升级包解压，重启应用用户选择忽略时，本地版本标志为忽略版本用户选择取消时，隐藏升级控制窗口 2.
阅读更多...
Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中，在进行一些平板等默认横屏的设备开发的过程中，需要在进入camera2的 时候，默认预览图像也是需要横屏显示的，在上一篇已经实现了横屏预览功能，然后发现横屏预览后，拍照保存的图片 依然是竖屏的，所以说同样需要将图片也保存为横屏图标了，所以就需要看下mtk的camera2的相关横屏保存图片功能， 如何实现实现横屏保存图片功能 如图所示: 2.mtk
阅读更多...
Spring+MyBatis+jeasyui 功能树列表

Spring+MyBatis+jeasyui 功能树列表

java代码@EnablePaging@RequestMapping(value = "/queryFunctionList.html")@ResponseBodypublic Map<String, Object> queryFunctionList() {String parentId = "";List<FunctionDisplay> tables = query(parent
阅读更多...
PostgreSQL核心功能特性与使用领域及场景分析

PostgreSQL核心功能特性与使用领域及场景分析

PostgreSQL有什么优点？ 开源和免费 PostgreSQL是一个开源的数据库管理系统，可以免费使用和修改。这降低了企业的成本，并为开发者提供了一个活跃的社区和丰富的资源。 高度兼容 PostgreSQL支持多种操作系统（如Linux、Windows、macOS等）和编程语言（如C、C++、Java、Python、Ruby等），并提供了多种接口（如JDBC、ODBC、ADO.NET等
阅读更多...
java常用面试题-基础知识分享

java常用面试题-基础知识分享

什么是Java？ Java是一种高级编程语言，旨在提供跨平台的解决方案。它是一种面向对象的语言，具有简单、结构化、可移植、可靠、安全等特点。 Java的主要特点是什么？ Java的主要特点包括： 简单性：Java的语法相对简单，易于学习和使用。面向对象：Java是一种完全面向对象的语言，支持封装、继承和多态。跨平台性：Java的程序可以在不同的操作系统上运行，称为"Write once,
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2