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

2024-04-06 22:43:18

最近一工作一直很忙, 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 + h和command + h, 并在监听函数内部执行逻辑操作即可, 如下:

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

相关视频推荐

可视化搭建平台的参考网格线设计相关推荐

如何设计可视化搭建平台的组件商店？
相关文章: 如何搭积木式的快速开发H5页面? 演示地址: H5-Dooring页面制作平台关注并将「趣谈前端」设为星标每早08:30按时推送技术干货/优秀开源/技术思维之前一直在做 lowcod ...
可视化搭建平台的地图组件和日历组件方案选型
可视化搭建平台除了需要为用户提供简单便捷的操作方式之外, 还需要提供丰富的组件支持和组件扩展, 这样才能满足更多用户的业务需求. 在 H5-dooring 创建的初期主要考虑的方向是用户使用的便捷性, ...
IoT Studio可视化搭建平台编辑历史功能的思考与探索
简介: 在前端可视化搭建领域中"重做"和"撤销"这两个功能已经是标配中的标配,毕竟只要有用户行为的地方就可能会有出错,这两个功能无疑就是为用户提供了" ...
H5-Dooring可视化搭建平台的新技能
H5-Dooring在持续更新迭代中, 接下来笔者将带大家介绍一下H5-Dooring的新功能, 并介绍网格参考线的实现方案, 内容很短, 实现方案也很简单, 欢迎大家提出更好的方案和实现思路. 最近 ...
京东运营活动可视化搭建系统之架构流程设计
看本文之前,不妨先看看: 1)MPM 卖场可视化搭建系统 - 要素设计前言这是 MPM 分享系列的第二篇,在上一篇 MPM 卖场可视化搭建系统 - 要素设计中,我们介绍了 MPM 作为一个面向卖 ...
移动端实现元素拖拽效果插件_基于自然流布局的可视化拖拽搭建平台设计方案...
LowCode 是高效.高性能的拖拽式低代码开发平台. 也是笔者最近一直在研究的方向, 对于可视化搭建平台的实现方案笔者之前写过很多文章, 这里带大家探索一个新方向--基于自然流布局的可视化搭建平台. ...
基于自然流布局的可视化拖拽搭建平台设计方案
LowCode 是高效.高性能的拖拽式低代码开发平台. 也是笔者最近一直在研究的方向, 对于可视化搭建平台的实现方案笔者之前写过很多文章, 这里带大家探索一个新方向--基于自然流布局的可视化搭建平台. ...
【零代码平台】基于Vue实现商城可视化搭建 Mall-Cook
前言本项目旨在开发一个供运营.产品快速搭建商城的可视化平台,利用可视化的拖拽与属性配置完成商城构建和日常运营,而开发只进行平台的维护.业务组件的新增和迭代.避免高频的业务需求,提升我们的开发效率. ...
页面可视化搭建工具前生今世
原文地址: https://github.com/CntChen/cn... 背景引子页面可视化搭建, 是一个历久弥新的话题. 更广义上讲, 页面是 GUI 的一部分, GUI 的拖拉生成在各种开 ...

最新文章

热门文章