如何使用 Pango 在 Clutter.Text 中设置行高

Posted 2023-02-16

【中文标题】如何使用 Pango 在 Clutter.Text 中设置行高

【英文标题】：How to set line height in Clutter.Text using Pango

【发布时间】：2015-04-05 10:14:28

【问题描述】：

我想让Clutter.Text 使用Gtk.Pango 以双倍行距显示文本。

注意：在 css 中，我认为我们会使用 line-height: 200%。

我试过这段代码，但它不起作用：

var text_actor  = new Clutter.Text.with_text ("Roboto 10", "Long long text") ;
text_actor.width= SIDE_PANE_WIDTH ;
text_actor.get_layout ().set_spacing (2*Pango.SCALE) ;

显然，Clutter.Text 保留了 Pango.Layout 的缓存版本

有没有办法做到这一点？

【参考方案1】：

直接使用 CoglPango 解决此问题的一种方法：

var t = new Clutter.Actor ();
t.set_size (300, 300);

// add some more text to see it
var text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...";

var layout = t.create_pango_layout (text);
layout.set_width (200);
layout.set_spacing (24 * Pango.SCALE);

t.paint.connect (() => 
    Cogl.pango_render_layout (layout, 0, 0,
                              Cogl.Color.from_4ub(0, 0, 0, 255), 0);
);

edit 这确实是解决方案。基于此，这是我使用的代码：

            actor  = new Text () ; 
            actor.width= SIDE_PANE_WIDTH ;

            var text = "Some long text<b>Bold</b>" ; 
            var pango_layout = bio_actor.create_pango_layout ("");
            pango_layout.set_markup (text, text.length) ;
            pango_layout.set_spacing (2 * Pango.SCALE);
            pango_layout.set_font_description (Pango.FontDescription.from_string ("Roboto 10")) ;
            pango_layout.set_width (SIDE_PANE_WIDTH * Pango.SCALE);
            bio_actor.paint.connect (() => 
                    Cogl.pango_render_layout (pango_layout, 0, 0, Cogl.Color.from_4ub(255, 255, 255, 255), 0);
            );
            int width;
            int height ;
            pango_layout.get_size (out width, out height) ;
            actor.height = height / Pango.SCALE;

【讨论】：

这实际上非常糟糕，而且您正在破坏 Text actor 缓存 PangoLayout 并避免一直重新测量文本的所有机会，从而减慢一切。

@ebassi 除了 allocate/get_preferred* 中的布局之外，我提出的与您最后提出的有何不同？是否有不同的（更好的）功能来绘制布局？

如果你重写“paint”实现并使用你自己的布局，所有的尺寸都会不正确；避免在演员大小之外绘制文本的剪辑是基于分配的大小，您只是践踏。您还可以在不阻止原始处理程序运行的情况下覆盖绘制，这意味着您正在绘制布局，然后actor 将在顶部绘制其布局，这仅在您使用空的 Text actor 时才有效。我在下面概述了适当的解决方案。

【参考方案2】：

是的，ClutterText 缓存了PangoLayout 实例，以避免在每次必须检索首选大小时重新测量文本。它实际上缓存了PangoLayout 的最新三个实例，因为 width-for-height/height-for-width 几何请求，但这只是一个实现细节。

更改ClutterText 的PangoLayout 实例的属性也不会导致ClutterText 的更新：之后您必须调用clutter_actor_queue_redraw()，因为PangoLayout 位于较低级别比场景图中的演员。

一般来说，ClutterText 演员不允许你调整它创建的PangoLayout；预计演员负责创建修改布局，并尝试覆盖这将导致性能不佳或未定义的行为。

如果您想引入行间距属性，那么您必须针对ClutterText 提交一个错误——尽管这意味着您必须等到 9 月才能获得 Clutter 的下一个稳定版本。

如果您不需要ClutterText 所做的所有事情，而只想显示文本，则可以将ClutterActor 子类化并使用clutter_actor_create_pango_layout() 创建一个PangoLayout，您可以在覆盖的@987654336 内测量它@、get_preferred_height() 和 allocate() 虚函数，并在覆盖的 paint() 虚函数内绘制。