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

徐小夕 等级 491 1 0

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

H5-Dooring更新日志

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

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

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

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

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

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

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

绘制网格线

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

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

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

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

{
  backgroundImage: 
    linear-gradient(90deg, #ccc 5%,transparent 0),
    linear-gradient(#ccc 5%, transparent 0);
  backgroundSize: 15px 15px;
  backgroundRepeat: repeat
}

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

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

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

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

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

在线体验地址: H5编辑器 | 积木式快速搭建H5页面

更多推荐

收藏
评论区

相关推荐

<Dart基础>Dart简介
Dart基础系列: Dart简介(https://www.jianshu.com/p/c749f40828a5) Dart语法(上)(https://www.jianshu.com/p/6b5689342e24) <基础Dart语法(下)(https://www.jianshu.com/p/7c3eba46e679) 一、简
Dart基础&gt;Dart语法(上)
Dart基础系列: Dart简介(https://www.jianshu.com/p/c749f40828a5) Dart语法(上)(https://www.jianshu.com/p/6b5689342e24) <基础Dart语法(下)(https://www.jianshu.com/p/7c3eba46e679) 说明:
Dart基础语法简介
Dart基础系列: Dart简介(https://www.jianshu.com/p/c749f40828a5) Dart语法(上)(https://www.jianshu.com/p/6b5689342e24) <基础Dart语法(下)(https://www.jianshu.com/p/7c3eba46e679) 一、简
敏感词库下载
链接: https://github.com/chason777777/mgck.git(https://github.com/chason777777/mgck.g
python爬虫之数据提取Xpath(爬取起点中文网案例)
(https://blog.csdn.net/sjjsaaaa/article/details/111293732)Xpath 详细的Xpath介绍手册—— https://www.w3school.com.cn/xpa
记录一次electron踩坑
Vue2.x版本 https://github.com/dmhsq/electronvuedmhsq(https://github.com/dmhsq/electronvuedmhsq) 或者 https://github.com/dmhsq/electronvue/tree/main/template(https://github.com
一文搞懂什么是HTTP与HTTPS
(https://blog.csdn.net/petterp/article/details/102779257)Http与Https的区别。 在最近的开发中,深感网络相关基础知识薄弱,于是趁周末好好总结一
鸿蒙OS前端开发入门指南:网络图片_Image渲染网络图片 - HarmonyOS技术社区
目录: 1、开启明文传输(https://harmonyos.51cto.com/posts/3388bky) 2、权限申请(https://harmonyos.51cto.com/posts/3388bky) 3、引入http插件(https://harmonyos.51cto.com/posts/3388bky) 4、案例展
「写不过瘾系列」使用 cool-admin,4步极速 CRUD
cooladmin 传送门 → https://github.com/coolteamofficial/cooladminvue(https://github.com/coolteamofficial/cooladminvue) (https://imghelloworld.osscnbeijing.aliyuncs.c
20 张图彻底弄懂 HTTPS 的原理
前言 近年来各大公司对信息安全传输越来越重视,也逐步把网站升级到 HTTPS 了,那么大家知道 HTTPS 的原理是怎样的吗,到底是它是如何确保信息安全传输的?网上挺多介绍 HTTPS,但我发现总是或多或少有些点有些遗漏,没有讲全,今天试图由浅入深地把 HTTPS 讲明白,相信大家看完一定能掌握 HTTPS 的原理,本文大纲如下: HTTP 为什么不安全
Android开发,干货
内存检测 leakcanary https://github.com/square/leakcanary 响应式编程 RxJava https://github.com/ReactiveX/RxJava RxAndroid https://github.com/ReactiveX/RxAndroid 消息通信 EventBus 组
kali2020.3安装Nessus8.12.1并解除IP限制
1、准备 (1)获得激活码 地址:https://zhcn.tenable.com/products/nessus/nessusessentials https://zhcn.tenable.com/products/nessus/activationcode?tns\_redirecttrue(https://zhcn.tenable
GO开发[一]:golang语言初探
一.Golang的安装 1.https://dl.gocn.io/ (国内下载地址) (https://imghelloworld.osscnbeijing.aliyuncs.com/658c5d13c377
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti
JAVA回调机制(CallBack)之小红是怎样买到房子的??
JAVA回调机制CallBack 序言最近学习java,接触到了回调机制(CallBack)。初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义。当然了,我在理解了回调之后,再去看网上的各种讲解,确实没什么问题。但是,对于初学的我来说,缺了一个循序渐进的过程。此处,将我对回调机制的个人理解,按