{"id":123461,"date":"2026-11-07T10:41:12","date_gmt":"2026-11-07T02:41:12","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/123461.html"},"modified":"2026-11-07T10:41:12","modified_gmt":"2026-11-07T02:41:12","slug":"%e3%80%90jetpack-compose%e5%a8%93%e5%a8%93%e9%81%93%e6%9d%a5%e3%80%91%e7%ac%ac34%e8%af%be%ef%bc%9a%e8%87%aa%e5%ae%9a%e4%b9%89%e7%bb%98%e5%88%b6%e4%b8%8e%e5%9b%be%e5%bd%a2%e8%bf%9b%e9%98%b6","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/123461.html","title":{"rendered":"\u3010Jetpack Compose\u5a13\u5a13\u9053\u6765\u3011\u7b2c34\u8bfe\uff1a\u81ea\u5b9a\u4e49\u7ed8\u5236\u4e0e\u56fe\u5f62\u8fdb\u9636\u2014\u2014\u4ece\u201c\u62fc\u7ec4\u4ef6\u201d\u5230\u201c\u63a7\u50cf\u7d20\u201d"},"content":{"rendered":"<p>\u6458\u8981<\/p>\n<p>\u5f53\u73b0\u6210\u7ec4\u4ef6\u62fc\u4e0d\u51fa\u8bbe\u8ba1\u56fe\u4e0a\u7684\u5706\u73af\u8fdb\u5ea6\u6761\u3001\u6e10\u53d8\u6298\u7ebf\u56fe\u548c\u4e0d\u89c4\u5219\u6807\u7b7e\u65f6&#xff0c;\u5c31\u8be5\u8f6e\u5230 Compose \u7684\u81ea\u5b9a\u4e49\u7ed8\u5236\u767b\u573a\u4e86\u3002\u672c\u6587\u4ece DrawScope \u7684\u56db\u4e2a\u7ed8\u5236\u5165\u53e3\u8bb2\u8d77&#xff0c;\u6df1\u5165 Path \u7684\u8d1d\u585e\u5c14\u66f2\u7ebf\u3001\u5f27\u7ebf\u4e0e\u5e03\u5c14\u8fd0\u7b97&#xff0c;Brush \u7684\u591a\u8272\u6e10\u53d8\u3001BlendMode \u6df7\u5408\u4e0e\u81ea\u5b9a\u4e49 Shader&#xff0c;\u518d\u5230\u81ea\u5b9a\u4e49 Shape \u4e0e\u52a8\u753b\u9a71\u52a8\u7ed8\u5236&#xff0c;\u6700\u540e\u7528\u4e00\u4e2a&#034;\u4f1a\u547c\u5438&#034;\u7684\u6570\u636e\u770b\u677f\u628a\u77e5\u8bc6\u4e32\u6210\u5b9e\u6218&#xff0c;\u5e76\u9644\u4e0a\u5e38\u89c1\u9677\u9631\u901f\u67e5\u4e0e&#034;\u5f62\u72b6\u2014\u989c\u8272\u2014\u52a8\u753b&#034;\u4e09\u5c42\u534f\u8c03\u601d\u7ef4\u6a21\u578b\u3002\u6838\u5fc3\u539f\u5219\u53ea\u6709\u4e00\u53e5&#xff1a;\u8ba1\u7b97\u63d0\u524d&#xff0c;\u7ed8\u5236\u8f7b\u91cf\u3002<\/p>\n<h3>\u76ee\u5f55<\/h3>\n<ul>\n<li>\u6458\u8981<\/li>\n<li>\u524d\u8a00<\/li>\n<li>\u4e00\u3001\u5148\u770b\u4e00\u4e2a\u201c\u7ec4\u4ef6\u62fc\u4e0d\u51fa\u6765\u201d\u7684\u73b0\u573a<\/li>\n<li>\u4e8c\u3001\u590d\u4e60\u4e0e\u8fdb\u9636&#xff1a;DrawScope \u7684\u56db\u4e2a\u5c42\u6b21\n<ul>\n<li>2.1 \u56db\u4e2a\u7ed8\u5236\u5165\u53e3&#xff0c;\u9009\u5bf9\u7701\u4e00\u534a\u6027\u80fd<\/li>\n<li>2.2 \u5750\u6807\u7cfb\u4e0e\u5355\u4f4d<\/li>\n<\/ul>\n<\/li>\n<li>\u4e09\u3001Path \u8fdb\u9636&#xff1a;\u8d1d\u585e\u5c14\u66f2\u7ebf\u3001\u5f27\u7ebf\u4e0e\u5e03\u5c14\u8fd0\u7b97\n<ul>\n<li>3.1 \u8d1d\u585e\u5c14\u66f2\u7ebf&#xff1a;\u753b\u51fa\u201c\u81ea\u7136\u201d\u7684\u66f2\u7ebf<\/li>\n<li>3.2 \u5f27\u7ebf&#xff1a;drawArc \u4e0e Path.arcTo<\/li>\n<li>3.3 \u5e03\u5c14\u8fd0\u7b97&#xff1a;Path.op<\/li>\n<\/ul>\n<\/li>\n<li>\u56db\u3001Brush \u8fdb\u9636&#xff1a;\u6e10\u53d8\u3001Shader \u4e0e\u6df7\u5408\u6a21\u5f0f\n<ul>\n<li>4.1 \u4e09\u79cd\u57fa\u7840\u6e10\u53d8<\/li>\n<li>4.2 \u626b\u63cf\u6e10\u53d8\u505a\u201c\u73af\u5f62\u8fdb\u5ea6\u6761\u201d<\/li>\n<li>4.3 BlendMode&#xff1a;\u8ba9\u56fe\u5c42\u201c\u53cd\u5e94\u201d<\/li>\n<li>4.4 \u81ea\u5b9a\u4e49 Shader<\/li>\n<\/ul>\n<\/li>\n<li>\u4e94\u3001\u81ea\u5b9a\u4e49 Shape&#xff1a;\u8ba9 Modifier.clip \u548c\u80cc\u666f\u201c\u957f\u6210\u4efb\u610f\u5f62\u72b6\u201d\n<ul>\n<li>5.1 \u4ec0\u4e48\u662f Shape<\/li>\n<li>5.2 Shape &#043; \u52a8\u753b<\/li>\n<\/ul>\n<\/li>\n<li>\u516d\u3001\u52a8\u753b\u9a71\u52a8\u7ed8\u5236&#xff1a;\u8ba9\u753b\u9762\u201c\u6d3b\u201d\u8d77\u6765\n<ul>\n<li>6.1 rememberInfiniteTransition<\/li>\n<li>6.2 \u7528 animateFloatAsState \u505a\u8fdb\u5ea6\u52a8\u753b<\/li>\n<li>6.3 \u6027\u80fd\u8981\u70b9<\/li>\n<\/ul>\n<\/li>\n<li>\u4e03\u3001\u7efc\u5408\u5b9e\u6218&#xff1a;\u4e00\u4e2a\u201c\u4f1a\u547c\u5438\u201d\u7684\u6570\u636e\u770b\u677f\n<ul>\n<li>7.1 \u5706\u73af\u8fdb\u5ea6\u6761<\/li>\n<li>7.2 \u6298\u7ebf\u56fe<\/li>\n<li>7.3 \u81ea\u5b9a\u4e49\u6807\u7b7e Shape<\/li>\n<\/ul>\n<\/li>\n<li>\u516b\u3001\u5e38\u89c1\u9677\u9631\u901f\u67e5<\/li>\n<li>\u4e5d\u3001\u601d\u7ef4\u6a21\u578b&#xff1a;\u7ed8\u5236\u7684\u201c\u4e09\u5c42\u534f\u8c03\u201d<\/li>\n<li>\u5341\u3001\u5c0f\u7ed3\u4e0e\u4e0b\u4e00\u8bfe\u9884\u544a<\/li>\n<\/ul>\n<h3>\u524d\u8a00<\/h3>\n<p>\u5199 Compose \u7684 UI&#xff0c;\u5927\u90e8\u5206\u65f6\u5019\u6211\u4eec\u90fd\u5728\u201c\u62fc\u7ec4\u4ef6\u201d&#xff1a;\u4e00\u4e2a Column \u5957\u51e0\u4e2a Row&#xff0c;Text \u914d Button&#xff0c;LazyColumn \u88c5\u5217\u8868\u3002\u8fd9\u5957\u6253\u6cd5\u80fd\u8986\u76d6\u65e5\u5e38\u4e5d\u6210\u7684\u9700\u6c42&#xff0c;\u4e5f\u8db3\u591f\u5feb\u3002<\/p>\n<p>\u4f46\u603b\u6709\u4e00\u4e9b\u65f6\u523b&#xff0c;\u4f60\u4f1a\u5361\u4f4f\u3002<\/p>\n<p>\u6bd4\u5982\u8bbe\u8ba1\u7a3f\u4e0a\u90a3\u4e2a\u5706\u73af\u8fdb\u5ea6\u6761&#xff0c;\u4e24\u7aef\u662f\u5706\u89d2\u7684&#xff0c;\u989c\u8272\u4ece\u84dd\u6e10\u53d8\u5230\u7d2b&#xff0c;\u4e2d\u95f4\u8fd8\u8981\u5d4c\u4e00\u4e2a\u767e\u5206\u6bd4\u6570\u5b57\u3002\u4f60\u628a CircularProgressIndicator \u7ffb\u4e86\u4e2a\u904d&#xff0c;\u53d1\u73b0\u5b83\u4e0d\u652f\u6301\u6e10\u53d8&#xff0c;\u4e5f\u4e0d\u652f\u6301\u5706\u89d2\u7aef\u70b9\u3002\u518d\u6bd4\u5982\u90a3\u5f20\u6298\u7ebf\u56fe&#xff0c;\u7ebf\u4e0b\u8981\u6709\u534a\u900f\u660e\u7684\u9762\u79ef\u586b\u5145&#xff0c;\u62d0\u70b9\u8981\u6709\u5c0f\u767d\u70b9&#xff0c;\u7ebf\u6761\u8fd8\u5f97\u662f\u5e73\u6ed1\u7684\u66f2\u7ebf\u800c\u4e0d\u662f\u751f\u786c\u7684\u6298\u7ebf\u3002\u53c8\u6bd4\u5982\u4e00\u6392\u6807\u7b7e&#xff0c;\u6bcf\u4e2a\u90fd\u662f\u5207\u4e86\u89d2\u7684\u591a\u8fb9\u5f62&#xff0c;RoundedCornerShape \u600e\u4e48\u8c03\u90fd\u5bf9\u4e0d\u4e0a\u3002<\/p>\n<p>\u8fd9\u65f6\u5019\u4f60\u4f1a\u53d1\u73b0&#xff1a;\u7ec4\u4ef6\u662f\u6709\u9650\u7684&#xff0c;\u800c\u8bbe\u8ba1\u7a3f\u662f\u65e0\u9650\u7684\u3002<\/p>\n<p>Compose \u7ed9\u4e86\u6211\u4eec\u4e24\u5957\u5de5\u5177\u3002\u4e00\u5957\u662f\u201c\u4e50\u9ad8\u79ef\u6728\u201d\u2014\u2014\u73b0\u6210\u7ec4\u4ef6&#xff0c;\u62fc\u88c5\u5feb\u3001\u4e0a\u624b\u6613&#xff0c;\u4f46\u5f62\u72b6\u88ab\u9650\u5b9a\u5728\u79ef\u6728\u7684\u6a21\u5177\u91cc\u3002\u53e6\u4e00\u5957\u662f\u201c3D \u6253\u5370\u673a\u201d\u2014\u2014Canvas \u548c DrawScope&#xff0c;\u4f60\u60f3\u753b\u4ec0\u4e48\u5c31\u753b\u4ec0\u4e48&#xff0c;\u4ee3\u4ef7\u662f\u4f60\u5f97\u81ea\u5df1\u7b97\u5750\u6807\u3001\u81ea\u5df1\u63a7\u50cf\u7d20\u3001\u81ea\u5df1\u7ba1\u6027\u80fd\u3002<\/p>\n<p>\u8fd9\u4e00\u8bfe&#xff0c;\u8bb2\u7684\u5c31\u662f\u7b2c\u4e8c\u5957\u5de5\u5177\u3002<\/p>\n<p>\u6211\u4eec\u4e0d\u4f1a\u4e00\u4e0a\u6765\u5c31\u4e22\u4e00\u5806 API\u3002\u800c\u662f\u4ece\u201c\u7ec4\u4ef6\u62fc\u4e0d\u51fa\u6765\u201d\u7684\u771f\u5b9e\u573a\u666f\u51fa\u53d1&#xff0c;\u5148\u590d\u4e60 DrawScope \u7684\u56db\u4e2a\u7ed8\u5236\u5165\u53e3&#xff0c;\u628a\u5730\u57fa\u6253\u7262&#xff1b;\u518d\u4e00\u5c42\u5c42\u5f80\u4e0a\u8d70&#xff1a;\u7528 Path \u753b\u51fa\u81ea\u7136\u7684\u66f2\u7ebf\u548c\u590d\u6742\u7684\u5f62\u72b6&#xff0c;\u7528 Brush \u4e0a\u8272\u3001\u7528 BlendMode \u8ba9\u56fe\u5c42\u4ea7\u751f\u53cd\u5e94&#xff0c;\u7528\u81ea\u5b9a\u4e49 Shape \u8ba9\u7ec4\u4ef6\u201c\u957f\u6210\u4efb\u610f\u5f62\u72b6\u201d&#xff0c;\u6700\u540e\u7528\u52a8\u753b\u8ba9\u753b\u9762\u771f\u6b63\u6d3b\u8d77\u6765\u3002\u6bcf\u4e00\u5757\u77e5\u8bc6\u90fd\u914d\u4e86\u53ef\u4ee5\u76f4\u63a5\u8dd1\u7684\u4ee3\u7801&#xff0c;\u4e5f\u914d\u4e86\u201c\u4e3a\u4ec0\u4e48\u8fd9\u4e48\u5199\u201d\u7684\u76f4\u89c9\u89e3\u91ca\u3002<\/p>\n<p>\u5b66\u5b8c\u4e4b\u540e&#xff0c;\u4f60\u4f1a\u62e5\u6709\u4e00\u79cd\u65b0\u7684\u80fd\u529b&#xff1a;\u770b\u5230\u4e00\u5f20\u8bbe\u8ba1\u56fe&#xff0c;\u4e0d\u518d\u5148\u60f3\u201c\u54ea\u4e2a\u7ec4\u4ef6\u80fd\u51d1\u51fa\u6765\u201d&#xff0c;\u800c\u662f\u60f3\u201c\u6211\u8be5\u600e\u4e48\u628a\u5b83\u753b\u51fa\u6765\u201d\u3002<\/p>\n<p>\u5982\u679c\u4f60\u5df2\u7ecf\u4f1a\u7528 Canvas \u753b\u4e2a\u5706\u3001\u753b\u6761\u7ebf&#xff0c;\u90a3\u8fd9\u4e00\u8bfe\u6b63\u597d\u5e2e\u4f60\u8de8\u8fc7\u201c\u80fd\u753b\u201d\u5230\u201c\u80fd\u753b\u597d\u201d\u7684\u90a3\u9053\u574e\u3002\u5982\u679c\u4f60\u8fd8\u6ca1\u600e\u4e48\u78b0\u8fc7\u81ea\u5b9a\u4e49\u7ed8\u5236&#xff0c;\u4e5f\u522b\u62c5\u5fc3\u2014\u2014\u6211\u4eec\u4f1a\u4ece\u6700\u57fa\u7840\u7684\u5750\u6807\u7cfb\u8bb2\u8d77&#xff0c;\u4e00\u6b65\u4e00\u6b65\u6765\u3002<\/p>\n<p>\u51c6\u5907\u597d\u4e86\u5417&#xff1f;\u6211\u4eec\u5148\u4ece\u4e00\u4e2a\u201c\u7ec4\u4ef6\u62fc\u4e0d\u51fa\u6765\u201d\u7684\u73b0\u573a\u5f00\u59cb\u3002<\/p>\n<h3>\u4e00\u3001\u5148\u770b\u4e00\u4e2a\u201c\u7ec4\u4ef6\u62fc\u4e0d\u51fa\u6765\u201d\u7684\u73b0\u573a<\/h3>\n<p>\u7b2c38\u8bfe\u6211\u4eec\u628a\u52a8\u753b\u548c\u624b\u52bf\u7684\u534f\u8c03\u8bb2\u900f\u4e86\u3002\u5171\u4eab\u5143\u7d20\u98de\u8fc7\u53bb\u3001\u5d4c\u5957\u6eda\u52a8\u5546\u91cf\u7740\u6eda\u3001\u624b\u52bf\u51b2\u7a81\u6309\u65b9\u5411\u88c1\u51b3\u2014\u2014\u4ea4\u4e92\u5c42\u9762\u7684\u95ee\u9898\u57fa\u672c\u90fd\u6709\u89e3\u4e86\u3002<\/p>\n<p>\u4f46\u6709\u4e00\u7c7b\u9700\u6c42&#xff0c;\u7528\u73b0\u6210\u7ec4\u4ef6\u600e\u4e48\u62fc\u90fd\u62fc\u4e0d\u51fa\u6765\u3002<\/p>\n<p>\u4ea7\u54c1\u7ecf\u7406\u62ff\u7740\u4e00\u5f20\u8bbe\u8ba1\u56fe\u8fc7\u6765&#xff1a;\u201c\u8fd9\u4e2a\u6570\u636e\u770b\u677f&#xff0c;\u8981\u4e00\u4e2a\u5706\u73af\u8fdb\u5ea6\u6761&#xff0c;\u4e2d\u95f4\u663e\u793a\u767e\u5206\u6bd4&#xff0c;\u5706\u73af\u4e24\u7aef\u662f\u5706\u89d2\u7684&#xff0c;\u8fdb\u5ea6\u989c\u8272\u4ece\u84dd\u5230\u7d2b\u6e10\u53d8\u3002\u65c1\u8fb9\u518d\u6765\u4e00\u4e2a\u6298\u7ebf\u56fe&#xff0c;\u7ebf\u4e0b\u9762\u79ef\u6709\u534a\u900f\u660e\u586b\u5145&#xff0c;\u62d0\u70b9\u6709\u5c0f\u767d\u70b9\u3002\u4e0b\u9762\u8fd8\u6709\u4e2a\u6807\u7b7e\u4e91&#xff0c;\u6bcf\u4e2a\u6807\u7b7e\u662f\u4e0d\u89c4\u5219\u7684\u591a\u8fb9\u5f62\u3002\u201d<\/p>\n<p>\u4f60\u770b\u4e86\u770b CircularProgressIndicator\u2014\u2014\u5b83\u4e0d\u652f\u6301\u6e10\u53d8&#xff0c;\u4e0d\u652f\u6301\u5706\u89d2\u7aef\u70b9&#xff0c;\u4e0d\u652f\u6301\u4e2d\u95f4\u5d4c\u6587\u5b57\u3002\u4f60\u770b\u4e86\u770b Canvas\u2014\u2014\u597d\u50cf\u80fd\u753b&#xff0c;\u4f46 drawArc \u7684\u6e10\u53d8\u600e\u4e48\u641e&#xff1f;drawPath \u7684\u8d1d\u585e\u5c14\u66f2\u7ebf\u63a7\u5236\u70b9\u600e\u4e48\u7b97&#xff1f;\u6df7\u5408\u6a21\u5f0f\u53c8\u662f\u4ec0\u4e48&#xff1f;<\/p>\n<p>\u8fd9\u5c31\u662f\u81ea\u5b9a\u4e49\u7ed8\u5236\u7684\u6218\u573a\u3002 \u73b0\u6210\u7ec4\u4ef6\u662f\u201c\u4e50\u9ad8\u79ef\u6728\u201d&#xff0c;\u62fc\u4e0d\u51fa\u6240\u6709\u5f62\u72b6&#xff1b;Canvas \u662f\u201c3D\u6253\u5370\u673a\u201d&#xff0c;\u4f60\u60f3\u753b\u4ec0\u4e48\u5c31\u753b\u4ec0\u4e48&#xff0c;\u4ee3\u4ef7\u662f\u4f60\u5f97\u81ea\u5df1\u7b97\u5750\u6807\u3001\u81ea\u5df1\u63a7\u50cf\u7d20\u3002<\/p>\n<p>\u8fd9\u4e00\u8bfe&#xff0c;\u6211\u4eec\u5c31\u628a Compose \u7684\u81ea\u5b9a\u4e49\u7ed8\u5236\u4ece\u201c\u80fd\u753b\u4e2a\u5706\u201d\u63d0\u5347\u5230\u201c\u80fd\u753b\u590d\u6742\u56fe\u8868\u548c\u89c6\u89c9\u6548\u679c\u201d\u3002<\/p>\n<p>\u4e0b\u9762\u662f\u672c\u8bfe\u7684\u6574\u4f53\u77e5\u8bc6\u5730\u56fe&#xff0c;\u5148\u5efa\u7acb\u5168\u5c40\u89c6\u89d2&#xff1a;<\/p>\n<p>  #mermaid-svg-CxIbAZUgZrcz0TcA{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-CxIbAZUgZrcz0TcA .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-CxIbAZUgZrcz0TcA .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-CxIbAZUgZrcz0TcA .error-icon{fill:#552222;}#mermaid-svg-CxIbAZUgZrcz0TcA .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-CxIbAZUgZrcz0TcA .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-CxIbAZUgZrcz0TcA .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-CxIbAZUgZrcz0TcA .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-CxIbAZUgZrcz0TcA .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-CxIbAZUgZrcz0TcA .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-CxIbAZUgZrcz0TcA .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-CxIbAZUgZrcz0TcA .marker{fill:#333333;stroke:#333333;}#mermaid-svg-CxIbAZUgZrcz0TcA .marker.cross{stroke:#333333;}#mermaid-svg-CxIbAZUgZrcz0TcA svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-CxIbAZUgZrcz0TcA p{margin:0;}#mermaid-svg-CxIbAZUgZrcz0TcA .label{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;color:#333;}#mermaid-svg-CxIbAZUgZrcz0TcA .cluster-label text{fill:#333;}#mermaid-svg-CxIbAZUgZrcz0TcA .cluster-label span{color:#333;}#mermaid-svg-CxIbAZUgZrcz0TcA .cluster-label span p{background-color:transparent;}#mermaid-svg-CxIbAZUgZrcz0TcA .label text,#mermaid-svg-CxIbAZUgZrcz0TcA span{fill:#333;color:#333;}#mermaid-svg-CxIbAZUgZrcz0TcA .node rect,#mermaid-svg-CxIbAZUgZrcz0TcA .node circle,#mermaid-svg-CxIbAZUgZrcz0TcA .node ellipse,#mermaid-svg-CxIbAZUgZrcz0TcA .node polygon,#mermaid-svg-CxIbAZUgZrcz0TcA .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-CxIbAZUgZrcz0TcA .rough-node .label text,#mermaid-svg-CxIbAZUgZrcz0TcA .node .label text,#mermaid-svg-CxIbAZUgZrcz0TcA .image-shape .label,#mermaid-svg-CxIbAZUgZrcz0TcA .icon-shape .label{text-anchor:middle;}#mermaid-svg-CxIbAZUgZrcz0TcA .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-CxIbAZUgZrcz0TcA .rough-node .label,#mermaid-svg-CxIbAZUgZrcz0TcA .node .label,#mermaid-svg-CxIbAZUgZrcz0TcA .image-shape .label,#mermaid-svg-CxIbAZUgZrcz0TcA .icon-shape .label{text-align:center;}#mermaid-svg-CxIbAZUgZrcz0TcA .node.clickable{cursor:pointer;}#mermaid-svg-CxIbAZUgZrcz0TcA .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-CxIbAZUgZrcz0TcA .arrowheadPath{fill:#333333;}#mermaid-svg-CxIbAZUgZrcz0TcA .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-CxIbAZUgZrcz0TcA .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-CxIbAZUgZrcz0TcA .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-CxIbAZUgZrcz0TcA .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-CxIbAZUgZrcz0TcA .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-CxIbAZUgZrcz0TcA .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-CxIbAZUgZrcz0TcA .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-CxIbAZUgZrcz0TcA .cluster text{fill:#333;}#mermaid-svg-CxIbAZUgZrcz0TcA .cluster span{color:#333;}#mermaid-svg-CxIbAZUgZrcz0TcA div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-CxIbAZUgZrcz0TcA .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-CxIbAZUgZrcz0TcA rect.text{fill:none;stroke-width:0;}#mermaid-svg-CxIbAZUgZrcz0TcA .icon-shape,#mermaid-svg-CxIbAZUgZrcz0TcA .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-CxIbAZUgZrcz0TcA .icon-shape p,#mermaid-svg-CxIbAZUgZrcz0TcA .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-CxIbAZUgZrcz0TcA .icon-shape .label rect,#mermaid-svg-CxIbAZUgZrcz0TcA .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-CxIbAZUgZrcz0TcA .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-CxIbAZUgZrcz0TcA .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-CxIbAZUgZrcz0TcA :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}<\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u73b0\u6210\u7ec4\u4ef6\u62fc\u4e0d\u51fa\u6765<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u81ea\u5b9a\u4e49\u7ed8\u5236<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Path \u8fdb\u9636&#xff1a;\u5f62\u72b6<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Brush \u8fdb\u9636&#xff1a;\u989c\u8272<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u81ea\u5b9a\u4e49 Shape&#xff1a;\u53ef\u89c1\u533a\u57df<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u52a8\u753b\u9a71\u52a8\u7ed8\u5236<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u8d1d\u585e\u5c14\u66f2\u7ebf<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u5f27\u7ebf drawArc \/ arcTo<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u5e03\u5c14\u8fd0\u7b97 Path.op<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u4e09\u79cd\u6e10\u53d8<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>BlendMode \u6df7\u5408<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u81ea\u5b9a\u4e49 Shader<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>createOutline \u8fd4\u56de Outline.Generic<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>rememberInfiniteTransition<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>animateFloatAsState<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u7efc\u5408\u5b9e\u6218&#xff1a;\u6570\u636e\u770b\u677f<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u5e38\u89c1\u9677\u9631\u901f\u67e5<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u601d\u7ef4\u6a21\u578b&#xff1a;\u4e09\u5c42\u534f\u8c03<\/p>\n<p><\/span><\/p>\n<h3>\u4e8c\u3001\u590d\u4e60\u4e0e\u8fdb\u9636&#xff1a;DrawScope \u7684\u56db\u4e2a\u5c42\u6b21<\/h3>\n<p>\u7b2c8\u8bfe\u6211\u4eec\u8bb2\u8fc7 Canvas \u548c DrawScope \u7684\u57fa\u7840\u3002\u8fd9\u91cc\u5148\u5feb\u901f\u590d\u4e60&#xff0c;\u7136\u540e\u76f4\u63a5\u8fdb\u5165\u8fdb\u9636\u3002<\/p>\n<h4>2.1 \u56db\u4e2a\u7ed8\u5236\u5165\u53e3&#xff0c;\u9009\u5bf9\u7701\u4e00\u534a\u6027\u80fd<\/h4>\n<table>\n<tr>\u5165\u53e3\u9002\u7528\u573a\u666f\u6027\u80fd<\/tr>\n<tbody>\n<tr>\n<td>Canvas(modifier) { }<\/td>\n<td>\u7eaf\u7ed8\u5236&#xff0c;\u4e0d\u9700\u8981\u5b50\u5185\u5bb9<\/td>\n<td>\u597d<\/td>\n<\/tr>\n<tr>\n<td>Modifier.drawBehind { }<\/td>\n<td>\u5728\u5185\u5bb9\u540e\u9762\u753b\u80cc\u666f<\/td>\n<td>\u597d<\/td>\n<\/tr>\n<tr>\n<td>Modifier.drawWithContent { }<\/td>\n<td>\u5728\u5185\u5bb9\u524d\u540e\u90fd\u80fd\u753b<\/td>\n<td>\u597d<\/td>\n<\/tr>\n<tr>\n<td>Modifier.drawWithCache { }<\/td>\n<td>\u7ed8\u5236\u4f9d\u8d56\u5c3a\u5bf8\u4f46\u4e0d\u4f9d\u8d56\u72b6\u6001&#xff0c;\u9700\u8981\u7f13\u5b58<\/td>\n<td>\u6700\u597d<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u8fdb\u9636\u8981\u70b9&#xff1a;drawWithCache \u7684 onDrawBehind \u91cc\u53ef\u4ee5\u590d\u7528 Path\u3001Brush\u3001Shader \u7b49\u5bf9\u8c61&#xff0c;\u907f\u514d\u6bcf\u5e27\u91cd\u65b0\u521b\u5efa\u3002\u5bf9\u4e8e\u590d\u6742\u56fe\u5f62&#xff0c;\u8fd9\u662f\u6027\u80fd\u5206\u6c34\u5cad\u3002<\/p>\n<p>Modifier<span class=\"token punctuation\">.<\/span><span class=\"token function\">drawWithCache<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token comment\">\/\/ \u53ea\u5728\u5c3a\u5bf8\u53d8\u5316\u65f6\u6267\u884c\u4e00\u6b21<\/span><br \/>\n    <span class=\"token keyword\">val<\/span> path <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">buildComplexPath<\/span><span class=\"token punctuation\">(<\/span>size<span class=\"token punctuation\">)<\/span><br \/>\n    <span class=\"token keyword\">val<\/span> brush <span class=\"token operator\">&#061;<\/span> Brush<span class=\"token punctuation\">.<\/span><span class=\"token function\">linearGradient<\/span><span class=\"token punctuation\">(<\/span>colors<span class=\"token punctuation\">,<\/span> start <span class=\"token operator\">&#061;<\/span> Offset<span class=\"token punctuation\">.<\/span>Zero<span class=\"token punctuation\">,<\/span> end <span class=\"token operator\">&#061;<\/span> size<span class=\"token punctuation\">.<\/span><span class=\"token function\">toOffset<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>    onDrawBehind <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u6bcf\u5e27\u6267\u884c&#xff0c;\u4f46\u76f4\u63a5\u590d\u7528 path \u548c brush<\/span><br \/>\n        <span class=\"token function\">drawPath<\/span><span class=\"token punctuation\">(<\/span>path<span class=\"token punctuation\">,<\/span> brush<span class=\"token punctuation\">)<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>\u56db\u4e2a\u7ed8\u5236\u5165\u53e3\u7684\u9009\u578b\u6d41\u7a0b\u5982\u4e0b&#xff1a;<\/p>\n<p>  #mermaid-svg-Bp24HnFI6t9k401g{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-Bp24HnFI6t9k401g .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-Bp24HnFI6t9k401g .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-Bp24HnFI6t9k401g .error-icon{fill:#552222;}#mermaid-svg-Bp24HnFI6t9k401g .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Bp24HnFI6t9k401g .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-Bp24HnFI6t9k401g .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Bp24HnFI6t9k401g .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Bp24HnFI6t9k401g .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-Bp24HnFI6t9k401g .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Bp24HnFI6t9k401g .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Bp24HnFI6t9k401g .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Bp24HnFI6t9k401g .marker.cross{stroke:#333333;}#mermaid-svg-Bp24HnFI6t9k401g svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Bp24HnFI6t9k401g p{margin:0;}#mermaid-svg-Bp24HnFI6t9k401g .label{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;color:#333;}#mermaid-svg-Bp24HnFI6t9k401g .cluster-label text{fill:#333;}#mermaid-svg-Bp24HnFI6t9k401g .cluster-label span{color:#333;}#mermaid-svg-Bp24HnFI6t9k401g .cluster-label span p{background-color:transparent;}#mermaid-svg-Bp24HnFI6t9k401g .label text,#mermaid-svg-Bp24HnFI6t9k401g span{fill:#333;color:#333;}#mermaid-svg-Bp24HnFI6t9k401g .node rect,#mermaid-svg-Bp24HnFI6t9k401g .node circle,#mermaid-svg-Bp24HnFI6t9k401g .node ellipse,#mermaid-svg-Bp24HnFI6t9k401g .node polygon,#mermaid-svg-Bp24HnFI6t9k401g .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Bp24HnFI6t9k401g .rough-node .label text,#mermaid-svg-Bp24HnFI6t9k401g .node .label text,#mermaid-svg-Bp24HnFI6t9k401g .image-shape .label,#mermaid-svg-Bp24HnFI6t9k401g .icon-shape .label{text-anchor:middle;}#mermaid-svg-Bp24HnFI6t9k401g .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-Bp24HnFI6t9k401g .rough-node .label,#mermaid-svg-Bp24HnFI6t9k401g .node .label,#mermaid-svg-Bp24HnFI6t9k401g .image-shape .label,#mermaid-svg-Bp24HnFI6t9k401g .icon-shape .label{text-align:center;}#mermaid-svg-Bp24HnFI6t9k401g .node.clickable{cursor:pointer;}#mermaid-svg-Bp24HnFI6t9k401g .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-Bp24HnFI6t9k401g .arrowheadPath{fill:#333333;}#mermaid-svg-Bp24HnFI6t9k401g .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Bp24HnFI6t9k401g .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Bp24HnFI6t9k401g .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Bp24HnFI6t9k401g .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-Bp24HnFI6t9k401g .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Bp24HnFI6t9k401g .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-Bp24HnFI6t9k401g .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Bp24HnFI6t9k401g .cluster text{fill:#333;}#mermaid-svg-Bp24HnFI6t9k401g .cluster span{color:#333;}#mermaid-svg-Bp24HnFI6t9k401g div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Bp24HnFI6t9k401g .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-Bp24HnFI6t9k401g rect.text{fill:none;stroke-width:0;}#mermaid-svg-Bp24HnFI6t9k401g .icon-shape,#mermaid-svg-Bp24HnFI6t9k401g .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Bp24HnFI6t9k401g .icon-shape p,#mermaid-svg-Bp24HnFI6t9k401g .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-Bp24HnFI6t9k401g .icon-shape .label rect,#mermaid-svg-Bp24HnFI6t9k401g .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Bp24HnFI6t9k401g .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-Bp24HnFI6t9k401g .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-Bp24HnFI6t9k401g :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}<\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u5426<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u662f<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u662f<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u5426<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u662f<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u5426<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u9700\u8981\u7ed8\u5236\u5185\u5bb9<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u9700\u8981\u5b50\u5185\u5bb9\u5417&#xff1f;<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Canvas(modifier) { }<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u7ed8\u5236\u4f9d\u8d56\u5c3a\u5bf8\u4f46\u4e0d\u4f9d\u8d56\u72b6\u6001&#xff1f;<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Modifier.drawWithCache { }<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u5728\u5185\u5bb9\u524d\u540e\u90fd\u8981\u753b&#xff1f;<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Modifier.drawWithContent { }<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Modifier.drawBehind { }<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>onDrawBehind \u91cc\u590d\u7528 Path \/ Brush \/ Shader<\/p>\n<p><\/span><\/p>\n<h4>2.2 \u5750\u6807\u7cfb\u4e0e\u5355\u4f4d<\/h4>\n<p>DrawScope \u7684\u5750\u6807\u7cfb&#xff1a;\u539f\u70b9\u5728\u5de6\u4e0a\u89d2&#xff0c;x \u5411\u53f3\u4e3a\u6b63&#xff0c;y \u5411\u4e0b\u4e3a\u6b63&#xff0c;\u5355\u4f4d\u662f\u50cf\u7d20\u3002<\/p>\n<p>DrawScope \u5b9e\u73b0\u4e86 Density \u63a5\u53e3&#xff0c;\u53ef\u4ee5\u76f4\u63a5 16.dp.toPx()\u3002size \u662f\u753b\u5e03\u5c3a\u5bf8&#xff0c;center \u662f\u753b\u5e03\u4e2d\u5fc3\u3002<\/p>\n<h3>\u4e09\u3001Path \u8fdb\u9636&#xff1a;\u8d1d\u585e\u5c14\u66f2\u7ebf\u3001\u5f27\u7ebf\u4e0e\u5e03\u5c14\u8fd0\u7b97<\/h3>\n<p>Path \u662f\u81ea\u5b9a\u4e49\u7ed8\u5236\u7684\u6838\u5fc3\u3002\u7b80\u5355\u7684 moveTo\/lineTo \u7b2c8\u8bfe\u8bb2\u8fc7&#xff0c;\u8fd9\u91cc\u8bb2\u4e09\u4e2a\u8fdb\u9636\u80fd\u529b\u3002<\/p>\n<h4>3.1 \u8d1d\u585e\u5c14\u66f2\u7ebf&#xff1a;\u753b\u51fa\u201c\u81ea\u7136\u201d\u7684\u66f2\u7ebf<\/h4>\n<p>quadraticBezierTo \u662f\u4e8c\u6b21\u8d1d\u585e\u5c14&#xff0c;\u4e00\u4e2a\u63a7\u5236\u70b9&#xff1b;cubicTo \u662f\u4e09\u6b21\u8d1d\u585e\u5c14&#xff0c;\u4e24\u4e2a\u63a7\u5236\u70b9\u3002<\/p>\n<p><span class=\"token keyword\">val<\/span> path <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Path<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">apply<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">moveTo<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0f<\/span><span class=\"token punctuation\">,<\/span> size<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">*<\/span> <span class=\"token number\">0.7f<\/span><span class=\"token punctuation\">)<\/span><br \/>\n    <span class=\"token function\">cubicTo<\/span><span class=\"token punctuation\">(<\/span><br \/>\n        size<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">*<\/span> <span class=\"token number\">0.25f<\/span><span class=\"token punctuation\">,<\/span> size<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">*<\/span> <span class=\"token number\">0.1f<\/span><span class=\"token punctuation\">,<\/span>   <span class=\"token comment\">\/\/ \u63a7\u5236\u70b91<\/span><br \/>\n        size<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">*<\/span> <span class=\"token number\">0.75f<\/span><span class=\"token punctuation\">,<\/span> size<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">*<\/span> <span class=\"token number\">0.9f<\/span><span class=\"token punctuation\">,<\/span>   <span class=\"token comment\">\/\/ \u63a7\u5236\u70b92<\/span><br \/>\n        size<span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">,<\/span> size<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">*<\/span> <span class=\"token number\">0.3f<\/span>             <span class=\"token comment\">\/\/ \u7ec8\u70b9<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token function\">drawPath<\/span><span class=\"token punctuation\">(<\/span>path<span class=\"token punctuation\">,<\/span> color <span class=\"token operator\">&#061;<\/span> Color<span class=\"token punctuation\">.<\/span>Blue<span class=\"token punctuation\">,<\/span> style <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Stroke<\/span><span class=\"token punctuation\">(<\/span>width <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">4<\/span><span class=\"token punctuation\">.<\/span>dp<span class=\"token punctuation\">.<\/span><span class=\"token function\">toPx<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>\u63a7\u5236\u70b9\u7684\u76f4\u89c9&#xff1a;\u4e09\u6b21\u8d1d\u585e\u5c14\u66f2\u7ebf\u5728\u8d77\u70b9\u5904\u201c\u671d\u5411\u201d\u63a7\u5236\u70b91&#xff0c;\u5728\u7ec8\u70b9\u5904\u201c\u6765\u81ea\u201d\u63a7\u5236\u70b92\u3002\u60f3\u8ba9\u66f2\u7ebf\u5728\u8d77\u70b9\u6c34\u5e73\u51fa\u53d1&#xff0c;\u5c31\u628a\u63a7\u5236\u70b91\u653e\u5728\u8d77\u70b9\u7684\u6c34\u5e73\u65b9\u5411\u4e0a\u3002<\/p>\n<h4>3.2 \u5f27\u7ebf&#xff1a;drawArc \u4e0e Path.arcTo<\/h4>\n<p>drawArc \u76f4\u63a5\u753b\u5f27&#xff0c;Path.arcTo \u628a\u5f27\u62fc\u8fdb\u8def\u5f84\u3002<\/p>\n<p><span class=\"token comment\">\/\/ \u76f4\u63a5\u753b\u5f27<\/span><br \/>\n<span class=\"token function\">drawArc<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    color <span class=\"token operator\">&#061;<\/span> Color<span class=\"token punctuation\">.<\/span>Red<span class=\"token punctuation\">,<\/span><br \/>\n    startAngle <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">&#8211;<\/span><span class=\"token number\">90f<\/span><span class=\"token punctuation\">,<\/span>      <span class=\"token comment\">\/\/ \u4ece\u6b63\u4e0a\u65b9\u5f00\u59cb<\/span><br \/>\n    sweepAngle <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">270f<\/span><span class=\"token punctuation\">,<\/span>      <span class=\"token comment\">\/\/ \u987a\u65f6\u9488\u626b 270 \u5ea6<\/span><br \/>\n    useCenter <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    style <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Stroke<\/span><span class=\"token punctuation\">(<\/span>width <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">12<\/span><span class=\"token punctuation\">.<\/span>dp<span class=\"token punctuation\">.<\/span><span class=\"token function\">toPx<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> cap <span class=\"token operator\">&#061;<\/span> StrokeCap<span class=\"token punctuation\">.<\/span>Round<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    topLeft <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Offset<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">20f<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">20f<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    size <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Size<\/span><span class=\"token punctuation\">(<\/span>size<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">40f<\/span><span class=\"token punctuation\">,<\/span> size<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">40f<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u62fc\u8fdb\u8def\u5f84<\/span><br \/>\n<span class=\"token keyword\">val<\/span> path <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Path<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">apply<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">arcTo<\/span><span class=\"token punctuation\">(<\/span><br \/>\n        rect <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Rect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">20f<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">20f<\/span><span class=\"token punctuation\">,<\/span> size<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">20f<\/span><span class=\"token punctuation\">,<\/span> size<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">20f<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        startAngleDegrees <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">&#8211;<\/span><span class=\"token number\">90f<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        sweepAngleDegrees <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">180f<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        forceMoveTo <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">true<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>\u89d2\u5ea6\u89c4\u5219&#xff1a;0 \u5ea6\u5728\u6b63\u53f3\u65b9&#xff08;3 \u70b9\u949f\u65b9\u5411&#xff09;&#xff0c;\u987a\u65f6\u9488\u589e\u52a0\u3002-90f \u662f\u6b63\u4e0a\u65b9&#xff08;12 \u70b9\u949f\u65b9\u5411&#xff09;\u3002<\/p>\n<h4>3.3 \u5e03\u5c14\u8fd0\u7b97&#xff1a;Path.op<\/h4>\n<p>\u8fd9\u662f\u5f88\u591a\u4eba\u4e0d\u77e5\u9053\u7684\u80fd\u529b\u3002\u4e24\u4e2a Path \u53ef\u4ee5\u6c42\u4ea4\u96c6\u3001\u5e76\u96c6\u3001\u5dee\u96c6\u3001\u5f02\u6216&#xff1a;<\/p>\n<p><span class=\"token keyword\">val<\/span> circle <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Path<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">apply<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token function\">addOval<\/span><span class=\"token punctuation\">(<\/span><span class=\"token function\">Rect<\/span><span class=\"token punctuation\">(<\/span>center<span class=\"token punctuation\">,<\/span> <span class=\"token number\">100f<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token keyword\">val<\/span> rect <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Path<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">apply<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token function\">addRect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token function\">Rect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token function\">Offset<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">50f<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">50f<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token function\">Size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">200f<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">200f<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token keyword\">val<\/span> result <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Path<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">apply<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">op<\/span><span class=\"token punctuation\">(<\/span>circle<span class=\"token punctuation\">,<\/span> rect<span class=\"token punctuation\">,<\/span> PathOperation<span class=\"token punctuation\">.<\/span>Intersect<span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token function\">drawPath<\/span><span class=\"token punctuation\">(<\/span>result<span class=\"token punctuation\">,<\/span> Color<span class=\"token punctuation\">.<\/span>Magenta<span class=\"token punctuation\">)<\/span><\/p>\n<p>PathOperation \u7684\u53d6\u503c&#xff1a;<\/p>\n<table>\n<tr>\u64cd\u4f5c\u542b\u4e49<\/tr>\n<tbody>\n<tr>\n<td>Union<\/td>\n<td>\u5e76\u96c6<\/td>\n<\/tr>\n<tr>\n<td>Intersect<\/td>\n<td>\u4ea4\u96c6<\/td>\n<\/tr>\n<tr>\n<td>Difference<\/td>\n<td>\u5dee\u96c6&#xff08;A \u51cf B&#xff09;<\/td>\n<\/tr>\n<tr>\n<td>ReverseDifference<\/td>\n<td>\u5dee\u96c6&#xff08;B \u51cf A&#xff09;<\/td>\n<\/tr>\n<tr>\n<td>Xor<\/td>\n<td>\u5f02\u6216&#xff08;\u4e0d\u91cd\u53e0\u7684\u90e8\u5206&#xff09;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u5e94\u7528\u573a\u666f&#xff1a;\u505a\u201c\u6316\u7a7a\u201d\u6548\u679c&#xff08;\u5706\u51cf\u53bb\u6587\u5b57&#xff09;\u3001\u590d\u6742\u56fe\u6807\u3001\u4e0d\u89c4\u5219\u5f62\u72b6\u7684\u906e\u7f69\u3002<\/p>\n<p>Path.op \u5e03\u5c14\u8fd0\u7b97\u7684\u56db\u79cd\u7ed3\u679c\u793a\u610f&#xff1a;<\/p>\n<p>  #mermaid-svg-FmccgfaZDromUO3S{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-FmccgfaZDromUO3S .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-FmccgfaZDromUO3S .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-FmccgfaZDromUO3S .error-icon{fill:#552222;}#mermaid-svg-FmccgfaZDromUO3S .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-FmccgfaZDromUO3S .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-FmccgfaZDromUO3S .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-FmccgfaZDromUO3S .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-FmccgfaZDromUO3S .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-FmccgfaZDromUO3S .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-FmccgfaZDromUO3S .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-FmccgfaZDromUO3S .marker{fill:#333333;stroke:#333333;}#mermaid-svg-FmccgfaZDromUO3S .marker.cross{stroke:#333333;}#mermaid-svg-FmccgfaZDromUO3S svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-FmccgfaZDromUO3S p{margin:0;}#mermaid-svg-FmccgfaZDromUO3S .label{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;color:#333;}#mermaid-svg-FmccgfaZDromUO3S .cluster-label text{fill:#333;}#mermaid-svg-FmccgfaZDromUO3S .cluster-label span{color:#333;}#mermaid-svg-FmccgfaZDromUO3S .cluster-label span p{background-color:transparent;}#mermaid-svg-FmccgfaZDromUO3S .label text,#mermaid-svg-FmccgfaZDromUO3S span{fill:#333;color:#333;}#mermaid-svg-FmccgfaZDromUO3S .node rect,#mermaid-svg-FmccgfaZDromUO3S .node circle,#mermaid-svg-FmccgfaZDromUO3S .node ellipse,#mermaid-svg-FmccgfaZDromUO3S .node polygon,#mermaid-svg-FmccgfaZDromUO3S .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-FmccgfaZDromUO3S .rough-node .label text,#mermaid-svg-FmccgfaZDromUO3S .node .label text,#mermaid-svg-FmccgfaZDromUO3S .image-shape .label,#mermaid-svg-FmccgfaZDromUO3S .icon-shape .label{text-anchor:middle;}#mermaid-svg-FmccgfaZDromUO3S .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-FmccgfaZDromUO3S .rough-node .label,#mermaid-svg-FmccgfaZDromUO3S .node .label,#mermaid-svg-FmccgfaZDromUO3S .image-shape .label,#mermaid-svg-FmccgfaZDromUO3S .icon-shape .label{text-align:center;}#mermaid-svg-FmccgfaZDromUO3S .node.clickable{cursor:pointer;}#mermaid-svg-FmccgfaZDromUO3S .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-FmccgfaZDromUO3S .arrowheadPath{fill:#333333;}#mermaid-svg-FmccgfaZDromUO3S .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-FmccgfaZDromUO3S .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-FmccgfaZDromUO3S .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-FmccgfaZDromUO3S .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-FmccgfaZDromUO3S .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-FmccgfaZDromUO3S .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-FmccgfaZDromUO3S .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-FmccgfaZDromUO3S .cluster text{fill:#333;}#mermaid-svg-FmccgfaZDromUO3S .cluster span{color:#333;}#mermaid-svg-FmccgfaZDromUO3S div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-FmccgfaZDromUO3S .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-FmccgfaZDromUO3S rect.text{fill:none;stroke-width:0;}#mermaid-svg-FmccgfaZDromUO3S .icon-shape,#mermaid-svg-FmccgfaZDromUO3S .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-FmccgfaZDromUO3S .icon-shape p,#mermaid-svg-FmccgfaZDromUO3S .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-FmccgfaZDromUO3S .icon-shape .label rect,#mermaid-svg-FmccgfaZDromUO3S .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-FmccgfaZDromUO3S .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-FmccgfaZDromUO3S .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-FmccgfaZDromUO3S :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}<\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>           <span class=\"nodeLabel\"><\/p>\n<p>\u8f93\u5165<\/p>\n<p><\/span><\/p>\n<p>           <span class=\"nodeLabel\"><\/p>\n<p>\u5706 Path<\/p>\n<p><\/span><\/p>\n<p>           <span class=\"nodeLabel\"><\/p>\n<p>\u77e9\u5f62 Path<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Path.op \u5e03\u5c14\u8fd0\u7b97<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Union \u5e76\u96c6<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Intersect \u4ea4\u96c6<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Difference \u5dee\u96c6 A-B<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Xor \u5f02\u6216<\/p>\n<p><\/span><\/p>\n<h3>\u56db\u3001Brush \u8fdb\u9636&#xff1a;\u6e10\u53d8\u3001Shader \u4e0e\u6df7\u5408\u6a21\u5f0f<\/h3>\n<h4>4.1 \u4e09\u79cd\u57fa\u7840\u6e10\u53d8<\/h4>\n<p>\u7b2c8\u8bfe\u8bb2\u8fc7 linearGradient\u3001radialGradient\u3001sweepGradient\u3002\u8fdb\u9636\u7528\u6cd5\u662f\u591a\u8272\u505c\u9760\u70b9\u548cTileMode\u3002<\/p>\n<p>Brush<span class=\"token punctuation\">.<\/span><span class=\"token function\">linearGradient<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    colorStops <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">arrayOf<\/span><span class=\"token punctuation\">(<\/span><br \/>\n        <span class=\"token number\">0.0f<\/span> <span class=\"token keyword\">to<\/span> Color<span class=\"token punctuation\">.<\/span>Blue<span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token number\">0.3f<\/span> <span class=\"token keyword\">to<\/span> Color<span class=\"token punctuation\">.<\/span>Cyan<span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token number\">0.7f<\/span> <span class=\"token keyword\">to<\/span> Color<span class=\"token punctuation\">.<\/span>Magenta<span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token number\">1.0f<\/span> <span class=\"token keyword\">to<\/span> Color<span class=\"token punctuation\">.<\/span>Red<br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    start <span class=\"token operator\">&#061;<\/span> Offset<span class=\"token punctuation\">.<\/span>Zero<span class=\"token punctuation\">,<\/span><br \/>\n    end <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Offset<\/span><span class=\"token punctuation\">(<\/span>size<span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">,<\/span> size<span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    tileMode <span class=\"token operator\">&#061;<\/span> TileMode<span class=\"token punctuation\">.<\/span>Clamp   <span class=\"token comment\">\/\/ \u8d85\u51fa\u8303\u56f4\u65f6\u94b3\u5236\u8fb9\u7f18\u989c\u8272<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<p>TileMode \u7684\u53d6\u503c&#xff1a;Clamp&#xff08;\u94b3\u5236&#xff09;\u3001Repeated&#xff08;\u91cd\u590d&#xff09;\u3001Mirror&#xff08;\u955c\u50cf&#xff09;\u3001Decal&#xff08;\u53ea\u753b\u539f\u59cb\u533a\u57df&#xff09;\u3002<\/p>\n<h4>4.2 \u626b\u63cf\u6e10\u53d8\u505a\u201c\u73af\u5f62\u8fdb\u5ea6\u6761\u201d<\/h4>\n<p><span class=\"token keyword\">val<\/span> brush <span class=\"token operator\">&#061;<\/span> Brush<span class=\"token punctuation\">.<\/span><span class=\"token function\">sweepGradient<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    <span class=\"token number\">0.0f<\/span> <span class=\"token keyword\">to<\/span> <span class=\"token function\">Color<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0xFF2196F3<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token number\">0.5f<\/span> <span class=\"token keyword\">to<\/span> <span class=\"token function\">Color<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0xFF9C27B0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token number\">1.0f<\/span> <span class=\"token keyword\">to<\/span> <span class=\"token function\">Color<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0xFF2196F3<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token function\">drawCircle<\/span><span class=\"token punctuation\">(<\/span>brush <span class=\"token operator\">&#061;<\/span> brush<span class=\"token punctuation\">,<\/span> radius <span class=\"token operator\">&#061;<\/span> radius<span class=\"token punctuation\">,<\/span> style <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Stroke<\/span><span class=\"token punctuation\">(<\/span>width <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">16<\/span><span class=\"token punctuation\">.<\/span>dp<span class=\"token punctuation\">.<\/span><span class=\"token function\">toPx<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>\u626b\u63cf\u6e10\u53d8\u4ece\u6b63\u53f3\u65b9\u5f00\u59cb\u987a\u65f6\u9488\u626b\u4e00\u5708\u3002\u505a\u73af\u5f62\u8fdb\u5ea6\u6761\u65f6&#xff0c;\u7528 drawArc \u914d\u5408 sweepGradient&#xff0c;\u53ea\u753b\u9700\u8981\u7684\u90a3\u4e00\u6bb5\u3002<\/p>\n<h4>4.3 BlendMode&#xff1a;\u8ba9\u56fe\u5c42\u201c\u53cd\u5e94\u201d<\/h4>\n<p>BlendMode \u63a7\u5236\u65b0\u7ed8\u5236\u7684\u5185\u5bb9\u5982\u4f55\u4e0e\u5df2\u6709\u5185\u5bb9\u6df7\u5408\u3002\u7b2c8\u8bfe\u63d0\u8fc7&#xff0c;\u8fd9\u91cc\u8bb2\u51e0\u4e2a\u8fdb\u9636\u7528\u6cd5\u3002<\/p>\n<p><span class=\"token comment\">\/\/ \u6b63\u7247\u53e0\u5e95&#xff1a;\u989c\u8272\u53d8\u6df1<\/span><br \/>\n<span class=\"token function\">drawCircle<\/span><span class=\"token punctuation\">(<\/span>color <span class=\"token operator\">&#061;<\/span> Color<span class=\"token punctuation\">.<\/span>Blue<span class=\"token punctuation\">,<\/span> blendMode <span class=\"token operator\">&#061;<\/span> BlendMode<span class=\"token punctuation\">.<\/span>Multiply<span class=\"token punctuation\">)<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u6ee4\u8272&#xff1a;\u989c\u8272\u53d8\u6d45<\/span><br \/>\n<span class=\"token function\">drawCircle<\/span><span class=\"token punctuation\">(<\/span>color <span class=\"token operator\">&#061;<\/span> Color<span class=\"token punctuation\">.<\/span>Blue<span class=\"token punctuation\">,<\/span> blendMode <span class=\"token operator\">&#061;<\/span> BlendMode<span class=\"token punctuation\">.<\/span>Screen<span class=\"token punctuation\">)<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u53e0\u52a0&#xff1a;\u589e\u5f3a\u5bf9\u6bd4<\/span><br \/>\n<span class=\"token function\">drawCircle<\/span><span class=\"token punctuation\">(<\/span>color <span class=\"token operator\">&#061;<\/span> Color<span class=\"token punctuation\">.<\/span>Blue<span class=\"token punctuation\">,<\/span> blendMode <span class=\"token operator\">&#061;<\/span> BlendMode<span class=\"token punctuation\">.<\/span>Overlay<span class=\"token punctuation\">)<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u6316\u7a7a&#xff1a;\u7528 DstOut \u628a\u5df2\u6709\u5185\u5bb9\u201c\u64e6\u6389\u201d<\/span><br \/>\n<span class=\"token function\">drawCircle<\/span><span class=\"token punctuation\">(<\/span>color <span class=\"token operator\">&#061;<\/span> Color<span class=\"token punctuation\">.<\/span>Black<span class=\"token punctuation\">,<\/span> blendMode <span class=\"token operator\">&#061;<\/span> BlendMode<span class=\"token punctuation\">.<\/span>DstOut<span class=\"token punctuation\">)<\/span><\/p>\n<p>\u201c\u63a2\u7167\u706f\u201d\u6548\u679c&#xff1a;\u5148\u753b\u4e00\u5c42\u534a\u900f\u660e\u9ed1\u906e\u7f69&#xff0c;\u518d\u7528 DstOut \u5728\u9f20\u6807\/\u624b\u6307\u4f4d\u7f6e\u753b\u4e00\u4e2a\u5f84\u5411\u6e10\u53d8\u5706&#xff0c;\u628a\u906e\u7f69\u201c\u64e6\u6389\u201d&#xff0c;\u9732\u51fa\u4e0b\u9762\u7684\u5185\u5bb9\u3002<\/p>\n<p><span class=\"token function\">drawRect<\/span><span class=\"token punctuation\">(<\/span>Color<span class=\"token punctuation\">.<\/span>Black<span class=\"token punctuation\">.<\/span><span class=\"token function\">copy<\/span><span class=\"token punctuation\">(<\/span>alpha <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0.7f<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token function\">drawCircle<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    brush <span class=\"token operator\">&#061;<\/span> Brush<span class=\"token punctuation\">.<\/span><span class=\"token function\">radialGradient<\/span><span class=\"token punctuation\">(<\/span><br \/>\n        colors <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">listOf<\/span><span class=\"token punctuation\">(<\/span>Color<span class=\"token punctuation\">.<\/span>Transparent<span class=\"token punctuation\">,<\/span> Color<span class=\"token punctuation\">.<\/span>Black<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        center <span class=\"token operator\">&#061;<\/span> fingerPosition<span class=\"token punctuation\">,<\/span><br \/>\n        radius <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">200f<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    center <span class=\"token operator\">&#061;<\/span> fingerPosition<span class=\"token punctuation\">,<\/span><br \/>\n    radius <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">200f<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    blendMode <span class=\"token operator\">&#061;<\/span> BlendMode<span class=\"token punctuation\">.<\/span>DstOut<br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<p>BlendMode \u7684\u6df7\u5408\u903b\u8f91\u53ef\u4ee5\u7528\u4e0b\u9762\u7684\u6d41\u7a0b\u7406\u89e3&#xff1a;<\/p>\n<p>  #mermaid-svg-xbwaFJQLvPGCq2rq{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-xbwaFJQLvPGCq2rq .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-xbwaFJQLvPGCq2rq .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-xbwaFJQLvPGCq2rq .error-icon{fill:#552222;}#mermaid-svg-xbwaFJQLvPGCq2rq .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-xbwaFJQLvPGCq2rq .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-xbwaFJQLvPGCq2rq .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-xbwaFJQLvPGCq2rq .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-xbwaFJQLvPGCq2rq .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-xbwaFJQLvPGCq2rq .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-xbwaFJQLvPGCq2rq .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-xbwaFJQLvPGCq2rq .marker{fill:#333333;stroke:#333333;}#mermaid-svg-xbwaFJQLvPGCq2rq .marker.cross{stroke:#333333;}#mermaid-svg-xbwaFJQLvPGCq2rq svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-xbwaFJQLvPGCq2rq p{margin:0;}#mermaid-svg-xbwaFJQLvPGCq2rq .label{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;color:#333;}#mermaid-svg-xbwaFJQLvPGCq2rq .cluster-label text{fill:#333;}#mermaid-svg-xbwaFJQLvPGCq2rq .cluster-label span{color:#333;}#mermaid-svg-xbwaFJQLvPGCq2rq .cluster-label span p{background-color:transparent;}#mermaid-svg-xbwaFJQLvPGCq2rq .label text,#mermaid-svg-xbwaFJQLvPGCq2rq span{fill:#333;color:#333;}#mermaid-svg-xbwaFJQLvPGCq2rq .node rect,#mermaid-svg-xbwaFJQLvPGCq2rq .node circle,#mermaid-svg-xbwaFJQLvPGCq2rq .node ellipse,#mermaid-svg-xbwaFJQLvPGCq2rq .node polygon,#mermaid-svg-xbwaFJQLvPGCq2rq .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-xbwaFJQLvPGCq2rq .rough-node .label text,#mermaid-svg-xbwaFJQLvPGCq2rq .node .label text,#mermaid-svg-xbwaFJQLvPGCq2rq .image-shape .label,#mermaid-svg-xbwaFJQLvPGCq2rq .icon-shape .label{text-anchor:middle;}#mermaid-svg-xbwaFJQLvPGCq2rq .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-xbwaFJQLvPGCq2rq .rough-node .label,#mermaid-svg-xbwaFJQLvPGCq2rq .node .label,#mermaid-svg-xbwaFJQLvPGCq2rq .image-shape .label,#mermaid-svg-xbwaFJQLvPGCq2rq .icon-shape .label{text-align:center;}#mermaid-svg-xbwaFJQLvPGCq2rq .node.clickable{cursor:pointer;}#mermaid-svg-xbwaFJQLvPGCq2rq .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-xbwaFJQLvPGCq2rq .arrowheadPath{fill:#333333;}#mermaid-svg-xbwaFJQLvPGCq2rq .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-xbwaFJQLvPGCq2rq .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-xbwaFJQLvPGCq2rq .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-xbwaFJQLvPGCq2rq .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-xbwaFJQLvPGCq2rq .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-xbwaFJQLvPGCq2rq .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-xbwaFJQLvPGCq2rq .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-xbwaFJQLvPGCq2rq .cluster text{fill:#333;}#mermaid-svg-xbwaFJQLvPGCq2rq .cluster span{color:#333;}#mermaid-svg-xbwaFJQLvPGCq2rq div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-xbwaFJQLvPGCq2rq .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-xbwaFJQLvPGCq2rq rect.text{fill:none;stroke-width:0;}#mermaid-svg-xbwaFJQLvPGCq2rq .icon-shape,#mermaid-svg-xbwaFJQLvPGCq2rq .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-xbwaFJQLvPGCq2rq .icon-shape p,#mermaid-svg-xbwaFJQLvPGCq2rq .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-xbwaFJQLvPGCq2rq .icon-shape .label rect,#mermaid-svg-xbwaFJQLvPGCq2rq .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-xbwaFJQLvPGCq2rq .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-xbwaFJQLvPGCq2rq .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-xbwaFJQLvPGCq2rq :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}<\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u5df2\u6709\u5185\u5bb9&#xff08;\u5e95\u5c42&#xff09;<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>BlendMode \u6df7\u5408<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u65b0\u7ed8\u5236\u5185\u5bb9&#xff08;\u4e0a\u5c42&#xff09;<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Multiply \u6b63\u7247\u53e0\u5e95&#xff1a;\u53d8\u6df1<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Screen \u6ee4\u8272&#xff1a;\u53d8\u6d45<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Overlay \u53e0\u52a0&#xff1a;\u589e\u5f3a\u5bf9\u6bd4<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>DstOut \u6316\u7a7a&#xff1a;\u64e6\u9664\u5e95\u5c42<\/p>\n<p><\/span><\/p>\n<h4>4.4 \u81ea\u5b9a\u4e49 Shader<\/h4>\n<p>Brush \u672c\u8d28\u4e0a\u662f Shader \u7684\u5c01\u88c5\u3002\u5982\u679c\u9700\u8981\u66f4\u5e95\u5c42\u7684\u63a7\u5236&#xff0c;\u53ef\u4ee5\u76f4\u63a5\u521b\u5efa Shader&#xff1a;<\/p>\n<p><span class=\"token keyword\">val<\/span> shader <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">LinearGradientShader<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    from <span class=\"token operator\">&#061;<\/span> Offset<span class=\"token punctuation\">.<\/span>Zero<span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token keyword\">to<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Offset<\/span><span class=\"token punctuation\">(<\/span>size<span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">,<\/span> <span class=\"token number\">0f<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    colors <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">listOf<\/span><span class=\"token punctuation\">(<\/span>Color<span class=\"token punctuation\">.<\/span>Red<span class=\"token punctuation\">,<\/span> Color<span class=\"token punctuation\">.<\/span>Blue<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    tileMode <span class=\"token operator\">&#061;<\/span> TileMode<span class=\"token punctuation\">.<\/span>Clamp<br \/>\n<span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token function\">drawRect<\/span><span class=\"token punctuation\">(<\/span>brush <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">ShaderBrush<\/span><span class=\"token punctuation\">(<\/span>shader<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>\u5927\u591a\u6570\u573a\u666f\u7528 Brush \u5c31\u591f\u4e86&#xff0c;ShaderBrush \u662f\u7ed9\u9700\u8981\u7cbe\u7ec6\u63a7\u5236\u7684\u573a\u666f\u51c6\u5907\u7684\u3002<\/p>\n<h3>\u4e94\u3001\u81ea\u5b9a\u4e49 Shape&#xff1a;\u8ba9 Modifier.clip \u548c\u80cc\u666f\u201c\u957f\u6210\u4efb\u610f\u5f62\u72b6\u201d<\/h3>\n<h4>5.1 \u4ec0\u4e48\u662f Shape<\/h4>\n<p>Shape \u662f\u4e00\u4e2a\u63a5\u53e3&#xff0c;\u53ea\u6709\u4e00\u4e2a\u65b9\u6cd5&#xff1a;createOutline(size, layoutDirection, density)\u3002\u5b83\u8fd4\u56de\u4e00\u4e2a Outline&#xff0c;\u63cf\u8ff0\u201c\u8fd9\u4e2a\u7ec4\u4ef6\u7684\u53ef\u89c1\u533a\u57df\u662f\u4ec0\u4e48\u5f62\u72b6\u201d\u3002<\/p>\n<p>Compose \u5185\u7f6e\u4e86 RoundedCornerShape\u3001CircleShape\u3001CutCornerShape\u3002\u4f46\u4f60\u53ef\u4ee5\u81ea\u5b9a\u4e49&#xff1a;<\/p>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token function\">WaveShape<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    <span class=\"token keyword\">private<\/span> <span class=\"token keyword\">val<\/span> amplitude<span class=\"token operator\">:<\/span> Dp <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">20<\/span><span class=\"token punctuation\">.<\/span>dp<span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token keyword\">private<\/span> <span class=\"token keyword\">val<\/span> frequency<span class=\"token operator\">:<\/span> Float <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">2f<\/span><br \/>\n<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">:<\/span> Shape <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">override<\/span> <span class=\"token keyword\">fun<\/span> <span class=\"token function\">createOutline<\/span><span class=\"token punctuation\">(<\/span><br \/>\n        size<span class=\"token operator\">:<\/span> Size<span class=\"token punctuation\">,<\/span><br \/>\n        layoutDirection<span class=\"token operator\">:<\/span> LayoutDirection<span class=\"token punctuation\">,<\/span><br \/>\n        density<span class=\"token operator\">:<\/span> Density<br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token operator\">:<\/span> Outline <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">val<\/span> amp <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">with<\/span><span class=\"token punctuation\">(<\/span>density<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span> amplitude<span class=\"token punctuation\">.<\/span><span class=\"token function\">toPx<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token keyword\">val<\/span> path <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Path<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">apply<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token function\">moveTo<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0f<\/span><span class=\"token punctuation\">,<\/span> size<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">&#8211;<\/span> amp<span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token keyword\">val<\/span> step <span class=\"token operator\">&#061;<\/span> size<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">\/<\/span> <span class=\"token number\">100<\/span><br \/>\n            <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>x <span class=\"token keyword\">in<\/span> <span class=\"token number\">0<\/span><span class=\"token operator\">..<\/span><span class=\"token number\">100<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token keyword\">val<\/span> y <span class=\"token operator\">&#061;<\/span> size<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">&#8211;<\/span> amp <span class=\"token operator\">&#043;<\/span><br \/>\n                    <span class=\"token function\">sin<\/span><span class=\"token punctuation\">(<\/span>x <span class=\"token operator\">\/<\/span> <span class=\"token number\">100f<\/span> <span class=\"token operator\">*<\/span> frequency <span class=\"token operator\">*<\/span> <span class=\"token number\">2<\/span> <span class=\"token operator\">*<\/span> PI<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toFloat<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> amp<br \/>\n                <span class=\"token function\">lineTo<\/span><span class=\"token punctuation\">(<\/span>x <span class=\"token operator\">*<\/span> step<span class=\"token punctuation\">,<\/span> y<span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token function\">lineTo<\/span><span class=\"token punctuation\">(<\/span>size<span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">,<\/span> size<span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token function\">lineTo<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0f<\/span><span class=\"token punctuation\">,<\/span> size<span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token function\">close<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> Outline<span class=\"token punctuation\">.<\/span><span class=\"token function\">Generic<\/span><span class=\"token punctuation\">(<\/span>path<span class=\"token punctuation\">)<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>\u4f7f\u7528&#xff1a;<\/p>\n<p><span class=\"token function\">Box<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    modifier <span class=\"token operator\">&#061;<\/span> Modifier<br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">300<\/span><span class=\"token punctuation\">.<\/span>dp<span class=\"token punctuation\">,<\/span> <span class=\"token number\">200<\/span><span class=\"token punctuation\">.<\/span>dp<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">clip<\/span><span class=\"token punctuation\">(<\/span><span class=\"token function\">WaveShape<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">background<\/span><span class=\"token punctuation\">(<\/span>Color<span class=\"token punctuation\">.<\/span>Blue<span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<p>Outline \u7684\u4e09\u79cd\u7c7b\u578b&#xff1a;<\/p>\n<table>\n<tr>\u7c7b\u578b\u542b\u4e49<\/tr>\n<tbody>\n<tr>\n<td>Outline.Rectangle<\/td>\n<td>\u77e9\u5f62<\/td>\n<\/tr>\n<tr>\n<td>Outline.Rounded<\/td>\n<td>\u5706\u89d2\u77e9\u5f62<\/td>\n<\/tr>\n<tr>\n<td>Outline.Generic<\/td>\n<td>\u4efb\u610f\u8def\u5f84<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u81ea\u5b9a\u4e49 Shape \u8fd4\u56de Outline.Generic(path)&#xff0c;Modifier.clip \u4f1a\u7528\u8fd9\u4e2a\u8def\u5f84\u88c1\u526a\u5185\u5bb9&#xff0c;Modifier.background \u4f1a\u7528\u8fd9\u4e2a\u8def\u5f84\u586b\u5145\u80cc\u666f&#xff0c;Modifier.border \u4f1a\u6cbf\u7740\u8fd9\u4e2a\u8def\u5f84\u63cf\u8fb9\u3002<\/p>\n<h4>5.2 Shape &#043; \u52a8\u753b<\/h4>\n<p>Shape \u53ef\u4ee5\u548c animate*AsState \u914d\u5408&#xff0c;\u505a\u51fa\u201c\u5f62\u72b6\u53d8\u5f62\u201d\u52a8\u753b&#xff1a;<\/p>\n<p><span class=\"token keyword\">val<\/span> cornerRadius <span class=\"token keyword\">by<\/span> <span class=\"token function\">animateDpAsState<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    targetValue <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>expanded<span class=\"token punctuation\">)<\/span> <span class=\"token number\">48<\/span><span class=\"token punctuation\">.<\/span>dp <span class=\"token keyword\">else<\/span> <span class=\"token number\">8<\/span><span class=\"token punctuation\">.<\/span>dp<span class=\"token punctuation\">,<\/span><br \/>\n    label <span class=\"token operator\">&#061;<\/span> <span class=\"token string-literal singleline\"><span class=\"token string\">&#034;corner&#034;<\/span><\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<p><span class=\"token function\">Box<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    modifier <span class=\"token operator\">&#061;<\/span> Modifier<br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">200<\/span><span class=\"token punctuation\">.<\/span>dp<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">clip<\/span><span class=\"token punctuation\">(<\/span><span class=\"token function\">RoundedCornerShape<\/span><span class=\"token punctuation\">(<\/span>cornerRadius<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">background<\/span><span class=\"token punctuation\">(<\/span>Color<span class=\"token punctuation\">.<\/span>Magenta<span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<p>RoundedCornerShape \u672c\u8eab\u652f\u6301 Dp \u53c2\u6570&#xff0c;\u53ef\u4ee5\u76f4\u63a5\u52a8\u753b\u3002\u81ea\u5b9a\u4e49 Shape \u7684\u52a8\u753b\u9700\u8981\u81ea\u5df1\u63d2\u503c\u8def\u5f84\u53c2\u6570\u3002<\/p>\n<h3>\u516d\u3001\u52a8\u753b\u9a71\u52a8\u7ed8\u5236&#xff1a;\u8ba9\u753b\u9762\u201c\u6d3b\u201d\u8d77\u6765<\/h3>\n<p>Canvas \u7684 lambda \u5728\u6bcf\u4e00\u5e27\u52a8\u753b\u4e2d\u90fd\u4f1a\u91cd\u65b0\u6267\u884c\u3002\u53ea\u8981\u7ed8\u5236\u903b\u8f91\u4f9d\u8d56\u52a8\u753b\u72b6\u6001&#xff0c;\u753b\u9762\u5c31\u4f1a\u52a8\u3002<\/p>\n<h4>6.1 rememberInfiniteTransition<\/h4>\n<p><span class=\"token keyword\">val<\/span> infiniteTransition <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">rememberInfiniteTransition<\/span><span class=\"token punctuation\">(<\/span>label <span class=\"token operator\">&#061;<\/span> <span class=\"token string-literal singleline\"><span class=\"token string\">&#034;wave&#034;<\/span><\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token keyword\">val<\/span> phase <span class=\"token keyword\">by<\/span> infiniteTransition<span class=\"token punctuation\">.<\/span><span class=\"token function\">animateFloat<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    initialValue <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0f<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    targetValue <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">2<\/span> <span class=\"token operator\">*<\/span> PI<span class=\"token punctuation\">.<\/span><span class=\"token function\">toFloat<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    animationSpec <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">infiniteRepeatable<\/span><span class=\"token punctuation\">(<\/span><br \/>\n        animation <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">tween<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2000<\/span><span class=\"token punctuation\">,<\/span> easing <span class=\"token operator\">&#061;<\/span> LinearEasing<span class=\"token punctuation\">)<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    label <span class=\"token operator\">&#061;<\/span> <span class=\"token string-literal singleline\"><span class=\"token string\">&#034;phase&#034;<\/span><\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<p><span class=\"token function\">Canvas<\/span><span class=\"token punctuation\">(<\/span>modifier <span class=\"token operator\">&#061;<\/span> Modifier<span class=\"token punctuation\">.<\/span><span class=\"token function\">fillMaxWidth<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">height<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">200<\/span><span class=\"token punctuation\">.<\/span>dp<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">val<\/span> path <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Path<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">apply<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token function\">moveTo<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0f<\/span><span class=\"token punctuation\">,<\/span> size<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">\/<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>x <span class=\"token keyword\">in<\/span> <span class=\"token number\">0<\/span><span class=\"token operator\">..<\/span>size<span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">.<\/span><span class=\"token function\">toInt<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> step <span class=\"token number\">4<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">val<\/span> y <span class=\"token operator\">&#061;<\/span> size<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">\/<\/span> <span class=\"token number\">2<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token function\">sin<\/span><span class=\"token punctuation\">(<\/span>x <span class=\"token operator\">\/<\/span> <span class=\"token number\">80f<\/span> <span class=\"token operator\">&#043;<\/span> phase<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">30f<\/span><br \/>\n            <span class=\"token function\">lineTo<\/span><span class=\"token punctuation\">(<\/span>x<span class=\"token punctuation\">.<\/span><span class=\"token function\">toFloat<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> y<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token function\">drawPath<\/span><span class=\"token punctuation\">(<\/span>path<span class=\"token punctuation\">,<\/span> Color<span class=\"token punctuation\">.<\/span>Blue<span class=\"token punctuation\">,<\/span> style <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Stroke<\/span><span class=\"token punctuation\">(<\/span>width <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">4<\/span><span class=\"token punctuation\">.<\/span>dp<span class=\"token punctuation\">.<\/span><span class=\"token function\">toPx<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>phase \u4ece 0 \u53d8\u5230 2\u03c0&#xff0c;\u6b63\u5f26\u6ce2\u5c31\u201c\u6d41\u52a8\u201d\u8d77\u6765\u3002<\/p>\n<h4>6.2 \u7528 animateFloatAsState \u505a\u8fdb\u5ea6\u52a8\u753b<\/h4>\n<p><span class=\"token keyword\">val<\/span> animatedProgress <span class=\"token keyword\">by<\/span> <span class=\"token function\">animateFloatAsState<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    targetValue <span class=\"token operator\">&#061;<\/span> progress<span class=\"token punctuation\">,<\/span><br \/>\n    animationSpec <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">tween<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">1000<\/span><span class=\"token punctuation\">,<\/span> easing <span class=\"token operator\">&#061;<\/span> FastOutSlowInEasing<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    label <span class=\"token operator\">&#061;<\/span> <span class=\"token string-literal singleline\"><span class=\"token string\">&#034;progress&#034;<\/span><\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<p><span class=\"token function\">Canvas<\/span><span class=\"token punctuation\">(<\/span>modifier <span class=\"token operator\">&#061;<\/span> Modifier<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">200<\/span><span class=\"token punctuation\">.<\/span>dp<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">drawArc<\/span><span class=\"token punctuation\">(<\/span><br \/>\n        color <span class=\"token operator\">&#061;<\/span> Color<span class=\"token punctuation\">.<\/span>Blue<span class=\"token punctuation\">,<\/span><br \/>\n        startAngle <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">&#8211;<\/span><span class=\"token number\">90f<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        sweepAngle <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">360f<\/span> <span class=\"token operator\">*<\/span> animatedProgress<span class=\"token punctuation\">,<\/span><br \/>\n        useCenter <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        style <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Stroke<\/span><span class=\"token punctuation\">(<\/span>width <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">16<\/span><span class=\"token punctuation\">.<\/span>dp<span class=\"token punctuation\">.<\/span><span class=\"token function\">toPx<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> cap <span class=\"token operator\">&#061;<\/span> StrokeCap<span class=\"token punctuation\">.<\/span>Round<span class=\"token punctuation\">)<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>6.3 \u6027\u80fd\u8981\u70b9<\/h4>\n<p>\u4e0d\u8981\u5728\u7ed8\u5236 lambda \u91cc\u521b\u5efa\u65b0\u5bf9\u8c61\u3002Offset\u3001Path\u3001Brush\u3001Color \u90fd\u5e94\u8be5\u63d0\u524d\u521b\u5efa\u6216\u7528 drawWithCache \u7f13\u5b58\u3002\u6bcf\u5e27\u521b\u5efa\u5bf9\u8c61\u4f1a\u89e6\u53d1 GC&#xff0c;\u5bfc\u81f4\u6389\u5e27\u3002<\/p>\n<p><span class=\"token comment\">\/\/ \u4e0d\u63a8\u8350&#xff1a;\u6bcf\u5e27\u521b\u5efa Path<\/span><br \/>\n<span class=\"token function\">Canvas<\/span><span class=\"token punctuation\">(<\/span>modifier<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">val<\/span> path <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Path<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">apply<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token comment\">\/* &#8230; *\/<\/span> <span class=\"token punctuation\">}<\/span>  <span class=\"token comment\">\/\/ \u6bcf\u5e27\u65b0\u5efa<\/span><br \/>\n    <span class=\"token function\">drawPath<\/span><span class=\"token punctuation\">(<\/span>path<span class=\"token punctuation\">,<\/span> Color<span class=\"token punctuation\">.<\/span>Red<span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u63a8\u8350&#xff1a;\u7528 drawWithCache \u7f13\u5b58<\/span><br \/>\nModifier<span class=\"token punctuation\">.<\/span><span class=\"token function\">drawWithCache<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">val<\/span> path <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">buildPath<\/span><span class=\"token punctuation\">(<\/span>size<span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u53ea\u5728\u5c3a\u5bf8\u53d8\u5316\u65f6\u521b\u5efa<\/span><br \/>\n    onDrawBehind <span class=\"token punctuation\">{<\/span> <span class=\"token function\">drawPath<\/span><span class=\"token punctuation\">(<\/span>path<span class=\"token punctuation\">,<\/span> Color<span class=\"token punctuation\">.<\/span>Red<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h3>\u4e03\u3001\u7efc\u5408\u5b9e\u6218&#xff1a;\u4e00\u4e2a\u201c\u4f1a\u547c\u5438\u201d\u7684\u6570\u636e\u770b\u677f<\/h3>\n<p>\u628a\u8fd9\u4e00\u8bfe\u7684\u77e5\u8bc6\u4e32\u8d77\u6765&#xff1a;\u5706\u73af\u8fdb\u5ea6\u6761&#xff08;\u6e10\u53d8&#043;\u5706\u89d2\u7aef\u70b9&#043;\u52a8\u753b&#xff09;\u3001\u6298\u7ebf\u56fe&#xff08;\u8d1d\u585e\u5c14\u66f2\u7ebf&#043;\u9762\u79ef\u586b\u5145&#043;\u62d0\u70b9&#xff09;\u3001\u6807\u7b7e\u4e91&#xff08;\u81ea\u5b9a\u4e49Shape&#xff09;\u3002<\/p>\n<h4>7.1 \u5706\u73af\u8fdb\u5ea6\u6761<\/h4>\n<p><span class=\"token annotation builtin\">&#064;Composable<\/span><br \/>\n<span class=\"token keyword\">fun<\/span> <span class=\"token function\">GradientRingProgress<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    progress<span class=\"token operator\">:<\/span> Float<span class=\"token punctuation\">,<\/span><br \/>\n    modifier<span class=\"token operator\">:<\/span> Modifier <span class=\"token operator\">&#061;<\/span> Modifier<span class=\"token punctuation\">,<\/span><br \/>\n    size<span class=\"token operator\">:<\/span> Dp <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">160<\/span><span class=\"token punctuation\">.<\/span>dp<span class=\"token punctuation\">,<\/span><br \/>\n    strokeWidth<span class=\"token operator\">:<\/span> Dp <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">16<\/span><span class=\"token punctuation\">.<\/span>dp<br \/>\n<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">val<\/span> animatedProgress <span class=\"token keyword\">by<\/span> <span class=\"token function\">animateFloatAsState<\/span><span class=\"token punctuation\">(<\/span><br \/>\n        targetValue <span class=\"token operator\">&#061;<\/span> progress<span class=\"token punctuation\">.<\/span><span class=\"token function\">coerceIn<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0f<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1f<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        animationSpec <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">tween<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">1000<\/span><span class=\"token punctuation\">,<\/span> easing <span class=\"token operator\">&#061;<\/span> FastOutSlowInEasing<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        label <span class=\"token operator\">&#061;<\/span> <span class=\"token string-literal singleline\"><span class=\"token string\">&#034;ring_progress&#034;<\/span><\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><\/p>\n<p>    <span class=\"token function\">Box<\/span><span class=\"token punctuation\">(<\/span><br \/>\n        modifier <span class=\"token operator\">&#061;<\/span> modifier<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span>size<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        contentAlignment <span class=\"token operator\">&#061;<\/span> Alignment<span class=\"token punctuation\">.<\/span>Center<br \/>\n    <span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token function\">Canvas<\/span><span class=\"token punctuation\">(<\/span>modifier <span class=\"token operator\">&#061;<\/span> Modifier<span class=\"token punctuation\">.<\/span><span class=\"token function\">fillMaxSize<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">val<\/span> strokePx <span class=\"token operator\">&#061;<\/span> strokeWidth<span class=\"token punctuation\">.<\/span><span class=\"token function\">toPx<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token keyword\">val<\/span> radius <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>size<span class=\"token punctuation\">.<\/span>minDimension <span class=\"token operator\">&#8211;<\/span> strokePx<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token number\">2<\/span><br \/>\n            <span class=\"token keyword\">val<\/span> topLeft <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Offset<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>size<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#8211;<\/span> radius <span class=\"token operator\">*<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>size<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">&#8211;<\/span> radius <span class=\"token operator\">*<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token number\">2<\/span><br \/>\n            <span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token keyword\">val<\/span> arcSize <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Size<\/span><span class=\"token punctuation\">(<\/span>radius <span class=\"token operator\">*<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> radius <span class=\"token operator\">*<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>            <span class=\"token comment\">\/\/ \u80cc\u666f\u73af<\/span><br \/>\n            <span class=\"token function\">drawArc<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                color <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Color<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0xFFE0E0E0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                startAngle <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">&#8211;<\/span><span class=\"token number\">90f<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                sweepAngle <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">360f<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                useCenter <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                style <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Stroke<\/span><span class=\"token punctuation\">(<\/span>width <span class=\"token operator\">&#061;<\/span> strokePx<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                topLeft <span class=\"token operator\">&#061;<\/span> topLeft<span class=\"token punctuation\">,<\/span><br \/>\n                size <span class=\"token operator\">&#061;<\/span> arcSize<br \/>\n            <span class=\"token punctuation\">)<\/span><\/p>\n<p>            <span class=\"token comment\">\/\/ \u8fdb\u5ea6\u73af&#xff1a;\u626b\u63cf\u6e10\u53d8 &#043; \u5706\u89d2\u7aef\u70b9<\/span><br \/>\n            <span class=\"token keyword\">val<\/span> brush <span class=\"token operator\">&#061;<\/span> Brush<span class=\"token punctuation\">.<\/span><span class=\"token function\">sweepGradient<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                <span class=\"token number\">0.0f<\/span> <span class=\"token keyword\">to<\/span> <span class=\"token function\">Color<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0xFF2196F3<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                <span class=\"token number\">0.5f<\/span> <span class=\"token keyword\">to<\/span> <span class=\"token function\">Color<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0xFF9C27B0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                <span class=\"token number\">1.0f<\/span> <span class=\"token keyword\">to<\/span> <span class=\"token function\">Color<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0xFF2196F3<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token function\">drawArc<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                brush <span class=\"token operator\">&#061;<\/span> brush<span class=\"token punctuation\">,<\/span><br \/>\n                startAngle <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">&#8211;<\/span><span class=\"token number\">90f<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                sweepAngle <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">360f<\/span> <span class=\"token operator\">*<\/span> animatedProgress<span class=\"token punctuation\">,<\/span><br \/>\n                useCenter <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                style <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Stroke<\/span><span class=\"token punctuation\">(<\/span>width <span class=\"token operator\">&#061;<\/span> strokePx<span class=\"token punctuation\">,<\/span> cap <span class=\"token operator\">&#061;<\/span> StrokeCap<span class=\"token punctuation\">.<\/span>Round<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                topLeft <span class=\"token operator\">&#061;<\/span> topLeft<span class=\"token punctuation\">,<\/span><br \/>\n                size <span class=\"token operator\">&#061;<\/span> arcSize<br \/>\n            <span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token function\">Text<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            text <span class=\"token operator\">&#061;<\/span> <span class=\"token string-literal singleline\"><span class=\"token string\">&#034;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token expression\"><span class=\"token punctuation\">(<\/span>animatedProgress <span class=\"token operator\">*<\/span> <span class=\"token number\">100<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toInt<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">%&#034;<\/span><\/span><span class=\"token punctuation\">,<\/span><br \/>\n            style <span class=\"token operator\">&#061;<\/span> MaterialTheme<span class=\"token punctuation\">.<\/span>typography<span class=\"token punctuation\">.<\/span>headlineMedium<span class=\"token punctuation\">,<\/span><br \/>\n            fontWeight <span class=\"token operator\">&#061;<\/span> FontWeight<span class=\"token punctuation\">.<\/span>Bold<br \/>\n        <span class=\"token punctuation\">)<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>\u8bbe\u8ba1\u8981\u70b9&#xff1a;Brush.sweepGradient \u914d\u5408 drawArc \u505a\u51fa\u6e10\u53d8\u5706\u73af&#xff1b;StrokeCap.Round \u8ba9\u5f27\u7684\u4e24\u7aef\u5706\u6da6&#xff1b;animateFloatAsState \u8ba9\u8fdb\u5ea6\u5e73\u6ed1\u8fc7\u6e21\u3002<\/p>\n<h4>7.2 \u6298\u7ebf\u56fe<\/h4>\n<p><span class=\"token annotation builtin\">&#064;Composable<\/span><br \/>\n<span class=\"token keyword\">fun<\/span> <span class=\"token function\">LineChart<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    <span class=\"token keyword\">data<\/span><span class=\"token operator\">:<\/span> List<span class=\"token operator\">&lt;<\/span>Float<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    modifier<span class=\"token operator\">:<\/span> Modifier <span class=\"token operator\">&#061;<\/span> Modifier<br \/>\n<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">Canvas<\/span><span class=\"token punctuation\">(<\/span>modifier <span class=\"token operator\">&#061;<\/span> modifier<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">data<\/span><span class=\"token punctuation\">.<\/span>size <span class=\"token operator\">&lt;<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span><span class=\"token label symbol\">&#064;Canvas<\/span><\/p>\n<p>        <span class=\"token keyword\">val<\/span> maxValue <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">data<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">max<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">coerceAtLeast<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">1f<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token keyword\">val<\/span> minValue <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">data<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">min<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">coerceAtMost<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0f<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token keyword\">val<\/span> range <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span>maxValue <span class=\"token operator\">&#8211;<\/span> minValue<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">coerceAtLeast<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">1f<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token keyword\">val<\/span> stepX <span class=\"token operator\">&#061;<\/span> size<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">\/<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">data<\/span><span class=\"token punctuation\">.<\/span>size <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token keyword\">val<\/span> padding <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">24f<\/span><\/p>\n<p>        <span class=\"token keyword\">val<\/span> points <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">data<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">mapIndexed<\/span> <span class=\"token punctuation\">{<\/span> i<span class=\"token punctuation\">,<\/span> v <span class=\"token operator\">-&gt;<\/span><br \/>\n            <span class=\"token function\">Offset<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                x <span class=\"token operator\">&#061;<\/span> i <span class=\"token operator\">*<\/span> stepX<span class=\"token punctuation\">,<\/span><br \/>\n                y <span class=\"token operator\">&#061;<\/span> padding <span class=\"token operator\">&#043;<\/span> <span class=\"token punctuation\">(<\/span>size<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">&#8211;<\/span> padding <span class=\"token operator\">*<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span><br \/>\n                    <span class=\"token punctuation\">(<\/span><span class=\"token number\">1<\/span> <span class=\"token operator\">&#8211;<\/span> <span class=\"token punctuation\">(<\/span>v <span class=\"token operator\">&#8211;<\/span> minValue<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">\/<\/span> range<span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u9762\u79ef\u586b\u5145<\/span><br \/>\n        <span class=\"token keyword\">val<\/span> fillPath <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Path<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">apply<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token function\">moveTo<\/span><span class=\"token punctuation\">(<\/span>points<span class=\"token punctuation\">.<\/span><span class=\"token function\">first<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span>x<span class=\"token punctuation\">,<\/span> size<span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">)<\/span><br \/>\n            points<span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token function\">lineTo<\/span><span class=\"token punctuation\">(<\/span>it<span class=\"token punctuation\">.<\/span>x<span class=\"token punctuation\">,<\/span> it<span class=\"token punctuation\">.<\/span>y<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token function\">lineTo<\/span><span class=\"token punctuation\">(<\/span>points<span class=\"token punctuation\">.<\/span><span class=\"token function\">last<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span>x<span class=\"token punctuation\">,<\/span> size<span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token function\">close<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token function\">drawPath<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            path <span class=\"token operator\">&#061;<\/span> fillPath<span class=\"token punctuation\">,<\/span><br \/>\n            brush <span class=\"token operator\">&#061;<\/span> Brush<span class=\"token punctuation\">.<\/span><span class=\"token function\">verticalGradient<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                <span class=\"token function\">listOf<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                    <span class=\"token function\">Color<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0xFF2196F3<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">copy<\/span><span class=\"token punctuation\">(<\/span>alpha <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0.4f<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                    Color<span class=\"token punctuation\">.<\/span>Transparent<br \/>\n                <span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">)<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u6298\u7ebf&#xff1a;\u7528\u4e09\u6b21\u8d1d\u585e\u5c14\u505a\u5e73\u6ed1<\/span><br \/>\n        <span class=\"token keyword\">val<\/span> linePath <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Path<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">apply<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token function\">moveTo<\/span><span class=\"token punctuation\">(<\/span>points<span class=\"token punctuation\">.<\/span><span class=\"token function\">first<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span>x<span class=\"token punctuation\">,<\/span> points<span class=\"token punctuation\">.<\/span><span class=\"token function\">first<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span>y<span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>i <span class=\"token keyword\">in<\/span> <span class=\"token number\">1<\/span> until points<span class=\"token punctuation\">.<\/span>size<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token keyword\">val<\/span> prev <span class=\"token operator\">&#061;<\/span> points<span class=\"token punctuation\">[<\/span>i <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">]<\/span><br \/>\n                <span class=\"token keyword\">val<\/span> curr <span class=\"token operator\">&#061;<\/span> points<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><br \/>\n                <span class=\"token keyword\">val<\/span> midX <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span>prev<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#043;<\/span> curr<span class=\"token punctuation\">.<\/span>x<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token number\">2<\/span><br \/>\n                <span class=\"token function\">cubicTo<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                    midX<span class=\"token punctuation\">,<\/span> prev<span class=\"token punctuation\">.<\/span>y<span class=\"token punctuation\">,<\/span><br \/>\n                    midX<span class=\"token punctuation\">,<\/span> curr<span class=\"token punctuation\">.<\/span>y<span class=\"token punctuation\">,<\/span><br \/>\n                    curr<span class=\"token punctuation\">.<\/span>x<span class=\"token punctuation\">,<\/span> curr<span class=\"token punctuation\">.<\/span>y<br \/>\n                <span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token function\">drawPath<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            path <span class=\"token operator\">&#061;<\/span> linePath<span class=\"token punctuation\">,<\/span><br \/>\n            color <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Color<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0xFF2196F3<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            style <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Stroke<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                width <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">3<\/span><span class=\"token punctuation\">.<\/span>dp<span class=\"token punctuation\">.<\/span><span class=\"token function\">toPx<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                cap <span class=\"token operator\">&#061;<\/span> StrokeCap<span class=\"token punctuation\">.<\/span>Round<span class=\"token punctuation\">,<\/span><br \/>\n                join <span class=\"token operator\">&#061;<\/span> StrokeJoin<span class=\"token punctuation\">.<\/span>Round<br \/>\n            <span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">)<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u62d0\u70b9<\/span><br \/>\n        points<span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span> <span class=\"token punctuation\">{<\/span> point <span class=\"token operator\">-&gt;<\/span><br \/>\n            <span class=\"token function\">drawCircle<\/span><span class=\"token punctuation\">(<\/span>Color<span class=\"token punctuation\">.<\/span>White<span class=\"token punctuation\">,<\/span> radius <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">6<\/span><span class=\"token punctuation\">.<\/span>dp<span class=\"token punctuation\">.<\/span><span class=\"token function\">toPx<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> center <span class=\"token operator\">&#061;<\/span> point<span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token function\">drawCircle<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                color <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Color<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0xFF2196F3<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                radius <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">6<\/span><span class=\"token punctuation\">.<\/span>dp<span class=\"token punctuation\">.<\/span><span class=\"token function\">toPx<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                center <span class=\"token operator\">&#061;<\/span> point<span class=\"token punctuation\">,<\/span><br \/>\n                style <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Stroke<\/span><span class=\"token punctuation\">(<\/span>width <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">.<\/span>dp<span class=\"token punctuation\">.<\/span><span class=\"token function\">toPx<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>\u8bbe\u8ba1\u8981\u70b9&#xff1a;\u9762\u79ef\u586b\u5145\u7528 verticalGradient \u4ece\u534a\u900f\u660e\u5230\u900f\u660e&#xff1b;\u6298\u7ebf\u7528 cubicTo \u5e73\u6ed1&#xff0c;\u63a7\u5236\u70b9\u53d6\u524d\u540e\u70b9\u7684\u4e2d\u70b9&#xff0c;\u907f\u514d\u8fc7\u51b2&#xff1b;\u62d0\u70b9\u7528\u767d\u5e95\u84dd\u8fb9\u7684\u5c0f\u5706\u3002<\/p>\n<h4>7.3 \u81ea\u5b9a\u4e49\u6807\u7b7e Shape<\/h4>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token function\">TagShape<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    <span class=\"token keyword\">private<\/span> <span class=\"token keyword\">val<\/span> cutSize<span class=\"token operator\">:<\/span> Dp <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">8<\/span><span class=\"token punctuation\">.<\/span>dp<br \/>\n<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">:<\/span> Shape <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">override<\/span> <span class=\"token keyword\">fun<\/span> <span class=\"token function\">createOutline<\/span><span class=\"token punctuation\">(<\/span><br \/>\n        size<span class=\"token operator\">:<\/span> Size<span class=\"token punctuation\">,<\/span><br \/>\n        layoutDirection<span class=\"token operator\">:<\/span> LayoutDirection<span class=\"token punctuation\">,<\/span><br \/>\n        density<span class=\"token operator\">:<\/span> Density<br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token operator\">:<\/span> Outline <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">val<\/span> cut <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">with<\/span><span class=\"token punctuation\">(<\/span>density<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span> cutSize<span class=\"token punctuation\">.<\/span><span class=\"token function\">toPx<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token keyword\">val<\/span> path <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Path<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">apply<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token function\">moveTo<\/span><span class=\"token punctuation\">(<\/span>cut<span class=\"token punctuation\">,<\/span> <span class=\"token number\">0f<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token function\">lineTo<\/span><span class=\"token punctuation\">(<\/span>size<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#8211;<\/span> cut<span class=\"token punctuation\">,<\/span> <span class=\"token number\">0f<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token function\">lineTo<\/span><span class=\"token punctuation\">(<\/span>size<span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">,<\/span> cut<span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token function\">lineTo<\/span><span class=\"token punctuation\">(<\/span>size<span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">,<\/span> size<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">&#8211;<\/span> cut<span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token function\">lineTo<\/span><span class=\"token punctuation\">(<\/span>size<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#8211;<\/span> cut<span class=\"token punctuation\">,<\/span> size<span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token function\">lineTo<\/span><span class=\"token punctuation\">(<\/span>cut<span class=\"token punctuation\">,<\/span> size<span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token function\">lineTo<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0f<\/span><span class=\"token punctuation\">,<\/span> size<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">&#8211;<\/span> cut<span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token function\">lineTo<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0f<\/span><span class=\"token punctuation\">,<\/span> cut<span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token function\">close<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> Outline<span class=\"token punctuation\">.<\/span><span class=\"token function\">Generic<\/span><span class=\"token punctuation\">(<\/span>path<span class=\"token punctuation\">)<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token annotation builtin\">&#064;Composable<\/span><br \/>\n<span class=\"token keyword\">fun<\/span> <span class=\"token function\">Tag<\/span><span class=\"token punctuation\">(<\/span>text<span class=\"token operator\">:<\/span> String<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">Text<\/span><span class=\"token punctuation\">(<\/span><br \/>\n        text <span class=\"token operator\">&#061;<\/span> text<span class=\"token punctuation\">,<\/span><br \/>\n        modifier <span class=\"token operator\">&#061;<\/span> Modifier<br \/>\n            <span class=\"token punctuation\">.<\/span><span class=\"token function\">clip<\/span><span class=\"token punctuation\">(<\/span><span class=\"token function\">TagShape<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token punctuation\">.<\/span><span class=\"token function\">background<\/span><span class=\"token punctuation\">(<\/span>MaterialTheme<span class=\"token punctuation\">.<\/span>colorScheme<span class=\"token punctuation\">.<\/span>primaryContainer<span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token punctuation\">.<\/span><span class=\"token function\">padding<\/span><span class=\"token punctuation\">(<\/span>horizontal <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">12<\/span><span class=\"token punctuation\">.<\/span>dp<span class=\"token punctuation\">,<\/span> vertical <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">6<\/span><span class=\"token punctuation\">.<\/span>dp<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        color <span class=\"token operator\">&#061;<\/span> MaterialTheme<span class=\"token punctuation\">.<\/span>colorScheme<span class=\"token punctuation\">.<\/span>onPrimaryContainer<span class=\"token punctuation\">,<\/span><br \/>\n        style <span class=\"token operator\">&#061;<\/span> MaterialTheme<span class=\"token punctuation\">.<\/span>typography<span class=\"token punctuation\">.<\/span>labelMedium<br \/>\n    <span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>\u8bbe\u8ba1\u8981\u70b9&#xff1a;\u5207\u89d2\u6807\u7b7e\u662f\u201c\u516b\u8fb9\u5f62\u201d&#xff0c;\u6bcf\u4e2a\u89d2\u5207\u6389\u4e00\u4e2a\u5c0f\u4e09\u89d2\u5f62\u3002Path \u7684\u516b\u4e2a\u9876\u70b9\u987a\u5e8f\u63cf\u8ff0\u6e05\u695a\u5373\u53ef\u3002Outline.Generic \u8ba9 clip \u548c background \u90fd\u6cbf\u7740\u8fd9\u4e2a\u5f62\u72b6\u751f\u6548\u3002<\/p>\n<h3>\u516b\u3001\u5e38\u89c1\u9677\u9631\u901f\u67e5<\/h3>\n<table>\n<tr>\u9677\u9631\u771f\u5b9e\u573a\u666f\u540e\u679c\u89e3\u6cd5<\/tr>\n<tbody>\n<tr>\n<td>\u7ed8\u5236\u4e2d\u6bcf\u5e27\u521b\u5efa Path<\/td>\n<td>Canvas \u91cc Path().apply { }<\/td>\n<td>GC \u9891\u7e41&#xff0c;\u6389\u5e27<\/td>\n<td>\u7528 drawWithCache \u7f13\u5b58<\/td>\n<\/tr>\n<tr>\n<td>dp\/px \u6df7\u7528<\/td>\n<td>strokeWidth &#061; 4f \u5f53\u6210 dp<\/td>\n<td>\u7ebf\u592a\u7ec6\u6216\u592a\u7c97<\/td>\n<td>\u7528 4.dp.toPx()<\/td>\n<\/tr>\n<tr>\n<td>\u5750\u6807\u7b97\u9519<\/td>\n<td>\u5706\u5fc3\u7528\u4e86 (width\/2, height\/2) \u4f46\u753b\u5e03\u4e0d\u662f\u6b63\u65b9\u5f62<\/td>\n<td>\u5706\u504f\u4e86<\/td>\n<td>\u7528 size.minDimension \u7b97\u534a\u5f84<\/td>\n<\/tr>\n<tr>\n<td>\u6e10\u53d8\u65b9\u5411\u53cd\u4e86<\/td>\n<td>linearGradient \u7684 start\/end \u5199\u53cd<\/td>\n<td>\u989c\u8272\u65b9\u5411\u4e0d\u5bf9<\/td>\n<td>\u660e\u786e\u8d77\u70b9\u548c\u7ec8\u70b9<\/td>\n<\/tr>\n<tr>\n<td>Path.op \u7684\u8def\u5f84\u6ca1\u95ed\u5408<\/td>\n<td>\u5e03\u5c14\u8fd0\u7b97\u7ed3\u679c\u5f02\u5e38<\/td>\n<td>\u5f62\u72b6\u4e0d\u5bf9<\/td>\n<td>\u8fd0\u7b97\u524d\u5148 close()<\/td>\n<\/tr>\n<tr>\n<td>\u81ea\u5b9a\u4e49 Shape \u8fd4\u56de Outline.Rectangle<\/td>\n<td>\u5fd8\u4e86\u8fd4\u56de Generic(path)<\/td>\n<td>\u88c1\u526a\u65e0\u6548<\/td>\n<td>\u7528 Outline.Generic(path)<\/td>\n<\/tr>\n<tr>\n<td>\u52a8\u753b\u503c\u5728\u7ec4\u5408\u9636\u6bb5\u8bfb<\/td>\n<td>Modifier.offset(x &#061; animatedX.dp)<\/td>\n<td>\u6bcf\u5e27\u91cd\u7ec4<\/td>\n<td>\u7528 Modifier.offset { } lambda<\/td>\n<\/tr>\n<tr>\n<td>drawArc \u7684 topLeft\/size \u6ca1\u7b97\u5bf9<\/td>\n<td>\u5f27\u753b\u5230\u753b\u5e03\u5916\u9762<\/td>\n<td>\u53ea\u770b\u5230\u4e00\u90e8\u5206<\/td>\n<td>\u7528 radius \u53cd\u63a8 topLeft \u548c size<\/td>\n<\/tr>\n<tr>\n<td>\u8d1d\u585e\u5c14\u63a7\u5236\u70b9\u4e71\u653e<\/td>\n<td>\u66f2\u7ebf\u8fc7\u51b2\u6216\u6253\u7ed3<\/td>\n<td>\u89c6\u89c9\u4e0d\u81ea\u7136<\/td>\n<td>\u63a7\u5236\u70b9\u53d6\u524d\u540e\u70b9\u7684\u4e2d\u70b9<\/td>\n<\/tr>\n<tr>\n<td>BlendMode.DstOut \u987a\u5e8f\u53cd\u4e86<\/td>\n<td>\u6316\u7a7a\u6548\u679c\u4e0d\u5bf9<\/td>\n<td>\u5168\u9ed1\u6216\u5168\u900f\u660e<\/td>\n<td>\u5148\u753b\u906e\u7f69&#xff0c;\u518d\u7528 DstOut \u6316<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>\u4e5d\u3001\u601d\u7ef4\u6a21\u578b&#xff1a;\u7ed8\u5236\u7684\u201c\u4e09\u5c42\u534f\u8c03\u201d<\/h3>\n<p>\u7b2c\u4e00\u5c42&#xff1a;\u5f62\u72b6\u3002 Path \u5b9a\u4e49\u201c\u753b\u4ec0\u4e48\u201d&#xff0c;Shape \u5b9a\u4e49\u201c\u7ec4\u4ef6\u7684\u53ef\u89c1\u533a\u57df\u201d\u3002\u8d1d\u585e\u5c14\u66f2\u7ebf\u8ba9\u5f62\u72b6\u81ea\u7136&#xff0c;\u5e03\u5c14\u8fd0\u7b97\u8ba9\u5f62\u72b6\u590d\u6742&#xff0c;\u81ea\u5b9a\u4e49 Shape \u8ba9 clip\/background\/border \u90fd\u8ddf\u7740\u5f62\u72b6\u8d70\u3002<\/p>\n<p>\u7b2c\u4e8c\u5c42&#xff1a;\u989c\u8272\u3002 Brush \u5b9a\u4e49\u201c\u600e\u4e48\u4e0a\u8272\u201d\u3002\u7ebf\u6027\u6e10\u53d8\u3001\u5f84\u5411\u6e10\u53d8\u3001\u626b\u63cf\u6e10\u53d8\u8986\u76d6\u5927\u591a\u6570\u573a\u666f\u3002BlendMode \u5b9a\u4e49\u201c\u56fe\u5c42\u600e\u4e48\u53cd\u5e94\u201d&#xff0c;DstOut \u505a\u6316\u7a7a&#xff0c;Multiply \u505a\u6b63\u7247\u53e0\u5e95\u3002<\/p>\n<p>\u7b2c\u4e09\u5c42&#xff1a;\u52a8\u753b\u3002 \u7ed8\u5236 lambda \u6bcf\u5e27\u6267\u884c&#xff0c;\u52a8\u753b\u72b6\u6001\u9a71\u52a8\u7ed8\u5236\u53c2\u6570&#xff0c;\u753b\u9762\u5c31\u52a8\u8d77\u6765\u3002rememberInfiniteTransition \u505a\u5faa\u73af\u52a8\u753b&#xff0c;animateFloatAsState \u505a\u72b6\u6001\u8fc7\u6e21\u3002<\/p>\n<p>\u8d2f\u7a7f\u59cb\u7ec8\u7684\u539f\u5219&#xff1a;\u8ba1\u7b97\u63d0\u524d&#xff0c;\u7ed8\u5236\u8f7b\u91cf\u3002 Path\u3001Brush\u3001Shader \u80fd\u7f13\u5b58\u7684\u90fd\u7f13\u5b58&#xff0c;\u7ed8\u5236 lambda \u91cc\u53ea\u505a\u201c\u753b\u201d\u8fd9\u4e2a\u52a8\u4f5c&#xff0c;\u4e0d\u505a\u201c\u7b97\u201d\u8fd9\u4e2a\u52a8\u4f5c\u3002\u50cf\u7d20\u7ea7\u63a7\u5236\u7684\u524d\u63d0\u662f\u50cf\u7d20\u7ea7\u6027\u80fd\u3002<\/p>\n<p>\u7ed8\u5236\u7684\u201c\u4e09\u5c42\u534f\u8c03\u201d\u601d\u7ef4\u6a21\u578b&#xff0c;\u7528\u4e00\u5f20\u56fe\u4e32\u8d77\u6765&#xff1a;<\/p>\n<p>  #mermaid-svg-3Ff9caLXZnT9aQan{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-3Ff9caLXZnT9aQan .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-3Ff9caLXZnT9aQan .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-3Ff9caLXZnT9aQan .error-icon{fill:#552222;}#mermaid-svg-3Ff9caLXZnT9aQan .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-3Ff9caLXZnT9aQan .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-3Ff9caLXZnT9aQan .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-3Ff9caLXZnT9aQan .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-3Ff9caLXZnT9aQan .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-3Ff9caLXZnT9aQan .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-3Ff9caLXZnT9aQan .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-3Ff9caLXZnT9aQan .marker{fill:#333333;stroke:#333333;}#mermaid-svg-3Ff9caLXZnT9aQan .marker.cross{stroke:#333333;}#mermaid-svg-3Ff9caLXZnT9aQan svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-3Ff9caLXZnT9aQan p{margin:0;}#mermaid-svg-3Ff9caLXZnT9aQan .label{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;color:#333;}#mermaid-svg-3Ff9caLXZnT9aQan .cluster-label text{fill:#333;}#mermaid-svg-3Ff9caLXZnT9aQan .cluster-label span{color:#333;}#mermaid-svg-3Ff9caLXZnT9aQan .cluster-label span p{background-color:transparent;}#mermaid-svg-3Ff9caLXZnT9aQan .label text,#mermaid-svg-3Ff9caLXZnT9aQan span{fill:#333;color:#333;}#mermaid-svg-3Ff9caLXZnT9aQan .node rect,#mermaid-svg-3Ff9caLXZnT9aQan .node circle,#mermaid-svg-3Ff9caLXZnT9aQan .node ellipse,#mermaid-svg-3Ff9caLXZnT9aQan .node polygon,#mermaid-svg-3Ff9caLXZnT9aQan .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-3Ff9caLXZnT9aQan .rough-node .label text,#mermaid-svg-3Ff9caLXZnT9aQan .node .label text,#mermaid-svg-3Ff9caLXZnT9aQan .image-shape .label,#mermaid-svg-3Ff9caLXZnT9aQan .icon-shape .label{text-anchor:middle;}#mermaid-svg-3Ff9caLXZnT9aQan .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-3Ff9caLXZnT9aQan .rough-node .label,#mermaid-svg-3Ff9caLXZnT9aQan .node .label,#mermaid-svg-3Ff9caLXZnT9aQan .image-shape .label,#mermaid-svg-3Ff9caLXZnT9aQan .icon-shape .label{text-align:center;}#mermaid-svg-3Ff9caLXZnT9aQan .node.clickable{cursor:pointer;}#mermaid-svg-3Ff9caLXZnT9aQan .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-3Ff9caLXZnT9aQan .arrowheadPath{fill:#333333;}#mermaid-svg-3Ff9caLXZnT9aQan .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-3Ff9caLXZnT9aQan .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-3Ff9caLXZnT9aQan .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-3Ff9caLXZnT9aQan .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-3Ff9caLXZnT9aQan .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-3Ff9caLXZnT9aQan .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-3Ff9caLXZnT9aQan .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-3Ff9caLXZnT9aQan .cluster text{fill:#333;}#mermaid-svg-3Ff9caLXZnT9aQan .cluster span{color:#333;}#mermaid-svg-3Ff9caLXZnT9aQan div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-3Ff9caLXZnT9aQan .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-3Ff9caLXZnT9aQan rect.text{fill:none;stroke-width:0;}#mermaid-svg-3Ff9caLXZnT9aQan .icon-shape,#mermaid-svg-3Ff9caLXZnT9aQan .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-3Ff9caLXZnT9aQan .icon-shape p,#mermaid-svg-3Ff9caLXZnT9aQan .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-3Ff9caLXZnT9aQan .icon-shape .label rect,#mermaid-svg-3Ff9caLXZnT9aQan .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-3Ff9caLXZnT9aQan .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-3Ff9caLXZnT9aQan .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-3Ff9caLXZnT9aQan :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}<\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>           <span class=\"nodeLabel\"><\/p>\n<p>\u7b2c\u4e09\u5c42&#xff1a;\u52a8\u753b<\/p>\n<p><\/span><\/p>\n<p>           <span class=\"nodeLabel\"><\/p>\n<p>\u7ed8\u5236 lambda \u6bcf\u5e27\u6267\u884c<\/p>\n<p><\/span><\/p>\n<p>           <span class=\"nodeLabel\"><\/p>\n<p>\u52a8\u753b\u72b6\u6001\u9a71\u52a8\u7ed8\u5236\u53c2\u6570<\/p>\n<p><\/span><\/p>\n<p>           <span class=\"nodeLabel\"><\/p>\n<p>\u7b2c\u4e8c\u5c42&#xff1a;\u989c\u8272<\/p>\n<p><\/span><\/p>\n<p>           <span class=\"nodeLabel\"><\/p>\n<p>Brush \u5b9a\u4e49\u600e\u4e48\u4e0a\u8272<\/p>\n<p><\/span><\/p>\n<p>           <span class=\"nodeLabel\"><\/p>\n<p>BlendMode \u5b9a\u4e49\u56fe\u5c42\u53cd\u5e94<\/p>\n<p><\/span><\/p>\n<p>           <span class=\"nodeLabel\"><\/p>\n<p>\u7b2c\u4e00\u5c42&#xff1a;\u5f62\u72b6<\/p>\n<p><\/span><\/p>\n<p>           <span class=\"nodeLabel\"><\/p>\n<p>Path \u5b9a\u4e49\u753b\u4ec0\u4e48<\/p>\n<p><\/span><\/p>\n<p>           <span class=\"nodeLabel\"><\/p>\n<p>Shape \u5b9a\u4e49\u53ef\u89c1\u533a\u57df<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u8d2f\u7a7f\u539f\u5219&#xff1a;\u8ba1\u7b97\u63d0\u524d&#xff0c;\u7ed8\u5236\u8f7b\u91cf<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>drawWithCache \u7f13\u5b58 Path \/ Brush \/ Shader<\/p>\n<p><\/span><\/p>\n<h3>\u5341\u3001\u5c0f\u7ed3\u4e0e\u4e0b\u4e00\u8bfe\u9884\u544a<\/h3>\n<p>\u8fd9\u4e00\u8bfe\u6211\u4eec\u628a\u81ea\u5b9a\u4e49\u7ed8\u5236\u4ece\u201c\u753b\u4e2a\u5706\u201d\u63d0\u5347\u5230\u4e86\u201c\u753b\u590d\u6742\u56fe\u8868\u548c\u89c6\u89c9\u6548\u679c\u201d\u3002\u5173\u952e\u70b9\u56de\u987e&#xff1a;<\/p>\n<ul>\n<li>\u56db\u4e2a\u7ed8\u5236\u5165\u53e3&#xff1a;Canvas\u3001drawBehind\u3001drawWithContent\u3001drawWithCache\u3002\u590d\u6742\u56fe\u5f62\u4f18\u5148\u7528 drawWithCache \u7f13\u5b58\u3002<\/li>\n<li>Path \u8fdb\u9636&#xff1a;cubicTo \u753b\u8d1d\u585e\u5c14\u66f2\u7ebf&#xff0c;arcTo \u62fc\u5f27\u7ebf&#xff0c;Path.op \u505a\u5e03\u5c14\u8fd0\u7b97&#xff08;\u5e76\u96c6\u3001\u4ea4\u96c6\u3001\u5dee\u96c6\u3001\u5f02\u6216&#xff09;\u3002<\/li>\n<li>Brush \u8fdb\u9636&#xff1a;\u591a\u8272\u505c\u9760\u70b9\u3001TileMode\u3001\u626b\u63cf\u6e10\u53d8\u505a\u73af\u5f62\u8fdb\u5ea6\u6761\u3002<\/li>\n<li>BlendMode&#xff1a;Multiply \u6b63\u7247\u53e0\u5e95\u3001Screen \u6ee4\u8272\u3001DstOut \u6316\u7a7a\u3002<\/li>\n<li>\u81ea\u5b9a\u4e49 Shape&#xff1a;\u5b9e\u73b0 createOutline \u8fd4\u56de Outline.Generic(path)&#xff0c;\u914d\u5408 clip\/background\/border \u4f7f\u7528\u3002<\/li>\n<li>\u52a8\u753b\u9a71\u52a8\u7ed8\u5236&#xff1a;rememberInfiniteTransition \u505a\u5faa\u73af\u52a8\u753b&#xff0c;animateFloatAsState \u505a\u8fdb\u5ea6\u52a8\u753b\u3002\u7ed8\u5236 lambda \u6bcf\u5e27\u6267\u884c&#xff0c;\u4f9d\u8d56\u52a8\u753b\u72b6\u6001\u5c31\u4f1a\u52a8\u3002<\/li>\n<li>\u6027\u80fd\u8981\u70b9&#xff1a;\u4e0d\u5728\u7ed8\u5236 lambda \u91cc\u521b\u5efa\u5bf9\u8c61&#xff0c;\u7528 drawWithCache \u7f13\u5b58 Path\/Brush&#xff0c;\u7528 lambda \u7248 Modifier.offset \u907f\u514d\u91cd\u7ec4\u3002<\/li>\n<\/ul>\n<p>\u81ea\u5b9a\u4e49\u7ed8\u5236\u662f Compose \u7684\u201c\u50cf\u7d20\u7ea7\u63a7\u5236\u6743\u201d\u3002 \u7ec4\u4ef6\u62fc\u4e0d\u51fa\u6765\u7684\u4e1c\u897f&#xff0c;Canvas \u90fd\u80fd\u753b\u3002\u4ee3\u4ef7\u662f\u4f60\u5f97\u81ea\u5df1\u7b97\u5750\u6807\u3001\u81ea\u5df1\u63a7\u6027\u80fd\u3002\u7b97\u5bf9\u4e86\u3001\u63a7\u597d\u4e86&#xff0c;\u4f60\u5c31\u80fd\u505a\u51fa\u522b\u4eba\u505a\u4e0d\u51fa\u6765\u7684\u89c6\u89c9\u6548\u679c\u3002<\/p>\n<p>\u4e0b\u4e00\u8bfe&#xff0c;\u6211\u4eec\u4f1a\u8bb2Compose\u4e2d\u7684\u81ea\u5b9a\u4e49Layout\u4e0e\u6d4b\u91cf\u3002Layout \u53ef\u7ec4\u5408\u51fd\u6570\u600e\u4e48\u81ea\u5b9a\u4e49\u6d4b\u91cf\u548c\u653e\u7f6e&#xff1f;MeasurePolicy \u600e\u4e48\u5199&#xff1f;IntrinsicSize \u662f\u4ec0\u4e48&#xff1f;\u6d41\u5f0f\u5e03\u5c40&#xff08;FlowRow\/FlowColumn&#xff09;\u600e\u4e48\u81ea\u5df1\u5b9e\u73b0&#xff1f;\u8fd9\u662f\u628a Compose \u4ece\u201c\u7528\u5e03\u5c40\u201d\u63d0\u5347\u5230\u201c\u9020\u5e03\u5c40\u201d\u7684\u5173\u952e\u4e00\u8bfe\u3002<\/p>\n<p>\u8bfe\u540e\u7ec3\u4e60\u5efa\u8bae&#xff1a;\u627e\u4e00\u4e2a\u4f60\u89c9\u5f97\u201c\u7528\u7ec4\u4ef6\u62fc\u5f88\u522b\u626d\u201d\u7684 UI&#xff0c;\u8bd5\u7740\u7528 Canvas \u753b\u51fa\u6765\u3002\u6bd4\u5982\u4e00\u4e2a\u5e26\u6e10\u53d8\u548c\u5706\u89d2\u7aef\u70b9\u7684\u73af\u5f62\u8fdb\u5ea6\u6761&#xff0c;\u6216\u8005\u4e00\u4e2a\u5e26\u9762\u79ef\u586b\u5145\u7684\u6298\u7ebf\u56fe\u3002\u5148\u753b\u9759\u6001\u7684&#xff0c;\u518d\u8ba9\u5b83\u52a8\u8d77\u6765\u3002\u753b\u5b8c\u4e4b\u540e&#xff0c;\u7528 drawWithCache \u4f18\u5316\u4e00\u4e0b&#xff0c;\u770b\u770b\u5e27\u7387\u6709\u6ca1\u6709\u63d0\u5347\u3002\u4f60\u4f1a\u53d1\u73b0&#xff0c;\u50cf\u7d20\u7ea7\u63a7\u5236\u7684\u611f\u89c9&#xff0c;\u548c\u62fc\u7ec4\u4ef6\u5b8c\u5168\u4e0d\u4e00\u6837\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6458\u8981 \u5f53\u73b0\u6210\u7ec4\u4ef6\u62fc\u4e0d\u51fa\u8bbe\u8ba1\u56fe\u4e0a\u7684\u5706\u73af\u8fdb\u5ea6\u6761\u3001\u6e10\u53d8\u6298\u7ebf\u56fe\u548c\u4e0d\u89c4\u5219\u6807\u7b7e\u65f6&#xff0c;\u5c31\u8be5\u8f6e\u5230 Compose \u7684\u81ea\u5b9a\u4e49\u7ed8\u5236\u767b\u573a\u4e86\u3002\u672c\u6587\u4ece DrawScope \u7684\u56db\u4e2a\u7ed8\u5236\u5165\u53e3\u8bb2\u8d77&#xff0c;\u6df1\u5165 Path \u7684\u8d1d\u585e\u5c14\u66f2\u7ebf\u3001\u5f27\u7ebf\u4e0e\u5e03\u5c14\u8fd0\u7b97&#xff0c;Brush \u7684\u591a\u8272\u6e10\u53d8\u3001BlendMode \u6df7\u5408\u4e0e\u81ea\u5b9a\u4e49 Shader&#xff0c;\u518d\u5230\u81ea\u5b9a\u4e49 Shape \u4e0e\u52a8\u753b\u9a71\u52a8\u7ed8\u5236&#xff0c;\u6700\u540e\u7528\u4e00\u4e2a\\&#8221;\u4f1a\u547c\u5438\\&#8221;\u7684\u6570\u636e\u770b\u677f\u628a\u77e5\u8bc6\u4e32\u6210\u5b9e\u6218&#xff0c;\u5e76\u9644\u4e0a\u5e38\u89c1\u9677\u9631\u901f\u67e5\u4e0e\\&#8221;\u5f62\u72b6\u2014<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[84,5754,1693,780,4052],"topic":[],"class_list":["post-123461","post","type-post","status-publish","format-standard","hentry","category-server","tag-android","tag-android-jetpack","tag-kotlin","tag-ui","tag-4052"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u3010Jetpack Compose\u5a13\u5a13\u9053\u6765\u3011\u7b2c34\u8bfe\uff1a\u81ea\u5b9a\u4e49\u7ed8\u5236\u4e0e\u56fe\u5f62\u8fdb\u9636\u2014\u2014\u4ece\u201c\u62fc\u7ec4\u4ef6\u201d\u5230\u201c\u63a7\u50cf\u7d20\u201d - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/123461.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u3010Jetpack Compose\u5a13\u5a13\u9053\u6765\u3011\u7b2c34\u8bfe\uff1a\u81ea\u5b9a\u4e49\u7ed8\u5236\u4e0e\u56fe\u5f62\u8fdb\u9636\u2014\u2014\u4ece\u201c\u62fc\u7ec4\u4ef6\u201d\u5230\u201c\u63a7\u50cf\u7d20\u201d - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u6458\u8981 \u5f53\u73b0\u6210\u7ec4\u4ef6\u62fc\u4e0d\u51fa\u8bbe\u8ba1\u56fe\u4e0a\u7684\u5706\u73af\u8fdb\u5ea6\u6761\u3001\u6e10\u53d8\u6298\u7ebf\u56fe\u548c\u4e0d\u89c4\u5219\u6807\u7b7e\u65f6&#xff0c;\u5c31\u8be5\u8f6e\u5230 Compose \u7684\u81ea\u5b9a\u4e49\u7ed8\u5236\u767b\u573a\u4e86\u3002\u672c\u6587\u4ece DrawScope \u7684\u56db\u4e2a\u7ed8\u5236\u5165\u53e3\u8bb2\u8d77&#xff0c;\u6df1\u5165 Path \u7684\u8d1d\u585e\u5c14\u66f2\u7ebf\u3001\u5f27\u7ebf\u4e0e\u5e03\u5c14\u8fd0\u7b97&#xff0c;Brush \u7684\u591a\u8272\u6e10\u53d8\u3001BlendMode \u6df7\u5408\u4e0e\u81ea\u5b9a\u4e49 Shader&#xff0c;\u518d\u5230\u81ea\u5b9a\u4e49 Shape \u4e0e\u52a8\u753b\u9a71\u52a8\u7ed8\u5236&#xff0c;\u6700\u540e\u7528\u4e00\u4e2a&quot;\u4f1a\u547c\u5438&quot;\u7684\u6570\u636e\u770b\u677f\u628a\u77e5\u8bc6\u4e32\u6210\u5b9e\u6218&#xff0c;\u5e76\u9644\u4e0a\u5e38\u89c1\u9677\u9631\u901f\u67e5\u4e0e&quot;\u5f62\u72b6\u2014\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/123461.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-07T02:41:12+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/123461.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/123461.html\",\"name\":\"\u3010Jetpack Compose\u5a13\u5a13\u9053\u6765\u3011\u7b2c34\u8bfe\uff1a\u81ea\u5b9a\u4e49\u7ed8\u5236\u4e0e\u56fe\u5f62\u8fdb\u9636\u2014\u2014\u4ece\u201c\u62fc\u7ec4\u4ef6\u201d\u5230\u201c\u63a7\u50cf\u7d20\u201d - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-11-07T02:41:12+00:00\",\"dateModified\":\"2026-11-07T02:41:12+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/123461.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/123461.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/123461.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u3010Jetpack Compose\u5a13\u5a13\u9053\u6765\u3011\u7b2c34\u8bfe\uff1a\u81ea\u5b9a\u4e49\u7ed8\u5236\u4e0e\u56fe\u5f62\u8fdb\u9636\u2014\u2014\u4ece\u201c\u62fc\u7ec4\u4ef6\u201d\u5230\u201c\u63a7\u50cf\u7d20\u201d\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u3010Jetpack Compose\u5a13\u5a13\u9053\u6765\u3011\u7b2c34\u8bfe\uff1a\u81ea\u5b9a\u4e49\u7ed8\u5236\u4e0e\u56fe\u5f62\u8fdb\u9636\u2014\u2014\u4ece\u201c\u62fc\u7ec4\u4ef6\u201d\u5230\u201c\u63a7\u50cf\u7d20\u201d - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/123461.html","og_locale":"zh_CN","og_type":"article","og_title":"\u3010Jetpack Compose\u5a13\u5a13\u9053\u6765\u3011\u7b2c34\u8bfe\uff1a\u81ea\u5b9a\u4e49\u7ed8\u5236\u4e0e\u56fe\u5f62\u8fdb\u9636\u2014\u2014\u4ece\u201c\u62fc\u7ec4\u4ef6\u201d\u5230\u201c\u63a7\u50cf\u7d20\u201d - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u6458\u8981 \u5f53\u73b0\u6210\u7ec4\u4ef6\u62fc\u4e0d\u51fa\u8bbe\u8ba1\u56fe\u4e0a\u7684\u5706\u73af\u8fdb\u5ea6\u6761\u3001\u6e10\u53d8\u6298\u7ebf\u56fe\u548c\u4e0d\u89c4\u5219\u6807\u7b7e\u65f6&#xff0c;\u5c31\u8be5\u8f6e\u5230 Compose \u7684\u81ea\u5b9a\u4e49\u7ed8\u5236\u767b\u573a\u4e86\u3002\u672c\u6587\u4ece DrawScope \u7684\u56db\u4e2a\u7ed8\u5236\u5165\u53e3\u8bb2\u8d77&#xff0c;\u6df1\u5165 Path \u7684\u8d1d\u585e\u5c14\u66f2\u7ebf\u3001\u5f27\u7ebf\u4e0e\u5e03\u5c14\u8fd0\u7b97&#xff0c;Brush \u7684\u591a\u8272\u6e10\u53d8\u3001BlendMode \u6df7\u5408\u4e0e\u81ea\u5b9a\u4e49 Shader&#xff0c;\u518d\u5230\u81ea\u5b9a\u4e49 Shape \u4e0e\u52a8\u753b\u9a71\u52a8\u7ed8\u5236&#xff0c;\u6700\u540e\u7528\u4e00\u4e2a\"\u4f1a\u547c\u5438\"\u7684\u6570\u636e\u770b\u677f\u628a\u77e5\u8bc6\u4e32\u6210\u5b9e\u6218&#xff0c;\u5e76\u9644\u4e0a\u5e38\u89c1\u9677\u9631\u901f\u67e5\u4e0e\"\u5f62\u72b6\u2014","og_url":"https:\/\/www.wsisp.com\/helps\/123461.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-11-07T02:41:12+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"21 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/123461.html","url":"https:\/\/www.wsisp.com\/helps\/123461.html","name":"\u3010Jetpack Compose\u5a13\u5a13\u9053\u6765\u3011\u7b2c34\u8bfe\uff1a\u81ea\u5b9a\u4e49\u7ed8\u5236\u4e0e\u56fe\u5f62\u8fdb\u9636\u2014\u2014\u4ece\u201c\u62fc\u7ec4\u4ef6\u201d\u5230\u201c\u63a7\u50cf\u7d20\u201d - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-11-07T02:41:12+00:00","dateModified":"2026-11-07T02:41:12+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/123461.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/123461.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/123461.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"\u3010Jetpack Compose\u5a13\u5a13\u9053\u6765\u3011\u7b2c34\u8bfe\uff1a\u81ea\u5b9a\u4e49\u7ed8\u5236\u4e0e\u56fe\u5f62\u8fdb\u9636\u2014\u2014\u4ece\u201c\u62fc\u7ec4\u4ef6\u201d\u5230\u201c\u63a7\u50cf\u7d20\u201d"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/123461","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=123461"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/123461\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=123461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=123461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=123461"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=123461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}