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

👋 开场白

🌟 插件简介

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

🔑 应用场景

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

✨ 插件亮点

• 鼠标中心缩放：缩放功能，以鼠标位置为中心，可自定义方法控制缩放和移动，提供更自然的交互体验。
• 界面优化：提供拉拽辅助线，界面更加简洁明了。
• API增强：提供还原、放大、缩小API，提供更多控制选项。
• 配置简化：引用方式通过插槽方式，减少配置步骤，提升开发效率。
• 自动居中：无需繁琐计算, 初始化就居中对齐
• 吸附效果： 新增辅助线对刻度有吸附效果
• 刻度数字响应： 新增阴影刻度数字响应效果

效果展示

📚 设计思路

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

下面是布局结构:

<Wrapper style={rectStyle} className={state.isBlack ? 'balckwrapper' : 'whitewrapper'}>
          <SketchRule
            scale={state.scale}
            lockLine={lockLine}
            thick={state.thick}
            width={rectWidth}
            showRuler={showRuler}
            height={rectHeight}
            palette={cpuPalette}
            snapsObj={snapsObj}
            shadow={state.shadow}
            showShadowText={state.showShadowText}
            canvasWidth={canvasWidth}
            canvasHeight={canvasHeight}
            panzoomOption={panzoomOption}
            ref={sketchruleRef}
            isShowReferLine={state.isShowReferLine}
            onHandleCornerClick={handleCornerClick}
            updateScale={updateScale}
            handleLine={handleLine}
            lines={state.lines}
          >
            <div slot="default" data-type="page" style={canvasStyle}>
              <ImgStyle src={bgImg} alt="" />
            </div>

            <Btns slot="btn">
              <button onClick={resetMethod}>还原</button>
              <button onClick={zoomOutMethod}>缩小</button>
            </Btns>
          </SketchRule>
        </Wrapper>

使用说明

1. 同时按Ctrl+鼠标滚轮缩放, 根据鼠标位置发生页面缩放
2. 同时按空格+鼠标左键, 拖动画布
3. 有些需要自己定义监听移动和缩放，不想按空格移动, 或者不想Ctrl+weel 移动, 那么可以设置selfHandle为true，然后通过ref获取到组件实例，然后通过实例调用组件的方法, 自定义监听按键
4. 具体操作参见我插件里面的监听移动和缩放方法

🔗 了解更多

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

谁在用它(目前只有vue的例子)

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

最后的话

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