[{"data":1,"prerenderedAt":150},["ShallowReactive",2],{"page-\u002Fcpp\u002F自绘组件库思考":3},{"id":4,"title":5,"body":6,"description":12,"extension":143,"meta":144,"navigation":145,"path":146,"seo":147,"stem":148,"__hash__":149},"content\u002Fcpp\u002F自绘组件库思考.md","自绘组件库思考",{"type":7,"value":8,"toc":141},"minimark",[9,13,108,127,134,137],[10,11,12],"p",{},"如果先不管窗口管理的具体逻辑，我们先聚焦于绘制这个任务上面来。",[14,15,20],"pre",{"className":16,"code":17,"language":18,"meta":19,"style":19},"language-mermaid shiki shiki-themes github-light github-dark","flowchart TB\n  subgraph ui[\"主线程 \u002F 其它线程\"]\n    App[应用 \u002F Widget 等]\n  end\n  subgraph rt[\"RenderThread 专用线程\"]\n    Q[任务队列 Post \u002F InvokeSync]\n    RC[RenderContext: EGL + ANGLE + GrDirectContext]\n    RS[RenderSurface: EGLSurface + SkSurface]\n    Draw[SkCanvas 上画 Shapes \u002F Rectangle]\n  end\n  App -->|\"Post(任务) 或 CreateContext\u002FCreateSurface\"| Q\n  Q --> RC\n  RC --> RS\n  RS --> Draw\n\n","mermaid","",[21,22,23,31,37,43,49,55,61,67,73,79,84,90,96,102],"code",{"__ignoreMap":19},[24,25,28],"span",{"class":26,"line":27},"line",1,[24,29,30],{},"flowchart TB\n",[24,32,34],{"class":26,"line":33},2,[24,35,36],{},"  subgraph ui[\"主线程 \u002F 其它线程\"]\n",[24,38,40],{"class":26,"line":39},3,[24,41,42],{},"    App[应用 \u002F Widget 等]\n",[24,44,46],{"class":26,"line":45},4,[24,47,48],{},"  end\n",[24,50,52],{"class":26,"line":51},5,[24,53,54],{},"  subgraph rt[\"RenderThread 专用线程\"]\n",[24,56,58],{"class":26,"line":57},6,[24,59,60],{},"    Q[任务队列 Post \u002F InvokeSync]\n",[24,62,64],{"class":26,"line":63},7,[24,65,66],{},"    RC[RenderContext: EGL + ANGLE + GrDirectContext]\n",[24,68,70],{"class":26,"line":69},8,[24,71,72],{},"    RS[RenderSurface: EGLSurface + SkSurface]\n",[24,74,76],{"class":26,"line":75},9,[24,77,78],{},"    Draw[SkCanvas 上画 Shapes \u002F Rectangle]\n",[24,80,82],{"class":26,"line":81},10,[24,83,48],{},[24,85,87],{"class":26,"line":86},11,[24,88,89],{},"  App -->|\"Post(任务) 或 CreateContext\u002FCreateSurface\"| Q\n",[24,91,93],{"class":26,"line":92},12,[24,94,95],{},"  Q --> RC\n",[24,97,99],{"class":26,"line":98},13,[24,100,101],{},"  RC --> RS\n",[24,103,105],{"class":26,"line":104},14,[24,106,107],{},"  RS --> Draw\n",[10,109,110,111,114,115,118,119,122,123,126],{},"渲染线程是一个单线程+队列的形式，所有 EGL \u002F 当前上下文 \u002F 创建 ",[21,112,113],{},"RenderContext","·",[21,116,117],{},"RenderSurface"," 都应在这条线程上完成（或通过 ",[21,120,121],{},"Post"," \u002F ",[21,124,125],{},"InvokeSync"," 投递过去）。",[10,128,129,130,133],{},"并且，我们需要一个和GPU绘画的资源，那就是EGL，经 ANGLE，Windows 上走 D3D11）+ Skia 的 ",[21,131,132],{},"GrDirectContext","。",[10,135,136],{},"GLFW的窗口句柄绑定到EGL的surface后，使用sksurface-》 skcanvas，负责一帧的绘制。",[138,139,140],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":19,"searchDepth":33,"depth":33,"links":142},[],"md",{},true,"\u002Fcpp\u002F自绘组件库思考",{"description":12},"cpp\u002F自绘组件库思考","RYEhNLrYlidmPkQ2mN1p8fhau6-Mbr775bLhP9uRAWU",1791042464559]