卡卡军的开源之旅：react-sketch-ruler插件 开场白

大家好，我是卡卡军。继一个月前分享了vue3-sketch-ruler插件的蜕变与升级后，我再继续给大家分享我的另外一个成果react-sketch-ruler！它是vue3-sketch-ruler插件的姊妹版，它基于React 18.x, 拥有和vue相同的交互和功能。我本身一直是做vue的，这是我第一个react插件，做这个主要也是为了锻炼自己写react的能力, 经过一个月业余时间修改, 已达到vue相同的功能水平, 现在才放出来, 有相同react学习需求的小伙伴, 也可以参照我这个插件学习, 怎么将vue插件升级为react插件，请对比我另外一个插件vue3-sketch-ruler。如果大家点赞多, 考虑后期再出一偏文章, 讲解怎么升级为react插件。 当然其中肯定有些不足的地方，欢迎大家多多交流提意见，一起完善这个插件。

插件简介

react-sketch-ruler，一个专为react打造的页面缩放操作插件，采用TypeScript编写。它以鼠标为中心进行页面缩放，简化配置，并通过插槽机制分离平台与业务代码，让开发者能够更专注于业务逻辑的实现。

应用场景✨ 插件亮点效果展示

设计思路结构调整：尺规组件作为父级，通过插槽接收外部内容，内部通过改造过的pazoom计算画布位置, 然后给出定位控制尺子的位置.缩放中心：鼠标位置作为缩放中心，采用pazoom实现基于CSS transform的缩放效果。辅助线优化：参考稿定拖拽辅助线的方式, 重构辅助线, 解决很难hover到的bug。刻度优化: 参考稿定的刻度样式, 去除小刻度，中间hover时标签跟随鼠标移动，提升用户体验。吸附: 只要给吸附数组传入对应刻度，那么就可以很方便的把辅助线精准的放置到对应的地方，比如可以动态计算出内部元素边缘的X,Y 值, 那么就可以做到,辅助线精准贴边, 相关算法可以查看源码.刻度: 选择对应组件后,在阴影的起始位置标注出对应的刻度, 同时为了让起始刻度数值不与标尺刻度数值重叠, 还需要做特殊隐藏处理

下面是布局结构:

          
            

              
            
            
              还原
              缩小
            
          
        

使用说明同时按Ctrl+鼠标滚轮缩放, 根据鼠标位置发生页面缩放同时按空格+鼠标左键, 拖动画布有些需要自己定义监听移动和缩放，不想按空格移动, 或者不想Ctrl+weel 移动, 那么可以设置selfHandle为true，然后通过ref获取到组件实例，然后通过实例调用组件的方法, 自定义监听按键具体操作参见我插件里面的监听移动和缩放方法 了解更多谁在用它(目前只有vue的例子)最后的话

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