Windows平台下Skia使用技巧四

www.qt-ui.com 原创技术文章

前面我们介绍了单行，多行文字的处理方法，这里我们介绍富文本的绘制方法

富文本内容是相当对普通文本内容而言的，可以显示的内容更加多样，包括文字，图片，gif，表格等等。

首先我们绘制一个类关系对显示内容进行设计。

显示对象基类 UIGearsElement 显示对象子类 UIGearsText UIGearsPicture UIGearsTable分别用来显示文字，图片，表格

UIGearsElement是显示内容的基类，主要实现两个方法： 1、RenderElement绘制内容 2、ResizeElement计算显示内容内部对象的大小，比如字符内部单个字符的区域，用来实现框选功能

有了显示内容之后我们需要设计内存的段落和行。

这里我们可以参考GOF的《设计模式:可复用面向对象软件的基础》中的设计内容：

文档 -》 段落 -》 行 -》 显示对象

文档包含段落 段落包含行 行包含显示对象

按照这种包含关系进行开发。

以下是头文件定义

enum ElementType
    {
        ET_TEXT = 0,
        ET_PIC,
        ET_GIF,
        ET_TABLE,
        ET_OTHER
    };

    struct LineElement
    {
        UIGearsElement*     _obj;
        ElementType           _type;
        s32                         _startPos;
        s32                 _endPos;
    };

    class UIGLine
    {
    public:
        bool RenderElement(UIGearsRender::IUIGearsRenderDeivce* renderDevice);
        void ResizeElement();
    private:
        std::vector<LineElement*> _lineObjs;
    };

    class UIGParagraph
    {
    public:
        bool RenderElement(UIGearsRender::IUIGearsRenderDeivce* renderDevice);
        void ResizeElement();
    private:
        std::vector<UIGLine*> _lines;
    };

    class UIGDocument
    {
    public:
        bool RenderElement(UIGearsRender::IUIGearsRenderDeivce* renderDevice);
        void ResizeElement();
    private:
        std::vector<UIGParagraph*> _paragraphs;
    };