制作界面的自动化

意义:对于程序设计人员来说，比较痛苦的是制作界面。从设计人员发送的稿件(通常为jpg格式)，到完成html的布局，需要将图像转化为div标记，自动化这一过程十分有意义

1.设计一个工具:从图片格式，生成bootstrap3的布局文件，目的是生成可嵌套的合适的div,row，column

2.思路:

　　定义:div就是一个矩形框，而在html布局中的任意两个div，有以下几种形式

　　事实上除了最后一种交错的方式(面积有重叠)，两个div可以任意方式组合。最后一种方式的坐标表达是()

　   考察div的排列方式，对于他们应该使用横线与纵线如何划分，使得他们能够处于划分后的横纵的方格之中？ 很显然当两个div长，宽的坐标有交集时候，只能按照一个方向划分，使得两个div分隔开，这就决定首先需要划分横向还是纵　　　   的线条。而对于长，宽都 没有交集时候，例如上面图例的倒数第二个，则先横向划分还是先纵向划分是无关紧要的，为了我们程序能够工作，我们设定在此种情况下，必须首先进行纵向的划 分。

3.代码功能结构　　　

　　那么该工具应该具有两个大的功能，第一个功能是能够辨识图片中的不相交方框块。采取一种算法，将图片前景的方框块从背景中辨识出来。 第二功能，是将辨识出来的方框块按照上面的思路转化成div(符合bootstrap栅格系统)。

　　　　辨识图片前景，并形成方框：

　　　　转化为div:

从图片中提取html格式的布局的更多相关文章

  1. 9月11日上午HTML有序列表、无序列表、网页的格式和布局

    样式表 六.列表方块 1.有序列表变无序列表 <ol> <li>张店</li> <li>桓台</li> <li>淄川</l ...

  2. 一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float

    很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...

  3. css样式表 格式与布局

    1 样式表  内联样式表  内嵌样式表  外部样式表 2 选择器 标签选择器 <style type="text\css" class 选择器  以.开头 ID选择器 以#开 ...

  4. css样式表：样式分类，选择器。样式属性，格式与布局

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

  5. css样式，边界和边框，格式和布局

    1.大小:width:宽:heigh:高 2.背景:1)background-color:背景颜色 2)background-image:背景图片url路径 3)background-repeat:图 ...

  6. 关于CSS格式与布局中的基础知识的简单操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. LIRe 源代码分析 5：提取特征向量[以颜色布局为例]

    ===================================================== LIRe源代码分析系列文章列表: LIRe 源代码分析 1:整体结构 LIRe 源代码分析 ...

  8. css样式表----------样式属性（背景与前景、边界和边框、列表与方块、格式与布局）

    一.背景与前景 (1).背景 line-height: 1.5 !important;">90; /*背景色(以样式表为主,样式表优先.)*/ background-image:url ...

  9. HTML基础（五）——-css样式表——样式属性——格式与布局

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute     绝对位置: 1.外层没有position:a ...

随机推荐

  1. 10 个你需要了解的 Linux 网络和监控命令

    我下面列出来的10个基础的每个linux用户都应该知道的网络和监控命令.网络和监控命令类似于这些: hostname, ping, ifconfig, iwconfig, netstat, nsloo ...

  2. 进程间通信___命名管道(FIFO)

    命名管道(FIFO) 基本概念 命名管道和一般的管道基本相同,但也有一些显著的不同: 命名管道是在文件系统中作为一个特殊的设备文件而存在的. 不同祖先的进程之间可以通过管道共享数据. 当共享管道的进程 ...

  3. ZooKeeper集群搭建过程

    ZooKeeper集群搭建过程 提纲 1.ZooKeeper简介 2.ZooKeeper的下载和安装 3.部署3个节点的ZK伪分布式集群 3.1.解压ZooKeeper安装包 3.2.为每个节点建立d ...

  4. PHP 获取二维数组中某个key的集合

    本文为代码分享,也是在工作中看到一些“大牛”的代码,做做分享. 具体是这样的,如下一个二维数组,是从库中读取出来的. 代码清单: $user = array( 0 => array( 'id'  ...

  5. Tornado抽象方法抽象类

    #!/usr/bin/env python #抽象方法抽象类 import abc class Foo(metaclass=abc.ABCMeta): def f1(self): raise Exce ...

  6. 我使用的网址--Hadoop

    1.Hadoop 官网下载:http://hadoop.apache.org/releases.html 各版本网址:http://mirror.bit.edu.cn/apache/hadoop/co ...

  7. MySQL - pt-query-digest的下载与使用

    对于脚本文件,是可以执行的,我们不用安装.所以,但是这个脚本文件没有执行的权限,所以,我们首先赋予这个脚本文件的可执行的权限. 再次查看文件的信息后. 已经有了执行的权限了. 运行脚本的时候,可要注意 ...

  8. 如何安全退出已调用多个Activity的应用

    对于单一Activity的应用来说,退出很简单,直接finish()即可.当然,也可以用killProcess()和System.exit()这样的方法. 但是,对于多Activity的应用来说,在打 ...

  9. npm link和react native的问题

    问题说明: 需要自己开发一个ReactNative插件,这个插件在独立git仓库,那么怎么把这个插件安装到主项目的依赖里,并且方便对插件的修改调试 方案一: 把插件发布到npm仓库,每次主项目通过np ...

  10. Gabor filter与Gabor transform

    https://en.wikipedia.org/wiki/G%C3%A1bor Gabor filter:a linear filter used in image processing一种线性滤波 ...