最近工作很忙，H5-Dooring也在不断更新迭代。接下来笔者将介绍H5-Dooring的新功能，并介绍网格参考线的实现方案。内容很短，执行计划也很短。简单，欢迎大家提出更好的解决方案和实施思路。H5-Dooring更新日志新增画布网格参考线及快捷切换方式新增文本跑马灯组件画布操作控件支持拖拽Dooring使用视频教程自动关联多个页面链接，实现可视化编辑器的网格引导旨在让H5制作者更准确控制元件的位置和尺寸作为设计辅助。我们可以使用快捷键ctrl+h（window系统）或comand+h来显示或隐藏参考网格，类似于PS软件。我们来看一下细节：这个函数需要实现两个关键点：绘制网格线，监听键盘事件，显示/隐藏网格线，绘制网格线gridlines绘制的方案有很多种，比如背景图重复，canvas绘图和CSS实现。这里笔者采用第三种方案。作者使用css的思路是通过背景渐变来实现。原理是这样的：我们知道css3是支持多背景的，所以我们可以利用背景渐变绘制一个垂直矩形和一个水平矩形，然后设置宽高，让它们可以重复绘制。代码如下：{backgroundImage:linear-gradient(90deg,#ccc5%,transparent0),linear-gradient(#ccc5%,transparent0);backgroundSize:15px15px;backgroundRepeat:repeat}更深入的css3知识，请参考我的文章，这里就不详细介绍了。我们最终的效果如下：监听键盘事件显示/隐藏网格线监听键盘事件这里推荐一个比较好用的库keymaster，几乎是任何强大的在线编辑器必备的快捷键插件。支持单键和组合键监控，支持监控列表。我们只需要定义ctrl+h和command+h，在监听函数内部进行逻辑操作，如下：//dvamodalshowGrid(state){overSave('showGrid',!state.showGrid)return{...state,showGrid:!state.showGrid}},//显示参考行key('?+h,ctrl+h',()=>{dispatch({type:'editorModal/showGrid'});})
