最近在做一个生产广告的小 demo，遇到元素冲突的问题，求解决方案

[fffflyfish]

大家好，这两天老板让做个广告生成器，就类似购物网站的 banner ，从设计的角度来看，生成一个广告是需要遵守很多设计规则的，我在这里筛选了留白，视觉平衡等几个常见的规则来做的，但是现在生成的如下图： 就是发生元素之间重叠冲突的，而我理想的生成的东西应该类似这样：

或者是这样

所以现在想解决的问题就是在遵守我自己定义的规则前提下怎么避免元素之间的重叠冲突？有没有相关的优化算法。

Ps ：用的是 python 的 PIL 做的。因为这个问题涉及到算法，数学，设计方面，放在这个节点下没问题吧。

[fffflyfish]

之前问过人，有人说这是凸优化里的一个经典的布局和定位问题，但是查了下感觉不是很符合要求

[fffflyfish]

然后看了下游戏引擎里面的冲突避免和碰撞检测，感觉有那么点关系，但是我并不是很擅长这个领域，求大神

[onlyhot]

根据你提供的条件，我看着就像打水印。计算图片的高度宽度，再按照合适的方案安排文字。

[fffflyfish]

@onlyhot 水印的话位置应该没有那么多讲究，但是在设计师设计广告的时候会遵循很多设计规范的，比如对齐啦，留白啦这些东西，而且你看我生成的第一个方案就很丑，因为元素之间冲突了，我想做的是想让这些元素不要重叠冲突，而且前提是遵守我预定义的规则。 不知道我说清楚了么。。。

[ovear]

没这么麻烦吧。。用
1 、（字高+行距）* 行数
2 、（字宽+间距）* 字数

来分别定位。。不就行了

[fffflyfish]

@ovear 没懂，你这样只是知道了一段文字对应的像素长宽，如何避免出现类似我上传的第一张图那种情况？

[helloccav]

请问一下，广告要遵守的设计规则，例如留白，视觉平衡等，这些东西在看什么书、什么网站、什么教材可以学到呢？
可以推荐一些网上的教材或者纸质书吗？
谢谢。

[ovear]

@fffflyfish 你的图片素材的绘图原点（一般是左上角，由你算出来的 x ， y 决定。这样就不会重叠了）

[designer]

如果设计真的能生成就好了。

[onlyhot]

@fffflyfish 图片和文字的位置都是你可以控制的。总的宽度高度知道，图片的宽度和高度知道，算出图片左上角的坐标。就知道剩余的留白的位置了啊。然后再安排文字。

[srlp]

把整个图片界面划分成格子 （ grid ），然后设计好文字图片等占据那些格子，算法上就很容易保证不重叠了吧。

[fffflyfish]

@helloccav 我主要获取渠道是看论文，就是在谷歌学术上搜图片，审美一类的关键字，有不少人在做的。随便找一篇，然后看一下 related work,就能找到不少你想要的

[fffflyfish]

@ovear
@onlyhot
可能是我问题没有表述清楚，因为现在不只是重叠冲突的问题，因为我的生成器是需要满足一些自定义的设计规则，就比如对齐吧，在保证元素左对齐或者上对齐的情况下避免重叠，这个就设计一个对齐检测的东西，再比如一个视觉平衡的规则，要求每个元素的重心在规定好的位置的前提下避免重叠，就好像本科学的拉格朗日乘数法，是要在函数的自变量满足一定的约束条件下求解函数的最优值。。。不知道我说清楚了么。。。

我昨天没有回复是因为找了一晚上的文献，不好意思哈，这是我找到的一个不错的方案
O ’ Donovan P, Agarwala A, Hertzmann A. Learning layouts for single-pagegraphic designs[J]. IEEE transactions on visualization and computer graphics, 2014, 20(8): 1200-1213.
@srlp
这个方法不错诶，我之前看游戏里面的碰撞检测的时候也是怎么做的，厉害！

我昨天没有回复是因为找了一晚上的文献，不好意思哈，这是我找到的一个不错的方案
O ’ Donovan P, Agarwala A, Hertzmann A. Learning layouts for single-pagegraphic designs[J]. IEEE transactions on visualization and computer graphics, 2014, 20(8): 1200-1213.

[fffflyfish]

@designer 是呀，关键是要把这些设计规范和设计原则转化成数学建模，类似网页的那种响应式设计，我这个昨天找到了一个不错的解决方案，是一篇论文：
O ’ Donovan P, Agarwala A, Hertzmann A. Learning layouts for single-pagegraphic designs[J]. IEEE transactions on visualization and computer graphics, 2014, 20(8): 1200-1213.

[Aether]

很简单…你只需要研究一下 css 然后自己再实现一次， 4/！后使用里面的 float 属性。当然你也可以单纯实现这个属性。

[fffflyfish]

@Aether 你的意思是模拟 css 的 float 属性？诶，突然感觉这是个不错的 idea ！让我想想怎么模拟，因为有些东西在网页设计里很容易实现（标签很方便），但是在海报图片设计方面就比较难应用。。。

[fffflyfish]

@designer 现在我看很多发论文的讨论都是通过把以前不可量化的东西现在用某种方式量化，然后出一篇论文的，记得有一个朋友就是把用户使用手机的用户体验分解成几个维度量化了下，发了篇论文。事实上如果有成熟的规范或者规则的话，设计应该也离自动化不远了。