可视化搭建平台的参考网格线设计

简介: 最近一工作一直很忙, H5-Dooring也在持续更新迭代中, 接下来笔者将带大家介绍一下H5-Dooring的新功能, 并介绍网格参考线的实现方案, 内容很短, 实现方案也很简单, 欢迎大家提出更好的方案和实现思路.

最近一工作一直很忙, H5-Dooring也在持续更新迭代中, 接下来笔者将带大家介绍一下H5-Dooring的新功能, 并介绍网格参考线的实现方案, 内容很短, 实现方案也很简单, 欢迎大家提出更好的方案和实现思路.


H5-Dooring更新日志



  • 添加画布网格参考线以及快捷切换方式
  • 添加文字跑马灯组件
  • 画布操作控件支持拖拽
  • Dooring使用视频教程
  • 多页面链接自动关联


实现可视化编辑器的网格参考线



网络异常,图片无法展示
|


之所以设计网格参考线, 是为了让H5制作者更精准的控制组件位置和大小, 作为设计辅助. 我们可以使用键盘快捷键ctrl + h(window系统)或者comand + h来显示或者隐藏参考网格, 类似于PS软件. 我们来看看细节:


网络异常,图片无法展示
|


这个功能无非需要实现两个关键点:


  • 绘制网格线
  • 监听键盘事件显示/隐藏网格线


绘制网格线


网格线的绘制有很多种方案, 比如背景图片重复, canvas绘制, css实现, 这里笔者采用第三种方案.


css实现笔者的思路是通过背景渐变来做, 原理如下:

网络异常,图片无法展示
|


我们知道css3支持多背景, 所以我们可以利用背景渐变绘制一个垂直的矩形和一个水平的矩形, 然后设置宽高让他们重复绘制即可, 代码如下:


{
backgroundImage: 
linear-gradient(90deg, #ccc5%,transparent0),
linear-gradient(#ccc5%, transparent0);
backgroundSize: 15px15px;
backgroundRepeat: repeat}

有关css3更深入的知识可以参考我的文章, 这里笔者就不详细介绍了. 我们最终效果如下:

网络异常,图片无法展示
|


监听键盘事件显示/隐藏网格线


监听键盘事件这里笔者推荐一款比较好用的库keymaster, 几乎是任何强大的在线编辑器必备键盘快捷插件. 支持单键和组合键监听, 以及监听列表. 我们只需要定义ctrl + hcommand + h, 并在监听函数内部执行逻辑操作即可, 如下:


// dva modalshowGrid(state) {
overSave('showGrid', !state.showGrid)
return { 
...state, 
showGrid: !state.showGrid  }
},
// 显示参考线key('⌘+h, ctrl+h', () => {
dispatch({
type: 'editorModal/showGrid'  });
})




目录
打赏
0
0
0
0
22
分享
相关文章
20+个可视化搭建工具,一次玩个够
无论大公司还是小公司,我们开发前端工程时候,项目工程又很多类似的功能或者页面,开发经常是加班加点搬砖去做一些无成长反复操作的工作,看键盘上 ctrle 键已经被磨掉了漆,C 和V 也马上磨白了,那对于开发如何把这些重复的工作用机器去解决?在前端资源紧缺的情况下,是否可直接有工具直接就可以搭建出我想要的前端页面?于是业界的页面可视化搭建工具就出现了,本文会介绍目前最流行的页面可视化搭建工具,也会提供一些开源的可视化搭建项目供大家参考。
2160 0
20+个可视化搭建工具,一次玩个够
代码可视化平台
这是一个代码可视化工具,旨在简化代码理解过程。用户无需额外配置,直接复制代码即可实时观看执行过程,支持前进后退和动画展示。目前支持JavaScript和Python,未来将扩展更多语言。工具提供了数组、链表、栈、队列、二叉树和哈希表的可视化,并包含辅助函数和自定义注释功能。主要局限在于仅支持单段代码,且执行步数限制为500步。[了解更多](https://staying.fun/zh)
135 20
数据分析可视化神器---streamlit框架,各种图表绘制,布局以及生产综合案例剖析
数据分析可视化神器---streamlit框架,各种图表绘制,布局以及生产综合案例剖析
1264 0
用第三方拖拽库快速撸一个可视化搭建平台
用第三方拖拽库快速撸一个可视化搭建平台
148 3
漏刻有时数据可视化大屏常见问题(16):视频背景快速加载及展示的解决方案
漏刻有时数据可视化大屏常见问题(16):视频背景快速加载及展示的解决方案
100 0
Echarts实战案例代码(49):基于不支持立体漏斗图Funnel的HTML+CSS解决方案
Echarts实战案例代码(49):基于不支持立体漏斗图Funnel的HTML+CSS解决方案
222 0
【视觉高级篇】27 # 如何实现简单的3D可视化图表:GitHub贡献图表的3D可视化?
【视觉高级篇】27 # 如何实现简单的3D可视化图表:GitHub贡献图表的3D可视化?
204 0
【视觉高级篇】27 # 如何实现简单的3D可视化图表:GitHub贡献图表的3D可视化?
开源的数据图表工具 Redash 的学习
在数据运维人员的日常工作中,常会遇到需要将数据库中的数据查询并展示出来的问题,可能总是需要让前端开发人员来做web页面帮助完成这些需求。Redash 提供了这么一种简单便捷的方式将这些工作标准化:在web页面上输入sql语句,使用查询返回的结果构造数据可视化图表,用户可以将这些图表结果拖动构造成自己需要的数据面板,在很大程度上可以缓解数据运维人员对前端开发人员的需求。
370 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等