🌈 卡卡军的开源之旅：vue3-sketch-ruler插件的蜕变与升级

👋 开场白

🌟 插件简介

vue3-sketch-ruler，一个专为Vue 3打造的页面缩放操作插件，采用TypeScript编写，对SSR友好。它以鼠标为中心进行页面缩放，简化配置，并通过插槽机制分离平台与业务代码，让开发者能够更专注于业务逻辑的实现。下面是目前插件的下载量截图我也挺高兴的。

🔑 应用场景

• 大屏可视化工具
• 图形设计软件
• 任何需要页面缩放功能的Web应用

✨ 升级亮点

• 鼠标中心缩放：改进后的缩放功能，以鼠标位置为中心，提供更自然的交互体验。
• 界面优化：辅助线显示经过重新设计，界面更加简洁明了。
• API增强：新增还原、放大、缩小API，提供更多控制选项。
• 配置简化：引用方式经过优化，减少配置步骤，提升开发效率。

效果展示

📚 设计思路

1. 结构调整：尺规组件作为父级，通过插槽接收外部内容，利用dom.getBoundingClientRect()计算画布位置。
2. 缩放中心：鼠标位置作为缩放中心，采用pazoom实现基于CSS transform的缩放效果。
3. 辅助线优化：去除小刻度，中间hover时标签跟随鼠标移动，提升用户体验。

下面是布局结构:

🚀 未来计划

• 稳定当前版本，计划增加导航组件，实现与外部模板的实时同步。
• 为辅助线增加磁吸效果，提高开发便捷性。

🔗 了解更多

• 项目地址：kakajun/vue3-sketch-ruler
• 在线Demo：体验vue3-sketch-ruler

谁在用它

• Avue-data数据大屏 (avuejs.com)
• go-view - 码云 - 开源中国 (gitee.com)

最后的话

感谢大家的支持，开源的路上有你们更精彩！如果对vue3-sketch-ruler感兴趣或有任何建议，欢迎Star、Fork或提交Issue，一起让这个插件更加完善。