[{"data":1,"prerenderedAt":2057},["ShallowReactive",2],{"blog-taxonomies":3,"blog-stats":507,"post-2025\u002F2025-11-21-web可视化实践canvas":1083},[4,11,16,21,25,29,36,39,44,47,52,58,63,66,71,76,80,84,87,93,96,101,105,110,113,117,122,127,132,136,141,143,146,151,155,157,162,165,169,173,176,179,183,186,190,193,197,200,205,208,211,214,219,222,228,234,237,239,245,249,253,256,260,266,271,276,281,283,287,290,293,298,301,304,306,308,311,314,316,318,321,327,332,337,342,347,352,354,356,358,361,365,367,369,371,374,376,378,381,386,390,393,396,400,404,407,411,413,415,417,421,423,425,428,431,433,435,437,439,441,443,446,448,450,454,456,459,461,463,465,467,469,471,473,477,483,486,488,491,493,495,497,499,501,503,505],{"category":5,"tags":6},"笔记",[7,8,9,10],"QQ","插件","LiteLoader","美化",{"category":12,"tags":13},"其他",[14,15,10],"博客","IP签名",{"category":17,"tags":18},"杂谈",[19,20],"互联网","观点",{"category":5,"tags":22},[14,23,24],"GitHub","数据可视化",{"category":5,"tags":26},[14,27,28],"访问统计","不蒜子",{"category":30,"tags":31},"工具",[32,33,34,35],"Python","爬虫","选课脚本","广州大学",{"category":5,"tags":37},[38,5],"数学分析",{"category":40,"tags":41},"算法",[42,40,43],"数据结构","线性表",{"category":40,"tags":45},[42,46],"复习",{"category":5,"tags":48},[49,50,51],"高等代数","线性代数","知识点",{"category":5,"tags":53},[14,54,55,56,57],"Typora","PicGo","图床","Markdown",{"category":30,"tags":59},[60,61,62],"Jupyter","工具配置","中文",{"category":30,"tags":64},[65,61,10],"VSCode",{"category":30,"tags":67},[68,69,70,35],"路由器","OpenWrt","校园网",{"category":12,"tags":72},[73,74,75],"网络协议","Wireshark","DEVP2P",{"category":5,"tags":77},[73,74,78,79],"Lua","解码器",{"category":5,"tags":81},[82,5,83],"常微分方程","数学",{"category":5,"tags":85},[86,5,83],"概率论",{"category":30,"tags":88},[89,90,91,92],"Docker","WSL","Windows","磁盘清理",{"category":30,"tags":94},[32,33,95,35],"课程表",{"category":5,"tags":97},[14,98,99,100],"Hexo","Gitalk","评论系统",{"category":5,"tags":102},[14,103,98,104],"Obsidian","写作工具",{"category":12,"tags":106},[107,108,109],"课题研究","泊松分布","参数估计",{"category":12,"tags":111},[107,108,109,112],"组会",{"category":12,"tags":114},[109,115,108,116],"IM模型","统计学",{"category":17,"tags":118},[119,120,121],"软考","网络规划","信息系统项目管理",{"category":30,"tags":123},[124,125,126],"Arch Linux","AppImage","Linux",{"category":5,"tags":128},[129,130,131],"编程语言","计算机科学","内存管理",{"category":5,"tags":133},[134,135],"Canvas","前端",{"category":5,"tags":137},[14,138,139,140],"GitHub Actions","Vite","部署",{"category":5,"tags":142},[135],{"category":5,"tags":144},[135,145],"系统设计",{"category":5,"tags":147},[135,148,149,150],"安全","XSS","CSRF",{"category":152,"tags":153},"项目",[134,154],"PixiJS",{"category":152,"tags":156},null,{"category":40,"tags":158},[42,159,160,161],"栈","队列","JavaScript",{"category":40,"tags":163},[42,164,161],"哈希表",{"category":5,"tags":166},[167,161,168],"ES6","Set",{"category":40,"tags":170},[40,171,172],"动态规划","背包问题",{"category":40,"tags":174},[40,175],"滑动窗口",{"category":40,"tags":177},[42,178,161],"链表",{"category":40,"tags":180},[40,181,161,182],"ACM","面试",{"category":40,"tags":184},[40,161,185],"数据类型转换",{"category":40,"tags":187},[42,188,178,189],"顺序表","TypeScript",{"category":5,"tags":191},[135,154,134,192],"渲染",{"category":5,"tags":194},[135,195,134,196],"富文本编辑","wangEditor",{"category":40,"tags":198},[199,40,178],"力扣",{"category":5,"tags":201},[202,203,204,91],"DNS","加密","网络安全",{"category":5,"tags":206},[135,207],"Axios",{"category":5,"tags":209},[135,207,189,210],"接口封装",{"category":5,"tags":212},[135,213,145],"JWT",{"category":152,"tags":215},[134,216,217,154,218],"画布","React","项目开发",{"category":17,"tags":220},[221],"日志",{"category":5,"tags":223},[224,225,226,227],"Neo4j","图数据库","中心度分析","PageRank",{"category":12,"tags":229},[230,231,232,233],"论文","机器学习","随机森林","保险欺诈",{"category":5,"tags":235},[236],"人工智能",{"category":5,"tags":238},[231,40,32],{"category":12,"tags":240},[241,242,243,244],"共识算法","最长链","区块链","算法设计",{"category":5,"tags":246},[161,247,248,135],"闭包","作用域",{"category":5,"tags":250},[14,138,251,252],"RSS","自动化",{"category":30,"tags":254},[89,90,91,255],"安装",{"category":30,"tags":257},[258,91,259],"MSYS2","开发环境",{"category":5,"tags":261},[262,263,264,265],"团队协作","Git","Commit规范","代码审查",{"category":30,"tags":267},[268,269,270],"oh-my-posh","终端美化","CLI",{"category":5,"tags":272},[273,274,275],"上下文工程","Agent","RAG",{"category":5,"tags":277},[278,279,280],"前端工程化","技术选型","工程基建",{"category":5,"tags":282},[275],{"category":5,"tags":284},[285,286],"SDD","规格驱动开发",{"category":5,"tags":288},[289],"neovim",{"category":5,"tags":291},[292],"技术写作",{"category":5,"tags":294},[295,32,296,89,297],"FastAPI","后端","工程实践",{"category":152,"tags":299},[274,300],"Harness Engineering",{"category":5,"tags":302},[303],"RFC",{"category":152,"tags":305},[274,300,275],{"category":152,"tags":307},[274],{"category":40,"tags":309},[199,40,161,310],"两数之和",{"category":40,"tags":312},[199,40,161,313],"双指针",{"category":40,"tags":315},[199,40,161,178],{"category":40,"tags":317},[199,40,161,175],{"category":40,"tags":319},[199,40,161,320],"回溯",{"category":5,"tags":322},[323,324,325,326],"分布式处理与计算","Spark","Scala","RDD",{"category":5,"tags":328},[323,329,330,331],"线性回归","逻辑回归","监督学习",{"category":5,"tags":333},[323,334,335,336],"数值优化","牛顿法","收敛性",{"category":5,"tags":338},[323,339,340,341],"PCA","数据降维","正则化",{"category":5,"tags":343},[323,344,345,346],"聚类","层次聚类","K-Means",{"category":5,"tags":348},[323,349,350,351],"随机模拟","统计推断","EM算法",{"category":5,"tags":353},[24],{"category":5,"tags":355},[24],{"category":5,"tags":357},[24],{"category":40,"tags":359},[42,360],"图论",{"category":40,"tags":362},[42,363,364],"树","二叉树",{"category":40,"tags":366},[42,160],{"category":40,"tags":368},[42],{"category":40,"tags":370},[42,159],{"category":40,"tags":372},[42,40,373],"复杂度分析",{"category":40,"tags":375},[42,43,178],{"category":40,"tags":377},[42,43,188],{"category":40,"tags":379},[42,380],"基础概念",{"category":17,"tags":382},[383,384,385],"随记","照片","高中",{"category":17,"tags":387},[383,388,389],"团建","战地",{"category":17,"tags":391},[383,392],"生活",{"category":17,"tags":394},[383,395],"文学",{"category":17,"tags":397},[383,398,399],"SCP","模因",{"category":17,"tags":401},[383,402,403],"画集","艺术",{"category":17,"tags":405},[14,406,383],"写作",{"category":17,"tags":408},[383,409,410],"音乐","摇滚",{"category":17,"tags":412},[383,392],{"category":17,"tags":414},[383,409],{"category":17,"tags":416},[383,35,392],{"category":17,"tags":418},[383,419,420],"同人","手书",{"category":17,"tags":422},[383,392],{"category":17,"tags":424},[383,392],{"category":17,"tags":426},[383,427],"植物",{"category":17,"tags":429},[383,430],"读书",{"category":17,"tags":432},[383,392],{"category":17,"tags":434},[383,392],{"category":17,"tags":436},[383,392],{"category":17,"tags":438},[383,392],{"category":17,"tags":440},[383,392],{"category":17,"tags":442},[383,392],{"category":17,"tags":444},[14,445,383],"一周年",{"category":17,"tags":447},[383,392],{"category":17,"tags":449},[383,392],{"category":17,"tags":451},[35,452,453],"开源组织","SITE-193",{"category":17,"tags":455},[383,392],{"category":17,"tags":457},[383,458],"年末",{"category":17,"tags":460},[383,392],{"category":17,"tags":462},[383,392],{"category":17,"tags":464},[14,17],{"category":17,"tags":466},[383,392],{"category":17,"tags":468},[383,392],{"category":17,"tags":470},[383,392],{"category":17,"tags":472},[383,392],{"category":17,"tags":474},[383,475,476],"游戏","Control",{"category":30,"tags":478},[479,480,481,482],"Quadim","图像处理","四叉树","Rust",{"category":17,"tags":484},[14,485],"上线纪念",{"category":17,"tags":487},[383,395],{"category":30,"tags":489},[203,490],"测试",{"category":17,"tags":492},[383],{"category":17,"tags":494},[383,392],{"category":17,"tags":496},[383],{"category":5,"tags":498},[40],{"category":5,"tags":500},[40],{"category":5,"tags":502},[40],{"category":5,"tags":504},[40],{"category":5,"tags":506},[40],[508,512,516,520,524,528,532,536,540,544,548,552,556,560,564,568,572,576,579,583,587,590,594,598,602,606,610,614,618,622,626,630,634,638,642,646,650,654,658,662,666,670,674,678,682,686,690,694,698,702,706,710,714,718,722,726,730,734,738,742,746,750,754,758,762,766,770,774,778,782,786,790,794,798,801,805,809,813,817,821,825,829,833,837,841,845,849,853,857,861,865,869,873,877,881,885,889,893,897,901,904,907,911,915,919,923,927,930,934,938,942,946,950,954,957,961,965,969,973,977,981,984,988,992,996,1000,1004,1007,1011,1015,1019,1023,1027,1031,1035,1039,1043,1047,1051,1055,1059,1063,1067,1071,1075,1079],{"path":509,"words":510,"published":511,"date":156},"\u002Fposts\u002F2024\u002F2024-06-25-liteloaderqqnt",1296,"2024-06-25 11:03:08",{"path":513,"words":514,"published":515,"date":156},"\u002Fposts\u002F2024\u002F2024-06-26-ip签名",0,"2024-06-26 22:53:53",{"path":517,"words":518,"published":519,"date":156},"\u002Fposts\u002F2024\u002F2024-06-29-何加盐中文互联网正在加速崩塌",4853,"2024-06-29 00:47:13",{"path":521,"words":522,"published":523,"date":156},"\u002Fposts\u002F2024\u002F2024-07-12-github-chart",270,"2024-07-12 20:02:50",{"path":525,"words":526,"published":527,"date":156},"\u002Fposts\u002F2024\u002F2024-07-14-访客数统计",192,"2024-07-24 01:34:28",{"path":529,"words":530,"published":531,"date":156},"\u002Fposts\u002F2024\u002F2024-07-26-广大选课脚本",110,"2024-07-26 01:34:28",{"path":533,"words":534,"published":535,"date":156},"\u002Fposts\u002F2024\u002F2024-07-26-数学分析笔记其二",14,"2024-07-26 23:54:02",{"path":537,"words":538,"published":539,"date":156},"\u002Fposts\u002F2024\u002F2024-07-26-数据结构复习其二",12856,"2024-07-26 02:48:08",{"path":541,"words":542,"published":543,"date":156},"\u002Fposts\u002F2024\u002F2024-07-26-数据结构复习相关",32856,"2024-07-26 02:24:14",{"path":545,"words":546,"published":547,"date":156},"\u002Fposts\u002F2024\u002F2024-07-26-线性代数与空间解析几何知识点全汇总",6110,"2024-07-26 03:27:55",{"path":549,"words":550,"published":551,"date":156},"\u002Fposts\u002F2024\u002F2024-07-31-typora-picgo-兰空图床打造markdown写作环境",311,"2024-07-31 12:56:23",{"path":553,"words":554,"published":555,"date":156},"\u002Fposts\u002F2024\u002F2024-09-02-jupyter配置中文",441,"2024-09-02 23:49:05",{"path":557,"words":558,"published":559,"date":156},"\u002Fposts\u002F2024\u002F2024-09-02-自定义vscode背景图片",100,"2024-09-02 23:39:00",{"path":561,"words":562,"published":563,"date":156},"\u002Fposts\u002F2024\u002F2024-09-03-制作gzhu校园网路由器",1423,"2024-09-03 23:43:18",{"path":565,"words":566,"published":567,"date":156},"\u002Fposts\u002F2024\u002F2024-09-26-09-25-2024",136,"2024-09-26 00:49:26",{"path":569,"words":570,"published":571,"date":156},"\u002Fposts\u002F2024\u002F2024-11-04-创建一个网络包解码器分析devp2p协议",1943,"2024-11-04 16:45:19",{"path":573,"words":574,"published":575,"date":156},"\u002Fposts\u002F2024\u002F2025-03-09-2024一些笔记常微分",16,"2024-12-09 22:51:00",{"path":577,"words":574,"published":578,"date":156},"\u002Fposts\u002F2024\u002F2025-03-09-2024一些笔记概率论","2025-03-09 22:51:00",{"path":580,"words":581,"published":582,"date":156},"\u002Fposts\u002F2025\u002F2025-03-01-windows下释放docker占用的wsl空间",164,"2025-03-01 13:54:15",{"path":584,"words":585,"published":586,"date":156},"\u002Fposts\u002F2025\u002F2025-03-01-爬虫实战-爬取广州大学课程表",774,"2025-03-01 14:55:48",{"path":588,"words":530,"published":589,"date":156},"\u002Fposts\u002F2025\u002F2025-04-03-hexo集成gitalk的问题","2025-04-03 14:26:34",{"path":591,"words":592,"published":593,"date":156},"\u002Fposts\u002F2025\u002F2025-09-22-记一次配置obsidian配合hexo写博客",92,"2025-09-22 16:47:52",{"path":595,"words":596,"published":597,"date":156},"\u002Fposts\u002F2025\u002F2025-10-24-10-20课题",204,"2025-10-24 08:15:01",{"path":599,"words":600,"published":601,"date":156},"\u002Fposts\u002F2025\u002F2025-11-02-组会朝花夕拾",501,"2025-11-02 18:56:59",{"path":603,"words":604,"published":605,"date":156},"\u002Fposts\u002F2025\u002F2025-11-05-基于随机加权推断模型im的参数估计算法",481,"2025-11-05 20:51:41",{"path":607,"words":608,"published":609,"date":156},"\u002Fposts\u002F2025\u002F2025-11-09-关于软考高项网规",884,"2025-11-09 19:54:52",{"path":611,"words":612,"published":613,"date":156},"\u002Fposts\u002F2025\u002F2025-11-17-arch-linux运行appimage相关",365,"2025-11-17 09:59:59",{"path":615,"words":616,"published":617,"date":156},"\u002Fposts\u002F2025\u002F2025-11-19-相关概念",2058,"2025-11-19 11:06:20",{"path":619,"words":620,"published":621,"date":156},"\u002Fposts\u002F2025\u002F2025-11-21-web可视化实践canvas",6393,"2025-11-21 14:50:48",{"path":623,"words":624,"published":625,"date":156},"\u002Fposts\u002F2025\u002F2025-11-22-使用-github-actions-自动部署基于vite的项目到-github-pages",272,"2025-11-23 01:59:24",{"path":627,"words":628,"published":629,"date":156},"\u002Fposts\u002F2025\u002F2025-11-22-关于前端包管理器npmpnpmyarn和bun",4890,"2025-11-22 21:21:15",{"path":631,"words":632,"published":633,"date":156},"\u002Fposts\u002F2025\u002F2025-11-23-undo-redo-机制具体实现",7839,"2025-11-23 19:15:00",{"path":635,"words":636,"published":637,"date":156},"\u002Fposts\u002F2025\u002F2025-11-27-前端安全-关于xss与crsf",1866,"2025-11-28 02:05:25",{"path":639,"words":640,"published":641,"date":156},"\u002Fposts\u002F2025\u002F2025-12-05-现代协同-2d-画布编辑器pixijs-v8",4285,"2025-12-05 02:00:16",{"path":643,"words":644,"published":645,"date":156},"\u002Fposts\u002F2025\u002F2025-12-07-杂谈-课题组系统设计",3710,"2025-12-07 21:09:33",{"path":647,"words":648,"published":649,"date":156},"\u002Fposts\u002F2025\u002F2025-12-25-javascript中的数组方法与栈stack和队列queue的实现",474,"2025-11-29 16:58:15",{"path":651,"words":652,"published":653,"date":156},"\u002Fposts\u002F2025\u002F2025-12-25-关于javascript-实现哈希表",189,"2025-11-27 11:31:39",{"path":655,"words":656,"published":657,"date":156},"\u002Fposts\u002F2025\u002F2025-12-25-关于javascript的set方法",332,"2025-12-25 15:26:18",{"path":659,"words":660,"published":661,"date":156},"\u002Fposts\u002F2025\u002F2025-12-25-关于动态规划(背包问题为例)",1238,"2025-11-17 18:24:04",{"path":663,"words":664,"published":665,"date":156},"\u002Fposts\u002F2025\u002F2025-12-25-关于滑动窗口",712,"2025-11-20 15:04:40",{"path":667,"words":668,"published":669,"date":156},"\u002Fposts\u002F2025\u002F2025-12-25-关于链表(javascript)",500,"2025-11-25 13:00:48",{"path":671,"words":672,"published":673,"date":156},"\u002Fposts\u002F2025\u002F2025-12-25-面试算法acm模式构建构建输入输出模板",2051,"2025-12-25 23:09:45",{"path":675,"words":676,"published":677,"date":156},"\u002Fposts\u002F2025\u002F2025-12-26-javascript-数字数组字符串的处理",483,"2025-12-26 11:20:25",{"path":679,"words":680,"published":681,"date":156},"\u002Fposts\u002F2025\u002F2025-12-26-javascripttypescript-的顺序表链表实现",446,"2025-12-26 12:16:12",{"path":683,"words":684,"published":685,"date":156},"\u002Fposts\u002F2025\u002F2025-12-27-前端画布设计vol-1-实现基础yuan素渲染和状态控制",2136,"2025-12-28 01:23:08",{"path":687,"words":688,"published":689,"date":156},"\u002Fposts\u002F2025\u002F2025-12-27-前端画布设计vol-2-实现富文本编辑",1838,"2025-12-28 02:58:47",{"path":691,"words":692,"published":693,"date":156},"\u002Fposts\u002F2025\u002F2025-12-27-算法刷题-关于链表操作",2135,"2025-12-27 16:12:42",{"path":695,"words":696,"published":697,"date":156},"\u002Fposts\u002F2025\u002F2025-12-27-配置dnscrypt-proxy实现加密dns服务windows",1899,"2025-11-15 01:06:37",{"path":699,"words":700,"published":701,"date":156},"\u002Fposts\u002F2025\u002F2025-12-28-前端-关于网络请求xhrajaxfetchaxios",7788,"2025-10-28 15:48:46",{"path":703,"words":704,"published":705,"date":156},"\u002Fposts\u002F2025\u002F2025-12-28-前端-接口封装与请求规范axios为例",2373,"2025-12-29 01:01:18",{"path":707,"words":708,"published":709,"date":156},"\u002Fposts\u002F2025\u002F2025-12-28-前端-身份验证管理-基于-jwt-token-的实现",2709,"2025-11-23 22:04:41",{"path":711,"words":712,"published":713,"date":156},"\u002Fposts\u002F2025\u002F2025-12-29-记canvas画布项目开发",6254,"2025-12-29 04:52:15",{"path":715,"words":716,"published":717,"date":156},"\u002Fposts\u002F2025\u002Fabout-site",116,"2025-03-31 16:44:24",{"path":719,"words":720,"published":721,"date":156},"\u002Fposts\u002F2025\u002F使用neo4j图数据科学库gds进行中心度分析",143,"2025-04-02 23:37:24",{"path":723,"words":724,"published":725,"date":156},"\u002Fposts\u002F2026\u002F2026-01-03-论文实训草稿",10445,"2026-01-03 14:10:49",{"path":727,"words":728,"published":729,"date":156},"\u002Fposts\u002F2026\u002F2026-01-06-人工智能导论",11461,"2026-01-07 03:25:49",{"path":731,"words":732,"published":733,"date":156},"\u002Fposts\u002F2026\u002F2026-01-07-机器学习相关算法",82,"2026-01-08 02:28:13",{"path":735,"words":736,"published":737,"date":156},"\u002Fposts\u002F2026\u002F2026-01-16-关于低复杂度最长链共识算法设计",4466,"2026-01-16 10:33:23",{"path":739,"words":740,"published":741,"date":156},"\u002Fposts\u002F2026\u002F2026-01-19-杂记2026-01-19",5754,"2026-01-20 01:03:26",{"path":743,"words":744,"published":745,"date":156},"\u002Fposts\u002F2026\u002F2026-01-22-github-action-自动同步博客到-github-主页",1069,"2026-01-22 16:31:47",{"path":747,"words":748,"published":749,"date":156},"\u002Fposts\u002F2026\u002F2026-03-01-windows-wsl安装docker",257,"2026-03-01 20:55:31",{"path":751,"words":752,"published":753,"date":156},"\u002Fposts\u002F2026\u002F2026-03-14-关于-msys2",701,"2026-03-15 03:05:04",{"path":755,"words":756,"published":757,"date":156},"\u002Fposts\u002F2026\u002F2026-03-28-团队项目协作规范随记",2419,"2026-03-29 05:33:50",{"path":759,"words":760,"published":761,"date":156},"\u002Fposts\u002F2026\u002F2026-03-29-oh-my-posh配置分享",104,"2026-03-29 16:34:43",{"path":763,"words":764,"published":765,"date":156},"\u002Fposts\u002F2026\u002F2026-06-13-从上下文工程到-agent-harness-engineering",8840,"2026-06-13 21:06:20",{"path":767,"words":768,"published":769,"date":156},"\u002Fposts\u002F2026\u002F2026-07-13-简谈前端基建质量标准与ai友好建设",3814,"2026-07-13 21:06:20",{"path":771,"words":772,"published":773,"date":156},"\u002Fposts\u002F2026\u002F2026-07-15-agentic-rag-系统实践",13357,"2026-07-15 21:06:20",{"path":775,"words":776,"published":777,"date":156},"\u002Fposts\u002F2026\u002F2026-07-18-简谈sdd规范驱动开发-copy",4476,"2026-07-18 11:06:20",{"path":779,"words":780,"published":781,"date":156},"\u002Fposts\u002F2026\u002F2026-07-20-个人neovim配置分享",366,"2026-07-22 13:46:50",{"path":783,"words":784,"published":785,"date":156},"\u002Fposts\u002F2026\u002F2026-07-20-关于技术写作-设计文档",6763,"2026-07-20 13:46:50",{"path":787,"words":788,"published":789,"date":156},"\u002Fposts\u002F2026\u002F2026-07-29-fastapi-工程实践随记",3417,"2026-07-29 04:58:34",{"path":791,"words":792,"published":793,"date":156},"\u002Fposts\u002Frfc_agentic_project\u002F2026-06-19-rfc-liskin_code_agent",3563,"2026-06-19 15:18:20",{"path":795,"words":796,"published":797,"date":156},"\u002Fposts\u002Frfc_agentic_project\u002F2026-07-25-rfc-glushkov_ogas",13461,"2026-07-28 23:46:50",{"path":799,"words":800,"published":793,"date":156},"\u002Fposts\u002Frfc_agentic_project\u002F2026-08-03-adr-ogas-arkhiv",2698,{"path":802,"words":803,"published":804,"date":156},"\u002Fposts\u002Frfc_agentic_project\u002Frag\u002F2026-08-12-arkhiv_rag-vol-1",4366,"2026-08-12 15:18:20",{"path":806,"words":807,"published":808,"date":156},"\u002Fposts\u002Fleetcode\u002F2025-12-25-力扣百题速练javascripttypescriptvol-1",3108,"2025-12-25 13:57:08",{"path":810,"words":811,"published":812,"date":156},"\u002Fposts\u002Fleetcode\u002F2025-12-26-力扣百题速练javascripttypescriptvol-2",3185,"2025-12-26 13:57:08",{"path":814,"words":815,"published":816,"date":156},"\u002Fposts\u002Fleetcode\u002F2025-12-28-力扣百题速练javascripttypescriptvol-3",2533,"2025-12-29 02:15:44",{"path":818,"words":819,"published":820,"date":156},"\u002Fposts\u002Fleetcode\u002F2026-01-17-力扣百题速练javascripttypescriptvol-4",3024,"2026-01-17 22:53:01",{"path":822,"words":823,"published":824,"date":156},"\u002Fposts\u002Fleetcode\u002F2026-01-19-力扣百题速练javascripttypescriptvol-5",293,"2026-01-19 15:15:12",{"path":826,"words":827,"published":828,"date":156},"\u002Fposts\u002F分布式处理与计算\u002F分布式处理与计算spark系统与scala语言",4320,"2026-07-06 14:10:49",{"path":830,"words":831,"published":832,"date":156},"\u002Fposts\u002F分布式处理与计算\u002F分布式处理与计算分类与回归分析",2081,"2026-07-07 12:40:29",{"path":834,"words":835,"published":836,"date":156},"\u002Fposts\u002F分布式处理与计算\u002F分布式处理与计算数值优化方法",2182,"2026-07-07 13:50:29",{"path":838,"words":839,"published":840,"date":156},"\u002Fposts\u002F分布式处理与计算\u002F分布式处理与计算数据降维",1583,"2026-07-07 21:50:29",{"path":842,"words":843,"published":844,"date":156},"\u002Fposts\u002F分布式处理与计算\u002F分布式处理与计算聚类分析",1882,"2026-07-07 16:50:29",{"path":846,"words":847,"published":848,"date":156},"\u002Fposts\u002F分布式处理与计算\u002F分布式处理与计算随机模拟与统计推断",2433,"2026-07-06 22:40:29",{"path":850,"words":851,"published":852,"date":156},"\u002Fposts\u002F数据可视化\u002F2026-06-14-数据可视化-基本图像",10011,"2026-06-14 20:18:20",{"path":854,"words":855,"published":856,"date":156},"\u002Fposts\u002F数据可视化\u002F2026-06-14-数据可视化-概论",10030,"2026-06-14 15:18:20",{"path":858,"words":859,"published":860,"date":156},"\u002Fposts\u002F数据可视化\u002F2026-06-15-数据可视化-可视化库",2032,"2026-06-15 20:18:20",{"path":862,"words":863,"published":864,"date":156},"\u002Fposts\u002F数据结构\u002F2025-09-29-数据结构-图",5451,"2025-04-15 20:48:06",{"path":866,"words":867,"published":868,"date":156},"\u002Fposts\u002F数据结构\u002F2025-09-29-数据结构-树",4211,"2025-04-30 02:19:06",{"path":870,"words":871,"published":872,"date":156},"\u002Fposts\u002F数据结构\u002F2025-09-29-数据结构-队列",921,"2025-04-11 15:30:08",{"path":874,"words":875,"published":876,"date":156},"\u002Fposts\u002F数据结构\u002F关于数据结构的一些想法",456,"2025-04-04 19:13:49",{"path":878,"words":879,"published":880,"date":156},"\u002Fposts\u002F数据结构\u002F数据结构-栈",920,"2025-04-18 00:17:37",{"path":882,"words":883,"published":884,"date":156},"\u002Fposts\u002F数据结构\u002F数据结构-算法复杂度",2153,"2025-04-05 16:09:55",{"path":886,"words":887,"published":888,"date":156},"\u002Fposts\u002F数据结构\u002F数据结构-线性表链表",4572,"2025-04-06 00:24:40",{"path":890,"words":891,"published":892,"date":156},"\u002Fposts\u002F数据结构\u002F数据结构-线性表顺序表",4191,"2025-04-05 22:09:59",{"path":894,"words":895,"published":896,"date":156},"\u002Fposts\u002F数据结构\u002F数据结构-绪论",2881,"2025-04-05 11:31:22",{"path":898,"words":899,"published":156,"date":900},"\u002Fposts\u002F杂记\u002F2023-12-26-2023年12月26日",7,"2023-12-26 23:51:33",{"path":902,"words":899,"published":156,"date":903},"\u002Fposts\u002F杂记\u002F2024-01-01-2024团建","2024-01-01 01:51:27",{"path":905,"words":581,"published":156,"date":906},"\u002Fposts\u002F杂记\u002F2024-01-09-随记","2024-01-09 20:50:35",{"path":908,"words":909,"published":156,"date":910},"\u002Fposts\u002F杂记\u002F2024-03-12-花名",5275,"2024-03-12 16:04:23",{"path":912,"words":913,"published":156,"date":914},"\u002Fposts\u002F杂记\u002F2024-04-15-逆模因",1353,"2024-04-15 00:26:16",{"path":916,"words":917,"published":156,"date":918},"\u002Fposts\u002F杂记\u002F2024-05-03-艺作",27,"2024-05-03 00:01:00",{"path":920,"words":921,"published":156,"date":922},"\u002Fposts\u002F杂记\u002F2024-05-21-关于博客",1720,"2024-02-21 23:21:11",{"path":924,"words":925,"published":156,"date":926},"\u002Fposts\u002F杂记\u002F2024-06-20-dnvrc维克多崔专访-2023",2036,"2024-06-20 00:28:39",{"path":928,"words":760,"published":156,"date":929},"\u002Fposts\u002F杂记\u002F2024-06-25-6月25日随记","2024-06-25 12:46:36",{"path":931,"words":932,"published":156,"date":933},"\u002Fposts\u002F杂记\u002F2024-06-25-歌名-想見星星",148,"2024-06-25 22:47:59",{"path":935,"words":936,"published":156,"date":937},"\u002Fposts\u002F杂记\u002F2024-07-11-桂花岗",6,"2024-07-11 00:28:17",{"path":939,"words":940,"published":156,"date":941},"\u002Fposts\u002F杂记\u002F2024-07-15-rolling-bocci",9,"2024-07-15 21:25:56",{"path":943,"words":944,"published":156,"date":945},"\u002Fposts\u002F杂记\u002F2024-07-22-七月九日",34,"2024-07-09 17:54:23",{"path":947,"words":948,"published":156,"date":949},"\u002Fposts\u002F杂记\u002F2024-07-22-六月随记",1052,"2024-07-22 01:03:19",{"path":951,"words":952,"published":156,"date":953},"\u002Fposts\u002F杂记\u002F2024-07-22-石菖蒲",41,"2024-07-10 01:26:05",{"path":955,"words":514,"published":156,"date":956},"\u002Fposts\u002F杂记\u002F2024-07-23-新书","2024-07-23 01:05:49",{"path":958,"words":959,"published":156,"date":960},"\u002Fposts\u002F杂记\u002F2024-07-29-年前",74,"2024-07-29 23:59:07",{"path":962,"words":963,"published":156,"date":964},"\u002Fposts\u002F杂记\u002F2024-07-30-周边",138,"2024-07-30 02:03:23",{"path":966,"words":967,"published":156,"date":968},"\u002Fposts\u002F杂记\u002F2024-07-31-2024-7-31日",185,"2024-07-31 01:21:52",{"path":970,"words":971,"published":156,"date":972},"\u002Fposts\u002F杂记\u002F2024-08-02-八月",1710,"2024-08-30 00:31:02",{"path":974,"words":975,"published":156,"date":976},"\u002Fposts\u002F杂记\u002F2024-09-01-九月",1484,"2024-09-26 16:30:15",{"path":978,"words":979,"published":156,"date":980},"\u002Fposts\u002F杂记\u002F2024-09-08-2024年9月8日",97,"2024-09-08 13:59:36",{"path":982,"words":514,"published":156,"date":983},"\u002Fposts\u002F杂记\u002F2024-09-19-博客站的一周年","2024-09-18 23:36:24",{"path":985,"words":986,"published":156,"date":987},"\u002Fposts\u002F杂记\u002F2024-10-03-十月",1028,"2024-10-31 23:54:27",{"path":989,"words":990,"published":156,"date":991},"\u002Fposts\u002F杂记\u002F2024-11-04-十一月",2134,"2024-11-30 00:04:39",{"path":993,"words":994,"published":156,"date":995},"\u002Fposts\u002F杂记\u002F2024-11-10-gzhu-site-193",80,"2024-11-10 19:19:12",{"path":997,"words":998,"published":156,"date":999},"\u002Fposts\u002F杂记\u002F2024-12-01-十二月",455,"2024-12-30 23:13:47",{"path":1001,"words":1002,"published":156,"date":1003},"\u002Fposts\u002F杂记\u002F2024-12-21-年末",23,"2024-12-21 23:21:49",{"path":1005,"words":522,"published":156,"date":1006},"\u002Fposts\u002F杂记\u002F2025-01-30-一月","2025-01-30 23:44:41",{"path":1008,"words":1009,"published":156,"date":1010},"\u002Fposts\u002F杂记\u002F2025-03-01-二月",224,"2025-02-28 00:11:08",{"path":1012,"words":1013,"published":156,"date":1014},"\u002Fposts\u002F杂记\u002F2025-03-01-博客杂谈",344,"2025-03-01 16:03:18",{"path":1016,"words":1017,"published":156,"date":1018},"\u002Fposts\u002F杂记\u002F2025-03-05-三月",2090,"2025-03-05 19:17:28",{"path":1020,"words":1021,"published":156,"date":1022},"\u002Fposts\u002F杂记\u002F2025-07-10-七月",361,"2025-07-10 22:04:32",{"path":1024,"words":1025,"published":156,"date":1026},"\u002Fposts\u002F杂记\u002F2025-09-21-九月",781,"2025-09-21 20:53:37",{"path":1028,"words":1029,"published":156,"date":1030},"\u002Fposts\u002F杂记\u002F2025-10-09-十月",591,"2025-10-09 00:35:07",{"path":1032,"words":1033,"published":156,"date":1034},"\u002Fposts\u002F杂记\u002Fcontrol",13,"2023-09-25 13:03:59",{"path":1036,"words":1037,"published":156,"date":1038},"\u002Fposts\u002F杂记\u002Fquadim四叉树图像处理",1094,"2023-10-21 11:27:06",{"path":1040,"words":1041,"published":156,"date":1042},"\u002Fposts\u002F杂记\u002Fsuccess",24,"2023-09-22 15:59:07",{"path":1044,"words":1045,"published":156,"date":1046},"\u002Fposts\u002F杂记\u002F三光年",295,"2023-11-18 04:18:40",{"path":1048,"words":1049,"published":156,"date":1050},"\u002Fposts\u002F杂记\u002F加密测试",961,"2023-11-21 14:24:01",{"path":1052,"words":1053,"published":156,"date":1054},"\u002Fposts\u002F杂记\u002F啊啊啊啊啊啊啊",54,"2023-09-20 17:29:33",{"path":1056,"words":1057,"published":156,"date":1058},"\u002Fposts\u002F杂记\u002F杂谈",124,"2023-09-25 23:11:32",{"path":1060,"words":1061,"published":156,"date":1062},"\u002Fposts\u002F杂记\u002F艹",25,"2023-10-21 17:40:43",{"path":1064,"words":1065,"published":1066,"date":156},"\u002Fposts\u002F神经网络\u002F神经网络与深度学习卷积神经网络",3168,"2026-06-07 11:23:08",{"path":1068,"words":1069,"published":1070,"date":156},"\u002Fposts\u002F神经网络\u002F神经网络与深度学习循环神经网络",2348,"2026-06-07 11:33:08",{"path":1072,"words":1073,"published":1074,"date":156},"\u002Fposts\u002F神经网络\u002F神经网络与深度学习改进学习方法",3360,"2026-06-07 10:13:08",{"path":1076,"words":1077,"published":1078,"date":156},"\u002Fposts\u002F神经网络\u002F神经网络与深度学习深度生成模型",2727,"2026-06-07 11:43:08",{"path":1080,"words":1081,"published":1082,"date":156},"\u002Fposts\u002F神经网络\u002F神经网络与深度学习神经网络基础",3205,"2026-06-07 10:03:08",{"id":1084,"title":1085,"abbrlink":1086,"body":1087,"category":5,"cover":2045,"date":156,"description":2046,"extension":2047,"mathjax":2048,"meta":2049,"navigation":2048,"path":619,"published":621,"readingMinutes":2052,"seo":2053,"stem":2054,"sticky":156,"swiper_index":156,"tags":2055,"updated":156,"words":620,"__hash__":2056},"posts\u002Fposts\u002F2025\u002F2025-11-21-Web可视化实践—canvas.md","2025-11-21-Web可视化实践—canvas","14933",{"type":1088,"value":1089,"toc":2008},"minimark",[1090,1095,1099,1103,1107,1110,1115,1118,1121,1131,1134,1137,1141,1144,1148,1151,1154,1158,1161,1164,1168,1171,1174,1181,1184,1187,1193,1199,1202,1205,1211,1214,1221,1227,1230,1233,1239,1242,1245,1251,1254,1260,1263,1266,1269,1272,1278,1281,1288,1291,1294,1300,1303,1306,1311,1314,1317,1320,1323,1328,1331,1334,1337,1342,1345,1348,1353,1359,1362,1365,1368,1371,1377,1380,1383,1389,1392,1396,1398,1402,1405,1408,1413,1416,1421,1424,1429,1432,1443,1446,1453,1458,1461,1464,1469,1472,1475,1478,1483,1486,1496,1592,1595,1606,1609,1623,1629,1632,1635,1638,1641,1647,1650,1653,1658,1664,1675,1680,1683,1686,1692,1695,1698,1701,1709,1714,1717,1720,1723,1728,1731,1734,1738,1741,1746,1749,1754,1757,1761,1764,1769,1772,1776,1779,1782,1785,1796,1799,1802,1806,1809,1815,1818,1824,1827,1831,1834,1837,1840,1855,1860,1863,1867,1870,1873,1879,1882,1887,1901,1904,1909,1912,1917,1923,1926,1929,1932,1946,1951,1961,1964,1970,1973,1976,1982,1985,1988,1991,1996,1999,2002,2005],[1091,1092,1094],"h1",{"id":1093},"关于canvas","关于Canvas",[1096,1097,1098],"h2",{"id":1098},"前言",[1100,1101,1102],"p",{},"HTML5 canvas 是浏览器原生提供的一块位图绘图区域，通过 JavaScript 脚本在其上进行像素级的 2D\u002F3D 绘制，常用于图表、游戏、数据可视化、图像处理、动画特效等场景。它在 HTML 中只是一个矩形容器，所有内容都由脚本动态生成，绘制结果是栅格图像，本文主要从 Faster、KonvaJS、LeaferJS 三个渲染引擎来介绍 Canvas ，作为对渲染层的入门。",[1096,1104,1106],{"id":1105},"_2-canvas-vs-dom","2. Canvas vs DOM",[1100,1108,1109],{},"Canvas 相对于 DOM 既有优势，也有一定的劣势，下面列举了几条两者的差异点：",[1111,1112,1114],"h3",{"id":1113},"_21-绘制","2.1 绘制",[1100,1116,1117],{},"Canvas 是一张画布，里面的内容都是调用 Canvas API 绘制的，所以更像是我们拿起画笔来作画，绘制比较灵活，但调用方式很繁琐。",[1100,1119,1120],{},"比如想绘制一个文本，就需要调一些不太容易理解的 API：",[1122,1123,1128],"pre",{"className":1124,"code":1126,"language":161,"meta":1127},[1125],"language-JavaScript","context.font = '24px STheiti, SimHei';\ncontext.fillText('hello, world', 24, 66);\n","",[1129,1130,1126],"code",{"__ignoreMap":1127},[1100,1132,1133],{},"DOM 更像是我们调用一些现有的 UI 控件去做绘制，DOM 没有提供的就比较难做，但胜在浏览器提供的能力很完善。",[1100,1135,1136],{},"但是，使用 Canvas 意味着很多能力需要从零实现，布局系统、事件系统、文本排版等等，对开发来说不算是友好。",[1111,1138,1140],{"id":1139},"_22-布局","2.2 布局",[1100,1142,1143],{},"在 DOM 中，我们可以很方便的使用各种布局，比如 Flex 布局、Grid 布局、绝对\u002F相对定位等等。但在 Canvas 里面只有绝对定位，这也很容易理解，画笔肯定都是相对于画布的。",[1111,1145,1147],{"id":1146},"_23-事件","2.3 事件",[1100,1149,1150],{},"Canvas 在 DOM 树里面只是一个 \u003Ccanvas>\u003C\u002Fcanvas> 的 DOM 节点，所有的鼠标事件只能触发在 canvas 节点上面。具体里面绘制的是什么内容，有没有点击在某个图形上面，都无法感知。",[1100,1152,1153],{},"而 DOM 提供了丰富的事件能力，支持事件冒泡和捕获，我们也很容易给某个节点绑定一些事件。",[1111,1155,1157],{"id":1156},"_24-文本排版","2.4 文本排版",[1100,1159,1160],{},"对文本的处理可能是 Canvas 里面最难的点，Chrome 针对 DOM 文本有很好的排版，但在 Canvas 里面文本是没有排版的，比如最简单的换行能力，都需要 Canvas 自己去实现，毕竟 Canvas 没有文本节点的概念。",[1100,1162,1163],{},"总之，使用 Canvas 做页面渲染，有点儿像重新实现浏览器渲染引擎和排版引擎。",[1096,1165,1167],{"id":1166},"canvas-渲染引擎","Canvas 渲染引擎",[1100,1169,1170],{},"为了解决上述这些痛点，诞生了例如 Konva、ZRender、Fabric 等 Canvas 库，对 Canvas API 进行了一系列的封装。",[1100,1172,1173],{},"Canvas 渲染引擎一般包括下面几个特点：",[1175,1176,1177],"ol",{},[1178,1179,1180],"li",{},"封装",[1100,1182,1183],{},"将 Canvas API 的调用封装成更简单、清晰的形式，贴近于我们使用 DOM 的方式。",[1100,1185,1186],{},"比如想绘制一个文本，直接调用封装好的 Text 类就行了，我们不需要关心是如何绘制的。",[1122,1188,1191],{"className":1189,"code":1190,"language":161,"meta":1127},[1125],"const simpleText = new Text({\n        x: 100,\n        y: 15,\n        text: 'hello, world',\n        fontSize: 30,\n        fontFamily: 'Calibri',\n        fill: 'green'\n      });\n",[1129,1192,1190],{"__ignoreMap":1127},[1175,1194,1196],{"start":1195},2,[1178,1197,1198],{},"性能",[1100,1200,1201],{},"虽然封装之后的 API 很贴近 DOM 语法，但也意味着开发者很难去做一些底层的性能优化。因此，大部分 Canvas 渲染引擎都会内置了一些性能优化手段。",[1100,1203,1204],{},"常见的性能优化手段有分层渲染、离屏渲染、局部渲染、批量渲染等等。",[1175,1206,1208],{"start":1207},3,[1178,1209,1210],{},"事件拾取",[1100,1212,1213],{},"针对 Canvas 内部绘制的元素，渲染引擎一般会提供事件拾取的能力，通过模拟一套冒泡\u002F捕获机制，让开发体验更加接近 DOM。",[1096,1215,1217],{"id":1216},"_4-封装",[1218,1219,1220],"strong",{},"4. 封装",[1111,1222,1224],{"id":1223},"_41-虚拟节点",[1218,1225,1226],{},"4.1 虚拟节点",[1100,1228,1229],{},"目前主流的 Canvas 渲染引擎都会将要绘制的图形封装成类，以方便开发者去调用，复用性也比较强。每个实例可以当做一个虚拟节点，类似于 DOM 节点。",[1100,1231,1232],{},"使用 Konva 的例子：",[1122,1234,1237],{"className":1235,"code":1236,"language":161,"meta":1127},[1125],"\u002F\u002F first we need to create a stage\nvar stage = new Konva.Stage({\n  container: 'container',   \u002F\u002F id of container \u003Cdiv>\n  width: 500,\n  height: 500\n});\n\n\u002F\u002F then create layer\nvar layer = new Konva.Layer();\n\n\u002F\u002F create our shape\nvar circle = new Konva.Circle({\n  x: stage.width() \u002F 2,\n  y: stage.height() \u002F 2,\n  radius: 70,\n  fill: 'red',\n  stroke: 'black',\n  strokeWidth: 4\n});\n\n\u002F\u002F add the shape to the layer\nlayer.add(circle);\n\n\u002F\u002F add the layer to the stage\nstage.add(layer);\n\n\u002F\u002F draw the image\nlayer.draw();\n",[1129,1238,1236],{"__ignoreMap":1127},[1100,1240,1241],{},"在此基础上，可以进一步针对 React\u002FVue 语法进行封装，提供声明式的调用和组合的能力。",[1100,1243,1244],{},"使用 React-Konva 的例子（通过 react-reconciler 实现）：",[1122,1246,1249],{"className":1247,"code":1248,"language":161,"meta":1127},[1125],"import React, { Component } from 'react';\nimport { render } from 'react-dom';\nimport { Stage, Layer, Rect, Text } from 'react-konva';\nimport Konva from 'konva';\n\nclass ColoredRect extends React.Component {\n  state = {\n    color: 'green',\n  };\n  handleClick = () => {\n    this.setState({\n      color: Konva.Util.getRandomColor(),\n    });\n  };\n  render() {\n    return (\n      \u003CRect\n        x={20}\n        y={20}\n        width={50}\n        height={50}\n        fill={this.state.color}\n        shadowBlur={5}\n        onClick={this.handleClick}\n      \u002F>\n    );\n  }\n}\n\nclass App extends Component {\n  render() {\n    return (\n      \u003CStage width={window.innerWidth} height={window.innerHeight}>\n        \u003CLayer>\n          \u003CText text=\"Try click on rect\" \u002F>\n          \u003CColoredRect \u002F>\n        \u003C\u002FLayer>\n      \u003C\u002FStage>\n    );\n  }\n}\n\nrender(\u003CApp \u002F>, document.getElementById('root'));\n",[1129,1250,1248],{"__ignoreMap":1127},[1100,1252,1253],{},"有些渲染引擎直接支持 DSL：",[1122,1255,1258],{"className":1256,"code":1257,"language":161,"meta":1127},[1125],"\nimport { FStatelessWidget } from '@faster\u002Fcore'\nimport { Center, FText } from '@faster\u002Fwidget'\n\nclass MyWidget extends FStatelessWidget {\n  describe() {\n    return (\n      \u003CCenter>\n        \u003CFText text=\"Hello\" \u002F>\n      \u003C\u002FCenter>\n    )\n  }\n}\n",[1129,1259,1257],{"__ignoreMap":1127},[1100,1261,1262],{},"除了内置的图形类，很多渲染引擎还会提供自定义绘制图形类的能力。",[1100,1264,1265],{},"以 Konva 为例，每个图形类都需要实现 sceneFunc 方法，在这个方法里面去调用 Canvas API 来进行绘制。",[1100,1267,1268],{},"如果需要自定义新的图形，就可以继承 Shape 来实现 sceneFunc 方法。",[1100,1270,1271],{},"Konva 里面圆形绘制类的实现：",[1122,1273,1276],{"className":1274,"code":1275,"language":161,"meta":1127},[1125],"export class Circle extends Shape\u003CCircleConfig> {\n  _sceneFunc(context) {\n    context.beginPath();\n    context.arc(0, 0, this.attrs.radius || 0, 0, Math.PI * 2, false);\n    context.closePath();\n    context.fillStrokeShape(this);\n  }\n}\n",[1129,1277,1275],{"__ignoreMap":1127},[1100,1279,1280],{},"参照 DOM 树的结构，每个 Konva 应用包括一个舞台 Stage、多个画布 Layer、多个分组 Group，以及若干的叶子节点 Shape，这些虚拟节点关联起来最终形成了一棵树。",[1100,1282,1283],{},[1284,1285],"img",{"alt":1286,"src":1287},"Image","https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=MzIzYzU5YjVmY2I5OWVmNGFhZmUzNDI0ZGM1M2FhNThfZTFmOWRmNzIwZTVkNmEwMjYxOGYyODE4YzZiYThmZGVfSUQ6NzI1NDk2MDM0ODAxOTYyMTg5MF8xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1100,1289,1290],{},"在 Konva 中，一个 Stage 就是根节点，Layer 对应一个 Canvas 画布，Group 是指多个 Shape 的集合，它本身不会进行绘制，但同一个 Group 里面的 Shape 可以一起应用旋转、缩放等变换。",[1100,1292,1293],{},"Shape 则是指具体的绘制节点，比如 Rect、Circle、Text 等等。",[1111,1295,1297],{"id":1296},"_42-包围盒",[1218,1298,1299],{},"4.2 包围盒",[1100,1301,1302],{},"既然有了虚拟节点，那知道每个节点的位置和大小也比较重要，它会涉及到判断两个图形是否相交、事件等等。",[1100,1304,1305],{},"有时候元素的形状不是很规则，如果直接对不规则元素进行碰撞检测会比较麻烦，所以就有了一个近似的算法，就是在物体外侧加上包围盒，如图：",[1100,1307,1308],{},[1284,1309],{"alt":1286,"src":1310},"https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=OGJmYjgyYzZkZDNkOWI1ZjRjZTM3YjgwMTBmOGFlNzRfNWJjNDRiMjE2MDZiZWI3NGNmNjI1NzdlOWFlOWJkZTBfSUQ6NzI1NDk2MDMzOTA3MzE1NTA3Nl8xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1100,1312,1313],{},"目前主流的包围盒有 AABB 和 OBB 两种。",[1100,1315,1316],{},"AABB 包围盒：",[1100,1318,1319],{},"实现方式简单，直接用最大最小的横纵坐标来生成包围盒，但不会跟着元素旋转，因此空白区域比较多，也不够准确。",[1100,1321,1322],{},"也是目前平面项目里面使用的方式。",[1100,1324,1325],{},[1284,1326],{"alt":1286,"src":1327},"https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=MTZkNzI4OTE0NzdkNTBlOWRlYjRjMDQ4M2Y5OWM2YTFfMmEwMDU3NTVhNmM0NGNhZGNmOTk3ODQ5ZDlkYjJlMzNfSUQ6NzI1NDk2MDM0MDkzNTQ1ODgxN18xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1100,1329,1330],{},"OBB 包围盒：",[1100,1332,1333],{},"实现方式相对复杂，通过构建协方差矩阵来计算出新的坐标轴方向，将其顶点投射到坐标轴上面来得到新的包围盒。",[1100,1335,1336],{},"OBB 包围盒更加准确一些，但实现也比较复杂一些。",[1100,1338,1339],{},[1284,1340],{"alt":1286,"src":1341},"https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=ZjViMGUyNGY4ZmZjNDAxYWIxZTA0OTljYWVhOTFiY2FfNTNhZmVlZjFjNzdiNzlhYjI5YzJkMWQ3MzkyNjdmZjlfSUQ6NzI1NDk2MDMzOTQ2NzQ2ODgwNF8xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1100,1343,1344],{},"碰撞检测：",[1100,1346,1347],{},"两个包围盒在所有轴（与边平行）上的投影都发生重叠，则判定为碰撞；否则，没有发生碰撞。（分离轴定律）",[1100,1349,1350],{},[1284,1351],{"alt":1286,"src":1352},"https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=ZmI2Njk2ZGExNDA1YWY2Yjg4ZDEzODQ1YTFkNDIyZDVfNjE1Njk1ZmQxZGQzOTk4MTRlNmZhZTVhNmZlN2FhMjNfSUQ6NzI1NDk2MDM0MDUyODU2MjE3OV8xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1111,1354,1356],{"id":1355},"_43-布局系统",[1218,1357,1358],{},"4.3 布局系统",[1100,1360,1361],{},"绘制 Canvas 的时候一般都是给定相对于画布左上角的绝对位置，为了方便理解，大多数渲染引擎提供的 x、y 都是相对父节点的位置。",[1100,1363,1364],{},"对于图片编辑器来说，相对坐标比较契合。对于其他业务，比如文档来说，就没那么契合了，大量的坐标计算会让可维护性变差。",[1100,1366,1367],{},"因此，在 AntV 和 SpriteJS 这类 Canvas 渲染引擎里面，都内置支持了盒模型的语法糖，底层会将盒模型属性进行一次计算转换成 x、y。",[1100,1369,1370],{},"以 AntV 为例子，布局能力是基于 Facebook 开源的 Yoga 排版引擎（React Native）来实现的，它支持一套非常完整的盒模型和 Flex 布局语法。",[1122,1372,1375],{"className":1373,"code":1374,"language":161,"meta":1127},[1125],"const container = new Rect({\n   style: {\n       width: 500, \u002F\u002F Size\n       height: 300,\n       display: 'flex', \u002F\u002F Declaring the use of flex layouts\n       justifyContent: 'center',\n       alignItems: 'center',\n       x: 0,\n       y: 0,\n       fill: '#C6E5FF',\n   },\n});\n",[1129,1376,1374],{"__ignoreMap":1127},[1100,1378,1379],{},"它的语法更加接近于 Flutter，本质上是模仿 Flutter 来实现的。它实现了 Padding、Column、Row、Margin、Expanded、Flex、GridView 等 Widget。",[1100,1381,1382],{},"下面的示例是 Faster 的：",[1122,1384,1387],{"className":1385,"code":1386,"language":161,"meta":1127},[1125],"\u003CCenter>\n  \u003CColumn>\n    \u003CSizedBox width={50} height={50}>\n      \u003CFBackground color=\"red\">\u003C\u002FFBackground>\n    \u003C\u002FSizedBox>\n    \u003CSizedBox width={50} height={50}>\n      \u003CFBackground color=\"green\">\u003C\u002FFBackground>\n    \u003C\u002FSizedBox>\n    \u003CSizedBox width={50} height={50}>\n      \u003CFBackground color=\"#c9c9c9\">\n          \u003CPadding padding={[8, 4]}>\n            \u003CFText text=\"Hello World\" \u002F>\n          \u003C\u002FPadding>\n      \u003C\u002FFBackground>\n    \u003C\u002FSizedBox>\n  \u003C\u002F>\n\u003C\u002FCenter>\n",[1129,1388,1386],{"__ignoreMap":1127},[1100,1390,1391],{},"通过实现盒模型和 Flex 布局，可以让 Canvas 的布局能力更上一层楼。不仅可以减少代码中的大量计算，也可以让大家从 DOM 开发无缝衔接进来。",[1096,1393,1395],{"id":1394},"_5文本","5.文本",[1100,1397,1160],{},[1111,1399,1401],{"id":1400},"_51-宽度测量","5.1 宽度测量",[1100,1403,1404],{},"宽度测量会影响 Canvas 文本换行，需要根据宽度计算出换行点。比较简单的做法是对文本的每个字符进行遍历，用 measureText 测量宽度和 letter-spacing 累加起来，然后决定在哪个字符后面换行。这种做法耗时比较高，也不准确。",[1100,1406,1407],{},"在文字排版中，有个概念叫 Kerning，不同的字体有不同的规则。kerning 意思是字偶间距，简单来说就是特定的两个字母之间的距离。",[1100,1409,1410],{},[1284,1411],{"alt":1286,"src":1412},"https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=ZjU4OTdlMWQ5MTFjODUxNDc5MGQ4MDYxMDFjZjgwYjJfNzRmYzZiYjU5ZTM4YmJlZThjZGIwNWZkNDQ1NGEwMmNfSUQ6NzI2NTYwNDEwMjM4OTY5NDQ5Ml8xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1100,1414,1415],{},"对于第二行的 A 和 V 来说，单纯的累加单个字符的宽度和对这两个字符一起测量得到的结果是不一样的，下图是一个简单的验证，所以累加宽度是错误的做法。",[1100,1417,1418],{},[1284,1419],{"alt":1286,"src":1420},"https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=Yzc3YTVlYzBjNzFjZWViN2RiNmUxZGVlZmNhYWUzOWJfOTY3YjgxMmE2MmU4NDk5MTY1MWRlODk4MDE4ZDQ1MzhfSUQ6NzI2NTYwNDEwNTI3ODY2ODgwMl8xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1100,1422,1423],{},"在 opentype 中，可以看到某个字体的 kerning 映射表。",[1100,1425,1426],{},[1284,1427],{"alt":1286,"src":1428},"https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=YjliNjc4NTFhZGU3ZTJiNWIxNDFlZjBlZGE5MmVmYjlfODk5NWI5M2M2MzAwMmJlNmVkYTZkYTZiOTdkNDUzY2JfSUQ6NzI2NTYwNDEwNDc4MTAwNDgyOF8xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1100,1430,1431],{},"在 Konva 和 LeaferJS 中通过对文本进行二分查找，来找到需要在哪个字符后面换行。这种做法也有自己的弊端。",[1175,1433,1434,1437,1440],{},[1178,1435,1436],{},"对于长度大于 1 的字符来说，测量不准确，会将其断开。",[1178,1438,1439],{},"根据词来换行的时候，处理不够完善，对于是否是一个词的判断不够准确。",[1178,1441,1442],{},"大量重复测量，浪费性能。",[1100,1444,1445],{},"对于长度大于 1 的字符，无法准确测量，可能就会出现一个 emoji 表情错误分割的情况。",[1122,1447,1451],{"className":1448,"code":1450,"language":189,"meta":1127},[1449],"language-TypeScript","console.log('👨‍👩‍👦'.length); \u002F\u002F output: 8\n\nconsole.log(Array.from('🐕🦺'));  \u002F\u002F output: [ \"🐕\", \"\", \"🦺\" ]\n\u002F\u002F 泰语\nconsole.log(Array.from('สุ'));  \u002F\u002F output: [ \"ส\", \"ุ\" ]\n",[1129,1452,1450],{"__ignoreMap":1127},[1100,1454,1455],{},[1284,1456],{"alt":1286,"src":1457},"https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=ZDVhNDBkYmVhYjRjZWVlZWE1YjdiZTk2ZDYyM2M5YjVfODRlOTViYWFkOTE2MTYyNWJkMGFhZmFhMjRkODQ4YWRfSUQ6NzI2NTYwNDEwNTI0MTQyNzk3MF8xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1100,1459,1460],{},"这些从人类视觉角度被认为是单个字符的图形或文字，在Unicode中被称为字素簇（Grapheme Cluster）。",[1100,1462,1463],{},"如果要以字素簇为单位分割字符串，目前来说有两个方案。第一个方案是原生API——Intl.Segmenter目前这个提案处于Stage 4，并且Chrome和Safari已经支持。示例如下：",[1100,1465,1466],{},[1284,1467],{"alt":1286,"src":1468},"https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=MzM1NDhjNjZiNmE3YzJlOTcyMzlmNWJiN2FlMTRlM2FfYjAyOGI3YWRhZjNlOTcwMTQ4MTU2ZjcxODE4ZTg1NzNfSUQ6NzI2NTYwNDEwNTk3NTg4OTkyMV8xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1100,1470,1471],{},"另一种方法就是利用一些开源库，比如： graphemer-breaker、line-breaker 等库，他们是根据 Unicode 规定的算法对文本进行划分的。",[1100,1473,1474],{},"另一个问题是换行点不对，插入一个逗号，此时可能因为放不下这个逗号，会将逗号都放到下一行，因为逗号不能作为一行的首个字符。在 Konva 和 LeaferJS 中这里就是错误的，因为它们只针对空格和中划线做了特殊处理。",[1100,1476,1477],{},"最后一个弊端是利用二分查找，很多字符的宽度会被多次测量，比如下方这段文字，如果二分查找了10次，文本内容就被测量了10次。",[1100,1479,1480],{},[1284,1481],{"alt":1286,"src":1482},"https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=MWRiNzA2YWZmOWQ4MzRhOTIwMjAyZDlhNDdhNmFhODVfN2ZmMDYzMDU4MWNhMTUwMTRhZThkYzYzYzRjZGI1NDlfSUQ6NzI2NTYwNDEwNTI0MTQ2MDczOF8xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1100,1484,1485],{},"那么怎么解决这三个问题呢？我们需要一种切词算法。",[1100,1487,1488,1489],{},"Unicode 官方给了一种标准的换行算法，根据当前文本的 Unicode 编码，给出一个 break opportunities（换行机会）。有一个 LineBreak 的映射表：",[1490,1491,1495],"a",{"href":1492,"rel":1493},"http:\u002F\u002Fwww%5C.unicode%5C.org\u002FPublic\u002F12%5C.0%5C.0\u002Fucd\u002FLineBreak%5C.txt",[1494],"nofollow","http:\u002F\u002Fwww\\.unicode\\.org\u002FPublic\u002F12\\.0\\.0\u002Fucd\u002FLineBreak\\.txt",[1497,1498,1499,1526],"table",{},[1500,1501,1502],"thead",{},[1503,1504,1505,1511,1516,1521],"tr",{},[1506,1507,1508],"th",{},[1218,1509,1510],{},"字符",[1506,1512,1513],{},[1218,1514,1515],{},"十六进制unicode",[1506,1517,1518],{},[1218,1519,1520],{},"换行类",[1506,1522,1523],{},[1218,1524,1525],{},"描述",[1527,1528,1529,1562],"tbody",{},[1503,1530,1531,1538,1543,1548],{},[1532,1533,1534,1535],"td",{},"\"a\"",[1536,1537],"br",{},[1532,1539,1540,1541],{},"0061",[1536,1542],{},[1532,1544,1545,1546],{},"AL",[1536,1547],{},[1532,1549,1550,1556,1558,1559,1561],{},[1218,1551,1552],{},[1553,1554,1555],"em",{},"Alphabetic",[1536,1557],{},"Are alphabetic characters or symbols that are used with alphabetic characters",[1536,1560],{},"是字母字符或与字母字符一起使用的符号",[1503,1563,1564,1569,1574,1579],{},[1532,1565,1566,1567],{},"\"\\n\"",[1536,1568],{},[1532,1570,1571,1572],{},"000A",[1536,1573],{},[1532,1575,1576,1577],{},"LF",[1536,1578],{},[1532,1580,1581,1586,1588,1589,1591],{},[1218,1582,1583],{},[1553,1584,1585],{},"Line Feed",[1536,1587],{},"Cause a line break (after)",[1536,1590],{},"换行（在后方）",[1100,1593,1594],{},"只知道当前字符也是不够的，应该要通过比较前后两个字符，将这些换行机会进行组合，得出来当前是否支持换行。具体做法如下：",[1175,1596,1597,1600,1603],{},[1178,1598,1599],{},"先将官方给的 LineBreak.txt 下载解析出来，将 unicode 编码范围和换行类构建一颗 Unicode Trie（字典树）",[1178,1601,1602],{},"遍历整个字符串，通过 charCodeAt 获得 unicode 编码，从 Unicode Trie 里面读取换行类",[1178,1604,1605],{},"获取下一个字符串的换行类，按照一定规则来判断当前是否可以换行。",[1100,1607,1608],{},"通过这种方式，将一段文本拆分成独立的词，首先解决了前两个问题。针对每个词去做宽度的缓存，由于词是有限的，在大文档中很容易遇到重复的词，这样就不需要重复测量宽度了，解决了第三个问题。",[1100,1610,1611,1612,1617,1618],{},"感兴趣的可以参考开源库：",[1490,1613,1616],{"href":1614,"rel":1615},"https:\u002F\u002Fgithub%5C.com\u002Ffoliojs\u002Flinebreak",[1494],"https:\u002F\u002Fgithub\\.com\u002Ffoliojs\u002Flinebreak"," 和 ",[1490,1619,1622],{"href":1620,"rel":1621},"https:\u002F\u002Fgithub%5C.com\u002Ffoliojs\u002Funicode%5C-trie",[1494],"https:\u002F\u002Fgithub\\.com\u002Ffoliojs\u002Funicode\\-trie",[1096,1624,1626],{"id":1625},"_6-事件拾取",[1218,1627,1628],{},"6. 事件拾取",[1100,1630,1631],{},"Canvas 本身是一块画布，所以里面的内容都是画出来的，在 DOM 树里面也只是一个 Canvas 的节点，所以如何才能知道当前点击的是哪个图形呢？",[1100,1633,1634],{},"前面说了 Canvas 渲染引擎都会封装虚拟节点，每个节点都有自己的包围盒，所以为实现 Canvas 的事件系统提供了可能性。",[1100,1636,1637],{},"主流的 Canvas 渲染引擎都是针对 Canvas 节点或者上层节点进行事件委托，监听用户相关的事件（mouseDown、click、touch等等）之后，通过拾取来匹配到当前触发的元素，将事件分发出去。",[1100,1639,1640],{},"目前主流的几种事件实现方式分别是取色值法和几何法。",[1111,1642,1644],{"id":1643},"_61-取色值法",[1218,1645,1646],{},"6.1 取色值法",[1100,1648,1649],{},"取色值法是 Konva 采用的实现方式，它的实现方式非常简单，匹配精确度很高，适合不规则图形的匹配。",[1100,1651,1652],{},"取色值法的原理如下：",[1175,1654,1655],{},[1178,1656,1657],{},"在主 Canvas 创建一个图形的时候，会为这个图形生成一个随机的 colorKey（十六进制的颜色），同时建立类似于 Map\u003CcolorKey, Shape> 的映射。",[1122,1659,1662],{"className":1660,"code":1661,"language":161,"meta":1127},[1125],"getRandomColor() {\n    var randColor = ((Math.random() * 0xffffff) \u003C\u003C 0).toString(16);\n    while (randColor.length \u003C 6) {\n      randColor = ZERO + randColor;\n    }\n    return HASH + randColor;\n  },\n",[1129,1663,1661],{"__ignoreMap":1127},[1175,1665,1666,1669,1672],{},[1178,1667,1668],{},"绘制的同时会在内存里的 hitCanvas 同样位置绘制一个一模一样的图形，填充色是刚才的 colorKey。",[1178,1670,1671],{},"当用户鼠标点击 Canvas 画布的时候，可以拿到鼠标触发的 x、y，将其传给内存里面的 hitCanvas。",[1178,1673,1674],{},"内存里面的 hitCanvas 通过 getImageData 来获取到当前的颜色，进而通过 colorKey 来匹配到对应的图形。",[1100,1676,1677],{},[1284,1678],{"alt":1286,"src":1679},"https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=MGEzZjMzOTc5Njc3NDNjM2UyZTZmMWQyZGY0YTY5ODhfM2U4MzQ5OWZhMzcwMWIwNWE5OTlhOTMwOWEzNzZmZjRfSUQ6NzI1NDk2MDM0NzM4MjEwNDA2NV8xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1100,1681,1682],{},"从上述原理可以看出来，Konva 对于不规则图形的匹配依然会很精确，但缺点也很明显，每次都需要绘制两份，导致绘制性能变差。如果有两个图形互相覆盖，取色值法也只能拿到上方的图形。",[1100,1684,1685],{},"同时，getImageData 耗时比较高，在频繁触发的场景（onWheel）会导致帧率下降严重。",[1111,1687,1689],{"id":1688},"_62-几何法",[1218,1690,1691],{},"6.2 几何法",[1100,1693,1694],{},"因为需要进行一系列几何计算，所以这里称之为几何法。几何法有很多种实现方式，这里主要讲解引射线法。",[1100,1696,1697],{},"几何法是 AntV 采用的实现方式，实现方式相对复杂一些，针对不规则图形的匹配效率偏低。",[1100,1699,1700],{},"引射线法的实现原理如下：",[1175,1702,1703,1706],{},[1178,1704,1705],{},"从目标点出发向一侧发出一条射线，看这条射线和多边形所有边的交点数目。",[1178,1707,1708],{},"如果有奇数个交点，则说明在内部，如果有偶数个交点，则说明在外部。",[1100,1710,1711],{},[1284,1712],{"alt":1286,"src":1713},"https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=YmI2M2EzYjA3YmQwZjE4YzYxNzMxNmVmMTAwNzJmODNfNDY1ZDk0Y2JhNDU3MjQ0YzRmNzExYzdhOGZhZDE1ZTFfSUQ6NzI1NDk2MDM0MDExODU2ODk2NF8xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1100,1715,1716],{},"为什么奇数是在内部，偶数是在外部呢？我们假设射线与这个图形的交点，进入图形叫做穿入，离开图形叫做穿出。",[1100,1718,1719],{},"在图形内部发出的射线，一定会有穿出但没有穿入的情况。但在外部发出的射线，穿入和穿出是相对的。",[1100,1721,1722],{},"但是射线刚好穿过顶点的情况比较特殊，因此需要单独进行判断。",[1100,1724,1725],{},[1284,1726],{"alt":1286,"src":1727},"https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=MTBiODZiOWI0ZGVlZGNmMzI1YjYxZGQzODk4ZmIwYmZfYjhlNDdkMzU1NWExNmNjZWQzMDlmNmUxNjlmNDI5MmJfSUQ6NzI1NDk2MDM0MjU0Njg0MTYwM18xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1100,1729,1730],{},"几何法的优势在于不需要在内存里面进行重复绘制，但依赖于复杂的几何计算，因此有大量不规则图形的情况下性能会差一些。",[1100,1732,1733],{},"为了避免大量计算的问题，一般的渲染引擎会先根据 AABB 包围盒来进行匹配，如果匹配到了某个图形的包围盒，这个时候再去做更精准的碰撞检测。",[1111,1735,1737],{"id":1736},"_63-引申","6.3 引申",[1100,1739,1740],{},"前面说过，先根据 AABB 包围盒进行匹配，如果页面中元素过多，每次都需要遍历所有的图形，在频繁触发的场景下性能表现也会不佳。",[1742,1743,1745],"h4",{"id":1744},"_631-r-树","6.3.1 R 树",[1100,1747,1748],{},"R树是一种高效的空间索引结构，它可以用于处理多维空间数据的查询和插入操作。R树的核心思想是将空间数据划分为一系列的矩形区域（合并相邻的包围盒），并将这些矩形区域组织成一棵树形结构。这样，在查询时可以利用树的结构快速定位到包含查询点的矩形区域，从而避免了对整个数据集的遍历。",[1100,1750,1751],{},[1284,1752],{"alt":1286,"src":1753},"https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=MTQ3MmE5Y2VmZmEwNjgzMDJiNzU1ODg0Njk4NTQwNmFfMmVjODYwNmY2ZWJjNDQ4N2Q2YjRhZGFiZjg0NmYzZjNfSUQ6NzI2NTE5Mjg3MDkxMDAzMzkyMV8xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1100,1755,1756],{},"使用 R 树可以先去查询到 AABB 包围盒，然后再对命中的这个图形做更精准的碰撞检测。",[1742,1758,1760],{"id":1759},"_632-四叉树","6.3.2 四叉树",[1100,1762,1763],{},"和 R 树类似，本质上都是划分空间来减少查找，将空间区域划分四份，子区域继续划分四份。四叉树在构建时，每个图形需要判定落在哪个四叉树的叶子节点中，使用包围盒进判定，要么遍历所有的叶子节点判定图形包围盒和叶子包围盒是否相交，要么通过图形包围盒的四个点来判定，需要对图形进行横向和纵向叶子包围盒的占用，然后在每个相交的叶子中插入当前图形。后面所有的拾取都可以通过四叉树来加速，可以降低大量点是否在包围盒中的计算。",[1100,1765,1766],{},[1284,1767],{"alt":1286,"src":1768},"https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=OTA0Y2I2ODZiYWU1N2MzMmY2ZmJiMTEwYzc4Njk1MTBfNTJhYzk1OGE4YjkzYmE1OTk2MmFiNjE5ZTEzMmIzYThfSUQ6NzI2NTE5MTcyMjkwMzc4MTM3N18xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1100,1770,1771],{},"四叉树和 R 树都需要提前构建，不适用于频繁变化（动画）的场景，这种场景下频繁去插入、删除节点带来的开销比较大。",[1111,1773,1775],{"id":1774},"_64-混合拾取","6.4 混合拾取",[1100,1777,1778],{},"这个是 LeaferJS 里面使用的方案，核心是空间划分+ isPointInPath。在 LeaferJS 里面，每个 Group 都是一个 Branch（分支），每个图形节点都是一个 Leaf（叶子），通过 Branch 可以找到对应的 Leaf。",[1100,1780,1781],{},"每个 Branch 都有自己的包围盒，在碰撞检测的时候，会先检测当前坐标在哪个 Branch 里面，这一步等同于做空间划分。",[1100,1783,1784],{},"找到 Branch 之后，会对下面的 Leaf 做碰撞检测，碰撞检测的原理是在一个离屏 hitCanvas 上面绘制一份当前的 Leaf 节点，利用 Canvas 的 isPointInPath 来检测坐标点是否在刚刚绘制的路径里面。",[1100,1786,1787,1788,1791,1792,1795],{},"因为在 ",[1129,1789,1790],{},"beginPath"," 之后，绘制的路径都会被添加到这个路径集合里，",[1129,1793,1794],{},"isPointInPath(x, y)"," 方法判断的就是x、y 点是否在这个路径集合的所有路径里。",[1100,1797,1798],{},"每个 Leaf 节点都会有一个自己的 hitCanvas，所以只要节点 Layout 没有发生变化，这个 hitCanvas 就不需要重新绘制。",[1100,1800,1801],{},"取色值法会在首次渲染的时候就把所有图形在 hitCanvas 里面绘制出来，但 LeaferJS 是在每次事件拾取的时候动态绘制，等于将总耗时进行了分摊。对于频繁变化的场景，比 Konva 这种取色值适用性更强一些。",[1096,1803,1805],{"id":1804},"_7-性能优化","7. 性能优化",[1100,1807,1808],{},"由于 Canvas 渲染引擎都会进行大量的封装，所以开发者想针对底层做性能优化是非常难的，需要渲染引擎自身去支持一些优化。",[1111,1810,1812],{"id":1811},"_71-异步批量渲染",[1218,1813,1814],{},"7.1 异步批量渲染",[1100,1816,1817],{},"Faster 和 Konva、LeaferJS 里面都支持异步渲染，将大量绘制进行批量处理。",[1122,1819,1822],{"className":1820,"code":1821,"language":161,"meta":1127},[1125],"const rect = new Rect({ \u002F... });\n\u002F\u002F 多次修改属性，可能会触发多次渲染\nrect.x(100);\nrect.fill('red');\nrect.y(100);\n\u002F\u002F 由于每次修改图形的属性或者添加、销毁子节点都会触发渲染\n\u002F\u002F 为了避免同时修改多个属性时导致的重复渲染，因此约定每次在下一帧进行批量绘制。\n batchDraw() {\n    if (!this._waitingForDraw) {\n      this._waitingForDraw = true;\n      Util.requestAnimFrame(() => {\n        this.draw();\n        this._waitingForDraw = false;\n      });\n    }\n    return this;\n  }\n",[1129,1823,1821],{"__ignoreMap":1127},[1100,1825,1826],{},"这种渲染方式类似于 React 的 setState，避免短时间内多次 setState 导致多次 render。",[1111,1828,1830],{"id":1829},"_72-减少状态机切换","7.2 减少状态机切换",[1100,1832,1833],{},"Canvas 的 context 本质上是一个状态机，每次调用 context 来设置不同的属性（font 、fillStyle、strokeStyle、lineWidth 等）都是状态机的切换，有一定的开销。",[1100,1835,1836],{},"那有没有可能减少状态机的切换呢？可以针对画布上的元素来进行归类，将属性一样的元素归为一类，一次性绘制出来，避免了状态机的切换，可以提高绘制的性能。",[1100,1838,1839],{},"这种优化手段在表格业务中非常常见，可以根据绘制内容，划分为以下的收集器和渲染器：",[1841,1842,1843,1846,1849,1852],"ul",{},[1178,1844,1845],{},"线段数据收集和绘制（如表头、边框线等）",[1178,1847,1848],{},"矩形数据收集和绘制（如背景色）",[1178,1850,1851],{},"图像数据收集和绘制（如图片）",[1178,1853,1854],{},"文本数据收集和绘制（如文字内容）",[1100,1856,1857],{},[1284,1858],{"alt":1286,"src":1859},"https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=Y2NjZGNmNmI5MmNmZDlmMTk2MGYzYTYwNzkzOGY2MmNfYzgyYmE2YzgxZTM0ODc1ODE1NWYyZjExMTdkMjhlZjdfSUQ6NzI2NTE5ODMwMzY0NDUzMjczOF8xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1100,1861,1862],{},"对于有明确层级关系的业务场景，收集渲染就不太适用了。比如平面里面每个图层都可以修改图层顺序，这种情况不适合一次性绘制出来。",[1111,1864,1866],{"id":1865},"_73-分层渲染","7.3 分层渲染",[1100,1868,1869],{},"分层渲染不是 Canvas 的专属，在 DOM 中也会利用 will-change 来做分层。分层渲染的核心就是将不变的部分和变化的部分进行分离。",[1100,1871,1872],{},"比如表格中，选区和 hover 态都是变化的部分。里面的线段、文本等都是相对不变的部分。",[1111,1874,1876],{"id":1875},"_74-离屏渲染",[1218,1877,1878],{},"7.4 离屏渲染",[1100,1880,1881],{},"离屏渲染也是一种优化手段，利用离屏 Canvas 来缓存绘制内容，从而减少绘制的耗时。这种渲染优化方式在表格业务中也比较常见。",[1100,1883,1884],{},[1284,1885],{"alt":1286,"src":1886},"https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=NTJkNjFjNzI2OTkxZTg3NzFhZjJkNDk1OTllNDFjYjdfYzE4YzFlOWU2NzVlZDE3NjAzZmJhYWRhOGZhMDU3MGJfSUQ6NzI2MDM2NzcyMDQ2MDY0ODQ1MF8xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1175,1888,1889,1892,1895,1898],{},[1178,1890,1891],{},"首次绘制的时候，在离屏 Canvas 里面也绘制一份",[1178,1893,1894],{},"滚动的时候，不变的部分通过离屏 Canvas 绘制，新增的部分调用 Canvas API 绘制",[1178,1896,1897],{},"将两者绘制合成到主画布上，再将主画布的内容绘制回离屏 Canvas",[1178,1899,1900],{},"重复上述过程",[1100,1902,1903],{},"在 Konva 中也提供了离屏渲染的能力，主要是针对 Group 级别来做的，可以通过调用 cache 方法来开启。",[1100,1905,1906],{},[1284,1907],{"alt":1286,"src":1908},"https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=YTE3OGU4MzI5YzM3Y2MyOGUyNDIzNTgwMTQyZWE0NmFfMjQ2YTM2ODdiYmY3NmMyOWJkMmU4N2Q1N2M3ZmY0ZjlfSUQ6NzI2MDM2NzcxOTUxNzYzNDU2NF8xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1100,1910,1911],{},"这种离屏渲染的调用方式比较简单，Group 的粒度可以由开发者自己决定，但一个 Group 就是一个离屏 Canvas，占用内存比较多，也不适合频繁变化的场景。但是很适合多维表格的卡片视图（看板视图、卡片视图）。",[1100,1913,1914],{},[1284,1915],{"alt":1286,"src":1916},"https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=YTQ3MmY3YWI0YTRlNWE3YzBhOTc3MjdkZTZiYjY5ZDhfMzdlZDFhMzhhZjg2M2ZiOGFhM2MxYmVmMWU2NzFjMjFfSUQ6NzI2NTM1MTU1NzY1NzQyNzk3Ml8xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1111,1918,1920],{"id":1919},"_75-局部渲染",[1218,1921,1922],{},"7.5 局部渲染",[1100,1924,1925],{},"对于 Konva 来说，每次重新渲染都是对整个 Canvas 做清除，然后重新绘制，性能相对比较差。",[1100,1927,1928],{},"Canvas 里面提供了 clip 属性，支持对画布进行裁剪，可以限制只能访问裁剪区域。利用这个特性，可以提前计算出来需要更新的区域，只限制重绘这部分区域，从而做到局部渲染。",[1100,1930,1931],{},"Faster 和 LeaferJS 里面都实现了局部渲染的能力。",[1175,1933,1934,1937,1940,1943],{},[1178,1935,1936],{},"每当有节点更新的时候，计算变化前后的包围盒，进行包围盒合并后计算出重绘区域",[1178,1938,1939],{},"使用 clip 限制重绘区域",[1178,1941,1942],{},"判断每个节点是否和这个重绘区域相交，如果相交，那就渲染这个节点",[1178,1944,1945],{},"下图中需要重绘的节点有 circle1、rect2、circle2、rect3",[1100,1947,1948],{},[1284,1949],{"alt":1286,"src":1950},"https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=OGJiNjkxYzcwZmEzMjk5ODhhM2Y0ZjVlMTc5MzdhOTFfZjRkMzU4NjhhZGFlNTQ2OWYyOTJmNzNjNWZkMmEwZGVfSUQ6NzI2MDM2ODQ3MDE4MDA1Mjk5NV8xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1096,1952,1954,1957,1958],{"id":1953},"_8-服务端渲染",[1218,1955,1956],{},"8."," ",[1218,1959,1960],{},"服务端渲染",[1100,1962,1963],{},"主流的服务端渲染方式有两种，一种是用 node-canvas 来输出一张图片，在 Echarts 等库中都有使用，但它不是基于 Skia 的，文本排版不够准确，且对于需要自适应浏览器窗口的场景无法处理。因此它更适合一些对排版要求不高的场景。",[1122,1965,1968],{"className":1966,"code":1967,"language":189,"meta":1127},[1449],"const { createCanvas, loadImage } = require('canvas')\nconst canvas = createCanvas(200, 200)\nconst ctx = canvas.getContext('2d')\n\n\u002F\u002F Write \"Awesome!\"\nctx.font = '30px Impact'\nctx.rotate(0.1)\nctx.fillText('Awesome!', 50, 100)\n\n\u002F\u002F Draw line under text\nvar text = ctx.measureText('Awesome!')\nctx.strokeStyle = 'rgba(0,0,0,0.5)'\nctx.beginPath()\nctx.lineTo(50, 102)\nctx.lineTo(50 + text.width, 102)\nctx.stroke()\n\n\u002F\u002F Draw cat with lime helmet\nloadImage('examples\u002Fimages\u002Flime-cat.jpg').then((image) => {\n  ctx.drawImage(image, 50, 0, 70, 70)\n\n  console.log('\u003Cimg src=\"' + canvas.toDataURL() + '\" \u002F>')\n})\n",[1129,1969,1967],{"__ignoreMap":1127},[1100,1971,1972],{},"另一种就是通过 SVG 来模拟 Canvas 的效果，输出 SVG DOM 字符串。但它的实现会比较麻烦，也无法 100% 还原 Canvas 的效果。",[1100,1974,1975],{},"很多 Canvas 渲染引擎本身也支持 SVG 渲染，即使不支持，也可以通过 canvas2svg 这个库来进行转换。",[1122,1977,1980],{"className":1978,"code":1979,"language":189,"meta":1127},[1449],"var ctx = new C2S(500,500);\n\n\u002F\u002Fdraw your canvas like you would normally\nctx.fillStyle=\"red\";\nctx.fillRect(100,100,100,100);\n\n\u002F\u002Fserialize your SVG\nvar mySerializedSVG = ctx.getSerializedSvg();\n\n\u002F\u002FIf you really need to you can access the shadow inline SVG created by calling:\nvar svg = ctx.getSvg();\n",[1129,1981,1979],{"__ignoreMap":1127},[1100,1983,1984],{},"对于更加通用的场景来说，在浏览器端使用 Canvas 渲染，服务端使用 SVG 渲染是更好的形式。当然如果追求更精准，也可以走 Puppeteer 的形式，主要看业务场景。",[1100,1986,1987],{},"在新版 ECharts 里面，针对 SVG 服务端渲染的能力，还支持了 Virtual DOM 来代替 JSDOM，最后转换成 DOM 字符串。",[1100,1989,1990],{},"使用了完全不同于 node-canvas 和 SVG 的解决方式，由于他们在底层都使用了 Faster 渲染引擎，所有的绘制元素都是 Widget，可以脱水转换成下面 FVG 格式，是一种“伪”服务端渲染。",[1100,1992,1993],{},[1284,1994],{"alt":1286,"src":1995},"https:\u002F\u002Finternal-api-drive-stream.larkoffice.com\u002Fspace\u002Fapi\u002Fbox\u002Fstream\u002Fdownload\u002Fauthcode\u002F?code=ODViY2M5NzkyZDJiZTA4N2NhOTI5YzcwOTc0MmIxMjFfNzdlZjlmODI3NWY5NjFjZTM2Y2U4NzMzY2NjNzg0YTFfSUQ6NzI2MDM3NTEwNzQzOTkxOTEwOF8xNzgxMjkxNzgyOjE3ODEzNzgxODJfVjM",[1100,1997,1998],{},"首屏加载是下面这么几步：",[1100,2000,2001],{},"获取首屏数据 -> 资源加载 -> 首屏数据反序列化 -> 初始化 Model 层 -> 渲染层计算排版数据 -> Canvas 渲染",[1100,2003,2004],{},"里面直出了 FVG 数据，首屏加载了很小的用于转换 FVG 到 Widget 的 JS 文件，转换成 Widget 后就开始进行渲染。",[1100,2006,2007],{},"相当于直接省略了 Mutation 反序列化、初始化 Model、计算排版数据等阶段，将 FVG 转换成 Widget 进行 Canvas 渲染，这一步非常接近于 React 的 hydrate，很巧妙。",{"title":1127,"searchDepth":2009,"depth":2009,"links":2010},4,[2011,2012,2018,2019,2024,2027,2036,2043],{"id":1098,"depth":1195,"text":1098},{"id":1105,"depth":1195,"text":1106,"children":2013},[2014,2015,2016,2017],{"id":1113,"depth":1207,"text":1114},{"id":1139,"depth":1207,"text":1140},{"id":1146,"depth":1207,"text":1147},{"id":1156,"depth":1207,"text":1157},{"id":1166,"depth":1195,"text":1167},{"id":1216,"depth":1195,"text":1220,"children":2020},[2021,2022,2023],{"id":1223,"depth":1207,"text":1226},{"id":1296,"depth":1207,"text":1299},{"id":1355,"depth":1207,"text":1358},{"id":1394,"depth":1195,"text":1395,"children":2025},[2026],{"id":1400,"depth":1207,"text":1401},{"id":1625,"depth":1195,"text":1628,"children":2028},[2029,2030,2031,2035],{"id":1643,"depth":1207,"text":1646},{"id":1688,"depth":1207,"text":1691},{"id":1736,"depth":1207,"text":1737,"children":2032},[2033,2034],{"id":1744,"depth":2009,"text":1745},{"id":1759,"depth":2009,"text":1760},{"id":1774,"depth":1207,"text":1775},{"id":1804,"depth":1195,"text":1805,"children":2037},[2038,2039,2040,2041,2042],{"id":1811,"depth":1207,"text":1814},{"id":1829,"depth":1207,"text":1830},{"id":1865,"depth":1207,"text":1866},{"id":1875,"depth":1207,"text":1878},{"id":1919,"depth":1207,"text":1922},{"id":1953,"depth":1195,"text":2044},"8. 服务端渲染","https:\u002F\u002Fpicx.zhimg.com\u002F80\u002Fv2-029fc3ce7fddbf94c1f63091b6a89cbd_720w.webp","本文主要从本文主要从 Faster、KonvaJS、LeaferJS 三个渲染引擎来介绍 Canvas ，作为对渲染层的入门。个渲染引擎来介绍 Canvas ，作为对渲染层的入门。","md",true,{"uuid":2050,"slots":2051},"69b00720-c6a6-11f0-b614-1b2a61f63ef4",{},21,{"title":1085,"description":2046},"posts\u002F2025\u002F2025-11-21-Web可视化实践—canvas",[134,135],"FbwJn1tPqM0cZKtNUtl-v5QDi2sPNtbmSVL8C-r6yBU",1790443287772]