最近公司领导给了个任务让我做一个基于Json格式的富文本UMG插件，了解UE4 Slate的都应该知道，其实UE4中自带了一个富文本Slate控件—SRichTextBlock，该控件主要是对XML文本进行解析，实现了Fancy Text，Hyperlink，Wiget，Image的功能，本文将SRichTextBlock的实现方式做一个简单的解析，也算是工作笔记吧。
UE4随笔
void SRichTextBlock::Construct( const FArguments& InArgs )
{
BoundText = InArgs._Text;
HighlightText = InArgs._HighlightText;
TextStyle = *InArgs._TextStyle;
WrapTextAt = InArgs._WrapTextAt;
AutoWrapText = InArgs._AutoWrapText;
WrappingPolicy = InArgs._WrappingPolicy;
Margin = InArgs._Margin;
LineHeightPercentage = InArgs._LineHeightPercentage;
Justification = InArgs._Justification;
MinDesiredWidth = InArgs._MinDesiredWidth;
{
TSharedPtr<IRichTextMarkupParser> Parser = InArgs._Parser;
if ( !Parser.IsValid() )
{
Parser = FDefaultRichTextMarkupParser::Create();
}
TSharedPtr<FRichTextLayoutMarshaller> Marshaller = InArgs._Marshaller;
if (!Marshaller.IsValid())
{
Marshaller = FRichTextLayoutMarshaller::Create(Parser, nullptr, InArgs._Decorators, InArgs._DecoratorStyleSet);
}
for (const TSharedRef< ITextDecorator >& Decorator : InArgs.InlineDecorators)
{
Marshaller->AppendInlineDecorator(Decorator);
}
TextLayoutCache = MakeUnique<FTextBlockLayout>(TextStyle, InArgs._TextShapingMethod, InArgs._TextFlowDirection, InArgs._CreateSlateTextLayout, Marshaller.ToSharedRef(), nullptr);
TextLayoutCache->SetDebugSourceInfo(TAttribute<FString>::Create(TAttribute<FString>::FGetter::CreateLambda([this]{ return FReflectionMetaData::GetWidgetDebugInfo(this); })));
}
}
int32 SRichTextBlock::OnPaint( const FPaintArgs& Args, const FGeometry& AllottedGeometry, const FSlateRect& MyCullingRect, FSlateWindowElementList& OutDrawElements, int32 LayerId, const FWidgetStyle& InWidgetStyle, bool bParentEnabled ) const
{
// OnPaint will also update the text layout cache if required
LayerId = TextLayoutCache->OnPaint(Args, AllottedGeometry, MyCullingRect, OutDrawElements, LayerId, InWidgetStyle, ShouldBeEnabled(bParentEnabled));
return LayerId;
}
通过分析以上代码，不难看出，SRichTextBlock是在 TUniquePtr< FTextBlockLayout > TextLayoutCache 中实现的，在TextLayoutCache的实现过程中都经历了哪些步骤呢?
1、构造Parser，用于解析XML文本，解析结果存储在FTextLineParseResults中，FTextLineParseResults中有两个成员变量FTextRange Range，TArray< FTextRunParseResults > Runs，其中Range表示解析文本的范围，Runs中存储了每个要素的渲染属性，其结构如下所示：
struct SLATE_API FTextRunParseResults
{
FTextRunParseResults( FString InName, const FTextRange& InOriginalRange)
: Name( InName )
, OriginalRange( InOriginalRange )
, MetaData()
{
}
FTextRunParseResults( FString InName, const FTextRange& InOriginalRange, const FTextRange& InContentRange)
: Name( InName )
, OriginalRange( InOriginalRange )
, ContentRange( InContentRange )
, MetaData()
{
}
FString Name;
FTextRange OriginalRange;
FTextRange ContentRange;
TMap< FString, FTextRange > MetaData;
};
Name为要素名称，OriginalRange为一个要素如Image在XML文本中的范围，ContentRange为要素所带文本在XML文本中的范围如Hyperlink中的文本，MeteData存储了要素的属性信息。
2、构造Decorator，用于获取要素对应的Style并创建响应的ISlateRun如FSlateImageRun，每一种要素都有一个对应的ISlateRun，要素的渲染在其对应的ISlateRun的OnPaint中完成。
3、构造Marshaller，Marshaller其实就是一个代理，其作用是在TextLayOutCache中执行Parser和Decorator的相关操作。
类的架构图如下所示：
SRichTextBlock架构图
对富文本的解析就先写到这里，内容只是点到为止，不甚透彻但是希望可以对大家有所帮助！
网友评论