Pango + Cairo; 是否有现成的方法来处理文本中的<img>样式标签？

Question

Pango语法支持一些仅文本标记.据我所知,这并没有延伸到嵌入图像.

环顾四周,我找不到现有实施的方式,但我之前没有做过pango + cairo工作,所以我可能会错过明显的社区.

据我所知,合理的方法是分析字符串,拉出任何标签,创建cairo图像,然后相应地修改它们周围的pango布局.

它似乎也是某人之前可能做过的事情.

我特意在这些问题上寻找答案:

1. pango + cairo已经解决了这个问题,我误解了文档吗？
2. 以前做过这样的事情,参考在哪里？
3. 这是一种合理的方法,还是我应该尝试别的什么,什么？

(另请注意我使用红宝石,这可能会影响我的选择)

Answer 1

我已经浏览了标记解析器的源代码,它不允许"形状"属性(Pango几乎包含图形的方式),但它可以"手动"完成.

由于网上绝对没有示例代码,这里是Pango/Cairo/Images 101.

对于一个简单的演示,我创建了一个800x400的窗口,添加了一个GtkDrawingArea并连接了"draw"信号.在进入主程序循环之前,我使用以下代码初始化它:

PangoLayout     *Pango;
void init_drawingArea (GtkWidget *pWidget)
{
  cairo_surface_t *pImg = cairo_image_surface_create_from_png ("linux.png");
  PangoRectangle   r = {0, 0, PANGO_SCALE * cairo_image_surface_get_width (pImg),
                              PANGO_SCALE * cairo_image_surface_get_height(pImg)};
  PangoContext    *ctxt = gtk_widget_get_pango_context (pWidget);
  PangoAttrList   *attList = pango_attr_list_new();
  PangoAttribute  *attr;

  Pango = pango_layout_new (ctxt);

  pango_cairo_context_set_shape_renderer (ctxt, render, NULL, NULL);
  pango_layout_set_text (Pango, pszLorem, -1);
  pango_layout_set_width(Pango, PANGO_SCALE * 800);
  attr = pango_attr_shape_new_with_data(&r, &r, pImg, NULL, NULL);
  attr->start_index = 0; attr->end_index = 1;
  pango_attr_list_insert (attList, attr);

  attr = pango_attr_shape_new_with_data(&r, &r, pImg, NULL, NULL);
  attr->start_index = 152; attr->end_index = 153;
  pango_attr_list_insert (attList, attr);

  pango_layout_set_attributes (Pango, attList);
}

上下文的形状渲染器设置为render(),并创建并初始化PangoLayout.然后它创建2个形状属性,将用户数据设置为我们从png文件填充的cairo表面,并将属性应用于文本的字符0和152.

"绘制"信号处理很简单.

gboolean onDraw (GtkWidget *pWidget, cairo_t *cr, gpointer user_data)
{
  pango_cairo_show_layout (cr, Pango);
  return 1;
}

并根据需要调用render()PangoCairoShapeRenderFunc函数:

void render (cairo_t *cr, PangoAttrShape *pShape, gboolean do_path, gpointer data)
{
  cairo_surface_t *img = (cairo_surface_t *)pShape->data;
  double  dx, dy;

  cairo_get_current_point(cr, &dx, &dy);
  cairo_set_source_surface(cr, img, dx, dy);
  cairo_rectangle (cr, dx, dy, pShape->ink_rect.width/PANGO_SCALE,
                               pShape->ink_rect.height/PANGO_SCALE);
  cairo_fill(cr);
}

从cairo获取当前点,它绘制一个矩形并用图像填充它.

这就是它的全部功能.它显示了作为事后补充的图像.它们遵循与任何其他字形相同的规则,因此它们仅限于CSS的显示:内联.

我把代码放在http://immortalsofar.com/PangoDemo/上,如果有人想玩它的话.我,我来到这里试图绕过GtkTextBuffer的局限.猜猜我只需要深入了解.