良许Linux教程网 干货合集 部署H5-Dooring可视化平台

部署H5-Dooring可视化平台

H5-Dooring 是一款功能强大,开源免费的H5可视化页面配置解决方案,致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。技术栈以react为主, 后台采用nodejs开发.

部署H5-Dooring可视化平台

H5-Dooring更新日志

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

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

H5-Dooring可视化搭建平台的新技能H5-Dooring可视化搭建平台的新技能 这个功能无非需要实现两个关键点:

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

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

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

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

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

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

H5-Dooring可视化搭建平台的新技能H5-Dooring可视化搭建平台的新技能 监听键盘事件显示/隐藏网格线

监听键盘事件这里笔者推荐一款比较好用的库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'
 });
})

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

1ad5ad6eddc451da964a8888a6fd5266d0163210
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部