ArkUI节点模型和渲染机制

HarmonyOS

jshyb

2024-05-26 16:01:51

浏览

回答 1

按赞同

按时间

mafast

节点模型

当前模型是三棵树模型，分别为Component、Element和Render树，其中Component是作为前端UI组件的映射，一个UI组件对应一个Component，从Component生成对应的Element，来维护组件的树形结构和更新，Render被保存在Component和Element中，主要存储节点的属性信息，驱动绘制和更新。

渲染机制

布局

布局的过程就是通过各类布局的算法计算出每个RenderNode在相对空间上的真实大小和位置。

当某个节点的内容发生变化时，就会标记自己为needLayout，并一直向上标记到重绘边界（RepaintBoundary），从重绘边界开始，父节点将LayoutParam传给子节点，子节点据此计算尺寸大小和位置。

render_node.h

public: 
    // Called by parent to perform layout. 
    void Layout(const LayoutParam& layoutParam) 
    { 
        auto pipeline = context_.Upgrade(); 
        if (!pipeline) { 
            LOGE("pipeline is null when layout"); 
            return; 
        } 
  
        bool dipScaleChange = !NearEqual(pipeline->GetDipScale(), dipScale_); 
        dipScale_ = pipeline->GetDipScale(); 
        if (dipScaleChange || layoutParam_ != layoutParam) { 
            layoutParam_ = layoutParam; 
            layoutParamChanged_ = true; 
            SetNeedLayout(true); 
        } 
  
        if (onChangeCallback_) { 
            onChangeCallback_(); 
        } 
        OnLayout(); 
    } 
  
    virtual bool IsRepaintBoundary() const 
    { 
        return IsHeadRenderNode(); 
    } 
  
    // JSview boundary, all nodes in [head, tail] share the same RSNode 
    bool IsHeadRenderNode() const 
    { 
#ifdef ENABLE_ROSEN_BACKEND 
        return SystemProperties::GetRosenBackendEnabled() ? isHeadRenderNode_ : false; 
#else 
        return false; 
#endif 
    }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.

render_node.cpp

void RenderNode::OnLayout() 
{ 
    auto parent = parent_.Upgrade(); 
    if (parent) { 
        Size parentViewPort = parent->GetChildViewPort(); 
        if (viewPort_ != parentViewPort) { 
            viewPort_ = parentViewPort; 
            needLayout_ = true; 
        } 
    } 
    if (NeedLayout()) { 
        PrepareLayout(); 
        PerformLayout(); 
        layoutParamChanged_ = false; 
        SetNeedLayout(false); 
        pendingDispatchLayoutReady_ = true; 
        MarkNeedRender(); 
    } 
} 
  
