从图片中提取html格式的布局
制作界面的自动化
意义:对于程序设计人员来说,比较痛苦的是制作界面。从设计人员发送的稿件(通常为jpg格式),到完成html的布局,需要将图像转化为div标记,自动化这一过程十分有意义
1.设计一个工具:从图片格式,生成bootstrap3的布局文件,目的是生成可嵌套的合适的div,row,column
2.思路:
定义:div就是一个矩形框,而在html布局中的任意两个div,有以下几种形式
事实上除了最后一种交错的方式(面积有重叠),两个div可以任意方式组合。最后一种方式的坐标表达是()
考察div的排列方式,对于他们应该使用横线与纵线如何划分,使得他们能够处于划分后的横纵的方格之中? 很显然当两个div长,宽的坐标有交集时候,只能按照一个方向划分,使得两个div分隔开,这就决定首先需要划分横向还是纵 的线条。而对于长,宽都 没有交集时候,例如上面图例的倒数第二个,则先横向划分还是先纵向划分是无关紧要的,为了我们程序能够工作,我们设定在此种情况下,必须首先进行纵向的划 分。
3.代码功能结构
那么该工具应该具有两个大的功能,第一个功能是能够辨识图片中的不相交方框块。采取一种算法,将图片前景的方框块从背景中辨识出来。 第二功能,是将辨识出来的方框块按照上面的思路转化成div(符合bootstrap栅格系统)。
辨识图片前景,并形成方框:
转化为div:
从图片中提取html格式的布局的更多相关文章
- 9月11日上午HTML有序列表、无序列表、网页的格式和布局
样式表 六.列表方块 1.有序列表变无序列表 <ol> <li>张店</li> <li>桓台</li> <li>淄川</l ...
- 一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float
很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...
- css样式表 格式与布局
1 样式表 内联样式表 内嵌样式表 外部样式表 2 选择器 标签选择器 <style type="text\css" class 选择器 以.开头 ID选择器 以#开 ...
- css样式表:样式分类,选择器。样式属性,格式与布局
样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...
- css样式,边界和边框,格式和布局
1.大小:width:宽:heigh:高 2.背景:1)background-color:背景颜色 2)background-image:背景图片url路径 3)background-repeat:图 ...
- 关于CSS格式与布局中的基础知识的简单操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- LIRe 源代码分析 5:提取特征向量[以颜色布局为例]
===================================================== LIRe源代码分析系列文章列表: LIRe 源代码分析 1:整体结构 LIRe 源代码分析 ...
- css样式表----------样式属性(背景与前景、边界和边框、列表与方块、格式与布局)
一.背景与前景 (1).背景 line-height: 1.5 !important;">90; /*背景色(以样式表为主,样式表优先.)*/ background-image:url ...
- HTML基础(五)——-css样式表——样式属性——格式与布局
一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute 绝对位置: 1.外层没有position:a ...
随机推荐
- Shell脚本 判断
#Linux系统Shell脚本判断变量文件目录:权限.是否存在.空值.相等 1.字符串判断 str1 = str2 当两个串有相同内容.长度时为真str1 != str2 当串str1和str2不等时 ...
- C++深度解析教程学习笔记(4)C++中的新成员
1. 动态内存分配 (1)C++通过 new 关键字进行动态内存申请,是以类型为单位来申请空间大小的 (2)delete 关键字用于内存释放 ▲注意释放数组时要加[],否则只释放这个数组中的第 1 个 ...
- 【原创】12. MYSQL++之Template Query
1. 什么是Template Query 在我们实际的编程过程中,我们很容易碰到printf这类需要在运行时来决定到底打印出什么的函数,例如 printf(“hello %s”, sth); 在这个例 ...
- 字符编码(续)---Unicode与ANSI字符串转换以及分辨字符编码形式
Unicode与ANSI字符串转换 我们使用windows函数MultiByteToWideChar将多字节字符串转换为宽字符字符串,如下: int MultiByteToWideChar( UINT ...
- linux top 命令各参数详解
简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以通过用户按 ...
- Oracle设置主键自增长
第一步:为表设置主键 第二步:新建序列 CREATE SEQUENCE SQ.SEQ_INCREASE START WITH 12 MAXVALUE 999 MINVALUE 0 INCREME ...
- 常用Xcode文档位置,修改Xcode项目模板地址总结,以及常用地址,随时更新。
Xcode文档 ~/Library/Developer/Shared/Documentation/DocSets or /Applications/Xcode.app/Contents/Develop ...
- 2014蓝桥杯B组初赛试题《切面条》
题目描述: 一根高筋拉面,中间切一刀,可以得到2根面条. 如果先对折1次,中间切一刀,可以得到3根面条. 如果连续对折2次,中间切一刀,可以得到5根面条. 那么,连续对折10次 ...
- 在Linux中监视IO性能
dd命令 iostat命令 理解iostat的各项输出 iostat的应用实例 附:在Windows中监视IO性能 延伸阅读 dd命令 dd其实是工作于比较低层的一个数据拷贝和转换的*nix平台的工具 ...
- zynq qemu学习
1,ubuntu给软件包降级,先安装aptitude sudo apt-get install aptitude 2,强制降级,等号“=”前后不能有空格 sudo aptitude install ...