.H5-Dooring更新日志添加画布网格参考线以及快捷切换方式添加文字跑马灯组件画布操作控件支持拖拽Dooring使用视频教程多页面链接自动关联实现可视化编辑器的网格参考线?
之所以设计网格参考线, 是为了让H5制作者更精准的控制组件位置和大小, 作为设计辅助.
我们可以使用键盘快捷键ctrl + h(window系统)或者comand + h来显示或者隐藏参考网格, 类似于PS软件. 我们来看看细节: ?
这个功能无非需要实现两个关键点: 绘制网格线监听键盘事件显示隐藏网格线绘制网格线网格线的绘制有很多种方案, 比如背景图片重复, canvas绘制, css实现, 这里笔者采用第三种方案.用css实现笔者的思路是通过背景渐变来做
我们知道css3支持多背景, 所以我们可以利用背景渐变绘制一个垂直的矩形和一个水平的矩形, 然后设置宽高让他们重复绘制即可, 代码如下:{ backgroundImage: linear-gradient