🌈 卡卡军的开源之旅：vue3-sketch-ruler插件的蜕变与升级
👋 开场白
大家好，我是卡卡军。继上次分享了如何使用vue-demi打造Vue2/Vue3通用插件后，我带着满满的动力和新成果回来了！今天，我要向大家介绍vue3-sketch-ruler插件的全新2X版本。
🌟 插件简介
vue3-sketch-ruler，一个专为Vue 3打造的页面缩放操作插件，采用TypeScript编写。它以鼠标为中心进行页面缩放，简化配置，并通过插槽机制分离平台与业务代码，让开发者能够更专注于业务逻辑的实现。下面是目前插件的下载量截图我也挺高兴的。但是1X有个问题,缩放时不能做到以鼠标为中心, 这在设计时就很别扭, 很low, 一直想找个机会升级一波。
🔑 应用场景
- 大屏可视化工具
- 图形设计软件
- 任何需要页面缩放功能的Web应用
✨ 升级亮点
- 鼠标中心缩放：改进后的缩放功能，以鼠标位置为中心，提供更自然的交互体验。
- 界面优化：辅助线显示经过重新设计，界面更加简洁明了。
- API增强：新增还原、放大、缩小API，提供更多控制选项。
- 配置简化：引用方式经过优化，减少配置步骤，提升开发效率。
- 自动居中：无需繁琐计算, 初始化就居中对齐
- 吸附效果： 新增辅助线对刻度有吸附效果
- 刻度数字响应： 新增阴影刻度数字响应效果
- 支持CDN引用
效果展示
📚 设计思路
- 结构调整：尺规组件作为父级，通过插槽接收外部内容，内部通过改造过的pazoom计算画布位置, 然后给出定位控制尺子的位置.
- 缩放中心：鼠标位置作为缩放中心，采用pazoom实现基于CSS transform的缩放效果。
- 辅助线优化：参考稿定拖拽辅助线的方式, 重构辅助线, 解决1X时很难hover到的bug。
- 刻度优化: 参考稿定的刻度样式, 去除小刻度，中间hover时标签跟随鼠标移动，提升用户体验。
- 吸附: 只要给吸附数组传入对应刻度，那么就可以很方便的把辅助线精准的放置到对应的地方，比如可以动态计算出内部元素边缘的X,Y 值, 那么就可以做到,辅助线精准贴边, 相关算法可以查看源码.
- 刻度: 选择对应组件后,在阴影的起始位置标注出对应的刻度, 同时为了让起始刻度数值不与标尺刻度数值重叠, 还需要做特殊隐藏处理
下面是布局结构:
使用说明
- 同时按Ctrl+鼠标滚轮缩放, 根据鼠标位置发生页面缩放
- 同时按空格+鼠标左键, 拖动画布
- 有些需要自己定义监听移动和缩放，不想按空格移动, 或者不想Ctrl+weel 移动, 那么可以设置selfHandle为true，然后通过ref获取到组件实例，然后通过实例调用组件的方法, 自定义监听按键
- 具体操作参见我插件里面的监听移动和缩放方法
🔗 了解更多
- 码上掘金:vue3-sketch-ruler - 码上掘金 (juejin.cn)
- 项目地址：kakajun/vue3-sketch-ruler
- 在线Demo：体验vue3-sketch-ruler
- Cloud Studio:
- CodePen 示例: CodePen 示例
谁在用它
最后的话
感谢大家的支持，开源的路上有你们更精彩！如果对vue3-sketch-ruler感兴趣或有任何建议，欢迎Star、Fork或提交Issue，一起让这个插件更加完善。