void RenderNode::MarkNeedRender(bool overlay) 
{ 
    if (!needRender_) { 
        SetNeedRender(true); 
        if (IsRepaintBoundary()) { 
            auto pipelineContext = context_.Upgrade(); 
            if (pipelineContext) { 
                pipelineContext->AddDirtyRenderNode(AceType::Claim(this), overlay); 
            } 
        } else { 
            auto parent = parent_.Upgrade(); 
            if (parent) { 
                parent->MarkNeedRender(); 
            } 
        } 
    } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

render_button.cpp

void RenderButton::PerformLayout() 
{ 
    if (!buttonComponent_) { 
        LOGE("Fail to perform layout due to buttonComponent is null"); 
        return; 
    } 
    minWidth_ = buttonComponent_->GetMinWidth(); 
    type_ = buttonComponent_->GetType(); 
    widthDefined_ = GreatOrEqual(buttonComponent_->GetWidth().Value(), 0.0); 
    heightDefined_ = GreatOrEqual(buttonComponent_->GetHeight().Value(), 0.0); 
    if (type_ == ButtonType::ARC) { 
        width_ = ARC_BUTTON_WIDTH; 
        height_ = ARC_BUTTON_HEIGHT; 
    } 
    buttonSize_ = Size(NormalizePercentToPx(width_, false), NormalizePercentToPx(height_, true)); 
    rrectRadius_ = NormalizeToPx(buttonComponent_->GetRectRadius()); 
    layoutSize_ = Measure(); 
    SetChildrenLayoutSize(); 
    SetLayoutSize(CalculateLayoutSize()); 
    SetChildrenAlignment(); 
    buttonSize_ = GetLayoutSize() - Size(widthDelta_, widthDelta_); 
    if (type_ == ButtonType::CAPSULE) { 
        rrectRadius_ = buttonSize_.Height() / 2; 
    } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

绘制

同布局一样，绘制也是一个深度遍历的过程，遍历调用每个RenderNode的Paint方法，此时的绘制只是根据布局算出来的大小和位置，在当前绘制的上下文记录每个节点的绘制命令。

对每个节点，绘制分为四个步骤：

① 如果当前节点需要分层，那么需要创建一个新的绘制上下文，并提供可以记录绘制命令的画布；

② 在当前的画布上记录背景的绘制命令；

③ 递归调用子节点的绘制方法，记录子节点的绘制命令；

④ 在当前的画布上记录前景的绘制命令。

render_node.cpp

void RenderNode::RenderWithContext(RenderContext& context, const Offset& offset) 
{ 
    MarkNeedWindowBlur(false); 
    if (onLayoutReady_ && pendingDispatchLayoutReady_) { 
        onLayoutReady_(std::string("\"layoutReady\",null,null")); 
    } 
    pendingDispatchLayoutReady_ = false; 
    if (GetHasSubWindow() || !GetNeedClip()) { 
        if (context.GetNeedRestoreHole()) { 
            context.Restore(); 
            context.SetNeedRestoreHole(false); 
            context.SetClipHole(Rect()); 
        } 
    } else { 
        context.SetClipHole(context_.Upgrade()->GetTransparentHole()); 
    } 
    Paint(context, offset); 
    for (const auto& item : SortChildrenByZIndex(disappearingNodes_)) { 
        PaintChild(item, context, offset); 
    } 
    auto hasOnAreaChangeCallback = eventExtensions_ ? eventExtensions_->HasOnAreaChangeExtension() : false; 
    if (needUpdateAccessibility_ || hasOnAreaChangeCallback) { 
        auto pipelineContext = context_.Upgrade(); 
        if (pipelineContext != nullptr) { 
            pipelineContext->AddNeedRenderFinishNode(AceType::Claim(this)); 
        } 
    } 
    CheckIfNeedUpdateTouchRect(); 
    SetNeedRender(false); 
} 
  
void RenderNode::Paint(RenderContext& context, const Offset& offset) 
{ 
    const auto& children = GetChildren(); 
    for (const auto& item : SortChildrenByZIndex(children)) { 
        PaintChild(item, context, offset); 
    } 
} 
  
void RenderNode::PaintChild(const RefPtr<RenderNode>& child, RenderContext& context, const Offset& offset) 
{ 
    if (child && child->GetVisible()) { 
        context.PaintChild(child, offset); 
    } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.

rosen_render_context.cpp

void RosenRenderContext::Repaint(const RefPtr<RenderNode>& node) 
{ 
    if (!ShouldPaint(node) || !node->NeedRender() || node->GetRSNode() == nullptr) { 
        return; 
    } 
  
    auto rsNode = node->GetRSNode(); 
    auto offset = 
        node->GetTransitionPaintRect().GetOffset() - 
        Offset(rsNode->GetStagingProperties().GetFrame().x_, rsNode->GetStagingProperties().GetFrame().y_); 
  
    std::string name = AceType::TypeName(node); 
    if (name != "RosenRenderForm" && name != "RosenRenderPlugin") { 
        InitContext(rsNode, node->GetRectWithShadow(), offset); 
        node->RenderWithContext(*this, offset); 
        UpdateChildren(rsNode); 
    } else { 
        node->RenderWithContext(*this, offset); 
    } 
    StopRecordingIfNeeded(); 
} 
  
void RosenRenderContext::PaintChild(const RefPtr<RenderNode>& child, const Offset& offset) 
{ 
    if (!ShouldPaint(child)) { 
        return; 
    } 
    auto pipelineContext = child->GetContext().Upgrade(); 
    if (!pipelineContext) { 
        LOGE("pipelineContext is null."); 
        return; 
    } 
    bool canChildOverflow = pipelineContext->GetMinPlatformVersion() >= OVERFLOW_PLATFORM_VERSION; 
    Rect rect = child->GetTransitionPaintRect() + offset; 
    if (!(child->IsPaintOutOfParent() || canChildOverflow) && !estimatedRect_.IsIntersectWith(rect)) { 
#if defined(PREVIEW) 
        child->ClearAccessibilityRect(); 
#endif 
        return; 
    } 
  
    auto childRSNode = child->GetRSNode(); 
    if (childRSNode && childRSNode != rsNode_) { 
        childNodes_.emplace_back(childRSNode); 
        std::string name = AceType::TypeName(child); 
        if (name != "RosenRenderForm" && name != "RosenRenderPlugin") { 
            if (child->NeedRender()) { 
                RosenRenderContext context; 
                auto transparentHole = pipelineContext->GetTransparentHole(); 
                if (transparentHole.IsValid() && child->GetNeedClip()) { 
                    Offset childOffset = rect.GetOffset(); 
                    Rect hole = transparentHole - childOffset; 
                    context.SetClipHole(hole); 
                } 
                context.Repaint(child); 
            } else { 
                // No need to repaint, notify to update AccessibilityNode info. 
                child->NotifyPaintFinish(); 
            } 
        } 
        Offset pos = rect.GetOffset(); 
        if (name == "RosenRenderPlugin") { 
            auto renderPlugin = AceType::DynamicCast<RenderSubContainer>(child); 
            if (!renderPlugin) { 
                return; 
            } 
            auto pluginContext = renderPlugin->GetSubPipelineContext(); 
            if (!pluginContext) { 
                return; 
            } 
            auto density = pipelineContext->GetDensity(); 
            Offset pluginOffset = {pos.GetX() / density, pos.GetY() / density}; 
            pluginContext->SetPluginEventOffset(child->GetGlobalOffset()); 
        } 
    } else { 
        child->RenderWithContext(*this, rect.GetOffset()); 
    } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.

2024-05-27 21:13:14

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

ArkUI节点模型和渲染机制

订阅鸿蒙技术特刊，精选内容抢先看