形状内文本环绕算法
我正在寻找一种将文本包装在非矩形形状内的算法，最好基于 Knuth 和 Plass 算法。最困难的部分是，由于文本中不同的字体大小，线条可能具有不同的高度。下图是算法应该能够生成的示例。
I am looking for an algorithm to wrap text within a non-rectangular shape, preferably based on the Knuth and Plass algorithm. The hardest part of this is that the lines may have different heights due to differing font sizes in the text. The image below is an example of what the algorithm should be able to generate.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
编辑，更新
尝试
text / html
gggggggggggggg gggggggggggggg gggggggggggggggggggg gggggggggggggggggg gggggggggggggggggggggggg gggggggggggggggggggggg ggggggggggggggggggggggggggg ggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggg gggggggggggggggggggggggg gggggggggggggggggg gggggggggggg gggggggg ggggg ggg gjs
Edit, Updated
Try
text / html
gggggggggggggg gggggggggggggg gggggggggggggggggggg gggggggggggggggggg gggggggggggggggggggggggg gggggggggggggggggggggg ggggggggggggggggggggggggggg ggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggg gggggggggggggggggggggggg gggggggggggggggggg gggggggggggg gggggggg ggggg ggg gjs
假设每个字母都有特定的大小（宽度和高度，在这种情况下我们可能只关心宽度，因为所有字母都具有相同的高度）。然后我们需要以下内容：
现在我们有了图像每个条带的大小，假设我们有这个（我使用任意单位作为宽度）：
编辑：刚刚意识到心脏是多么丑陋，我的错。
现在我们需要每个单词的大小，并按顺序插入它们。每个块有 x 宽度，每个单词对象有 y 宽度。如果y宽度> x 宽度，我们移动到下一行并检查那里
我认为这就是你想要的，但我不完全确定。让我知道这是否有帮助！ :)
Let's say each letter has a specific size(width and height, in this case we probably only care about width because all letters have the same height). Then we need the following:
Now that we have the size of each strip of the image, let's say we have this (i'm using arbitary unit for width):
EDIT: Just realized how ugly the heart is, my bad.
Now we need the size of each word, and insert them sequentially. Each block has x width, and each word object has y width. If y width > x width, we move to the next line and check there
I think this is what you want, but I'm not completely sure. Let me know if this helped! :)
对于一个简单的算法，我们假设您可以计算每个单词周围的边界框，并且您有一个带有要填充的形状蒙版的图像。
从图像蒙版的顶部向下扫描，直到找到与第一个单词一样长的线。看看是否可以将其向下延伸成边界框大小的矩形。如果是这样，请删除第一个单词。如果没有，继续扫。
删除一个单词后，看看是否可以将边界框扩展为（第一个框 + 第二个框 + 空间）的宽度和 max（第一个框，第二个框）的高度。如果是这样，请删除第二个词。如果不是，请将第一个单词从左到右置于适合图像蒙版（从左到右）的边界框内，从蒙版中删除该边界框，然后继续。
您可以通过坚持线条具有相同的基线（即使被形状打破）（例如穿过心脏顶部小块的线条）来使这稍微花哨一些；然后，您需要有一个备用的“继续沿此基线”条件。但上面的基本想法，使用图像蒙版来尝试将矩形放入其中，完成后将其删除，就可以完成这项工作。
（使用几何运算比这里描述的基于像素的运算更快，但是人们必须担心所有情况来弄清楚边界框如何适合任意多边形，并且这里解释起来有点长。）
For a simple algorithm, let's assume that you can compute a bounding box around each word, and that you have an image with a mask of the shape that you want to fill.
Sweep down from the top of the image mask until you find a line that is as long as the first word. See if you can extend it downward into a rectangle the size of the bounding box. If so, drop the first word there. If not, keep sweeping.
Once you drop a word, see if you can extend the bounding box to be the width of (first box + second box + space) and the height of max(first box,second box). If so, drop the second word there. If not, center the first word left-to-right within the bounding box that will fit within your image mask (left to right), remove that bounding box from the mask, and keep going.
You can make this slightly fancier by insisting that lines have the same baseline even if broken by the shape (e.g. lines across the top nubs of the heart); you then need to have an alternate "continue along this baseline" condition. But the basic idea above, with an image mask that you use to try to fit rectangles inside which are removed when you're done, will do the job.
(It is faster to use geometric operations than pixel-based ones described here, but then one has to worry about all the cases for figuring out how a bounding box fits within an arbitrary polygon, and that's a bit long to explain here.)