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

徐小夕 等级 877 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页面

更多推荐

收藏
评论区

相关推荐

HTTPS
### 最近网站更新为https,于是做个笔记 ### 将域名 [www.domain.com](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.domain.com) 的证书文件1\_www.domain.com\_bundle.crt 、 ### 私钥文件2\_www.doma
HTTPS
楔子 谣言粉碎机前些日子发布的《[用公共WiFi上网会危害银行账户安全吗?](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.guokr.com%2Farticle%2F100110%2F)》,文中介绍了在使用HTTPS进行网络加密传输的一些情况,从回复来看,争议还是有的。随着网络越
HTTPS加密原理
http(超文本传输协议) ------------- > 一种属于应用层的协议 缺点: 1. 通信使用明文(不加密),内容可能会被窃听 2. 不验证通信方的身份,因此有可能遭遇伪装 3. 无法证明报文的完整性,所以有可能已遭篡改 优点: 1. 传输速度快 https ----- > HTTPS 并非是应用层的一种新协议。只是 HTTP
HTTPS和HTTP的区别
HTTPS(Secure Hypertext Transfer Protocol)安全超文本传输协议 它是一个安全通信通道,它基于HTTP开发,用于在客户计算机和服务器之间交换信息。它使用安全套接字层(SSL)进行信息交换,简单来说它是HTTP的安全版。  它是由Netscape开发并内置于其浏览器中,用于对数据进行压缩和解压操作,并返回网络上传送回的
HTTPS学习笔记
笔记详细地址:[http://note.youdao.com/yws/public/redirect/share?id=4882fca3838541908c75c92c92d28b74&type=false](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fnote.youdao.com%2F
HTTPS是如何保证安全的
HTTP存在的问题 --------- 1. **窃听风险**:通信使用明文(不加密),内容可能会被窃听(第三方可能获知通信内容) 2. **冒充风险**:不验证通信方的身份,因此有可能遭遇伪装 3. **篡改风险**:无法证明报文的完整性,所以有可能已遭篡改 HTTPS ----- ![](https://osci
HTTPS的工作原理
**目的** http就是我们平时浏览网页时候使用的一种协议(网站是以http://开头)。http协议传输的数据都是未加密的(明文),一次http协议传输隐私信息非常不安全。为了保证这些隐私数据能加密传输,出现了https,下面讨论一下https的工作原理: **概述** HTTPS在传输数据之前需要客户端(浏览器)与服务端(网站)之间进行一
HTTPS请求
##HTTPS请求## > **HttpsUtils代码** package com.ices.utils.httpsHelp; import java.io.BufferedReader; import java.io.InputStream; import java.io.InputStreamReader;
Https详细分析
#### 目录介绍 * 01.为何会有Https * 02.解决方案分析 * 03.SSL是什么 * 04.RSA验证的隐患 * 05.CA证书身份验证 * 06.Https工作原理 * 07.Https代理作用 * 08.Https真安全吗 * 09.Https性能优化 ### 01.为何会有Https * H
Nginx配置https
一、开启nginx的ssl模块 1.未安装过nginx,编译安装配置参数如下: ./configure \--prefix=/usr/local/nginx \--with-pcre \--with-http\_ssl\_module #ssl模块 \--with-http\_stub\_status\_module \--wit
SpringBoot Web Https 配置
不管是游戏服务器开发,还是其它服务开发,越来越多的平台都要求服务端必须支持https的访问。以增加安全性。比如目前火热的小程序,要求服务端必须支持https,苹果商店也有说http请求要修改为https。所以https将会是游戏服务器的普遍需求。 一,证书生成 ======    证书可以自己使用jdk生成进行测试。但是在正常使用的时候,需要去第三方机构
TCP、UDP、HTTP、HTTPS之前的区别
网络由下往上分为: 物理层--- 数据链路层--- 网络层 --  IP协议 传输层 --  TCP协议 会话层 -- 表示层和应用层 --  HTTP协议 ![](https://oscimg.oschina.net/oscnet/aeb8a94598094caf8c377e1277ba95948ea.png) 1、TCP/IP连接 TC
springboot2 配置 https
package cn.xiaojf.aibus.configure; import org.apache.catalina.Context; import org.apache.catalina.connector.Connector; import org.apache.coyote.http11.Http11Ni