图形学【免费下载链接】skiaSkia is a complete 2D graphic library for drawing Text, Geometries, and Images. See documentation for contribution instructions.项目地址https://gitcode.com/gh_mirrors/ski/skia点击查看免费下载导读本文围绕 Skia 仓库中demos.skia.org目录的 README.md完整讲解如何在本机编译 CanvasKitSkia 的 WebAssembly 版本并通过本地 Web 服务器运行仓库自带的各类 Web 2D 演示页面。读完本文你将掌握从构建 CanvasKit到将 demo 从 CDN 切换为本地构建再到浏览器验证的完整调试链路适合希望深入 CanvasKit 源码、修改 API 行为或开发新 demo 的开发者。一、demos.skia.orgSkia 的 Web 演示集demos.skia.org是 Skia 仓库中专门存放 Web 演示页面demo的目录其配套文档只有一份精炼的 README.md核心思路非常清晰先用本地源码构建一份 CanvasKitWASM 产物在该目录启动一个本地静态 Web 服务器修改 demo 页面让它们从本地服务器加载构建产物而不是默认的公共 CDN。从目录结构看demos.skia.org/demos/下共包含 13 个演示子目录hello_world、canvas_edit、image_decode_web_worker、image_sampling、mesh2d、path_performance、sampling_types、spreadsheet、textedit、textures、up_scaling、web_worker、webgpu。从目录名可以推断这些 demo 覆盖了 CanvasKit 的典型能力基础绘制、图像采样与解码、Web Worker 并行处理、文本编辑、网格mesh、纹理、路径性能以及 WebGPU 渲染等可以作为本地调试和 API 学习的第一手素材。二、前置条件编译本地 CanvasKitREADME 的第一步要求进入 CanvasKit 源码目录并完成一次构建cd modules/canvaskit make debug # 或 make release 等其它目标modules/canvaskit目录下的 Makefile 提供了丰富的构建目标几个常用目标如下目标对应编译参数适用场景make debug./compile.sh debug_build日常调试编译更快、错误信息更友好make release./compile.sh release发布级构建体积更小、性能更好make release_cpu./compile.sh cpu_only关闭 GPU 后端仅保留 CPU 渲染make debug_webgpu./compile.sh debug_build use_webgpu使用 WebGPU 后端的调试构建make profile./compile.sh profiling性能剖析专用构建make with_debugger./compile.sh debug_build enable_debugger为 Skia Debugger 集成调试版以debug目标为例它内部依次执行调用 compile.sh 以debug_build参数生成 GN 构建配置并编译创建build/目录把产物canvaskit.js和canvaskit.wasm复制到build/下。从 compile.sh 源码可以看到构建本质上是./bin/gn genninja的流程脚本会根据传入的参数开关决定大量 GN 参数例如is_debug、skia_enable_ganesh、skia_enable_graphite、skia_use_webgl、skia_use_webgpu、skia_enable_skottie、skia_canvaskit_enable_font等。这也是为什么make debug比make release更快——debug 构建关闭了优化、保留更友好的报错信息参见 modules/canvaskit/README.md 中 make debug is much faster and has better error messages 的说明。需要说明的适用前提按 modules/canvaskit/README.md 的要求编译 CanvasKit 需要先下载并激活 Emscripten 工具链仓库通过bin/activate-emsdk完成并已按 Skia 官方方式同步好依赖测试相关命令还要求 Node.js v14 及以上。三、启动本地 Web 服务器make localCanvasKit 构建完成后回到demos.skia.org目录运行cd demos.skia.org make localdemos.skia.org/Makefile 中local目标完整做了三件事local: echo Go check out http://localhost:8123/demos/hello_world/index.html rm -f build ln -s ../modules/canvaskit/build build python3 -m http.server 8123在demos.skia.org下创建一个名为build的符号链接指向../modules/canvaskit/build从而让 web 服务器可以直接以/build/...路径访问到刚刚编译好的 CanvasKit 产物canvaskit.js与canvaskit.wasm用 Python 自带的http.server在8123端口启动静态文件服务终端会提示访问入口http://localhost:8123/demos/hello_world/index.html。因此运行成功后在浏览器打开上述地址即可看到 CanvasKit 的 Hello World 演示。该目录下所有 demo 均可通过http://localhost:8123/demos/demo名/index.html访问例如webgpudemo 对应http://localhost:8123/demos/webgpu/index.html。四、让 demo 从本地加载而非 CDNREADME 特别强调你需要修改 demo让它从本地 Web 服务器加载构建产物而不是公共 CDN。这一步是整个调试流程的关键因为 demo 默认会通过unpkg.com/canvaskit-wasm加载发布到 npm 上的稳定版 CanvasKit而非你本地刚刚编译的版本。以 demos.skia.org/demos/hello_world/index.html 为范本可以看到两种加载方式的切换写法!-- 默认方式从 CDN 加载本地调试时注释掉 -- !-- script typetext/javascript srchttps://unpkg.com/canvaskit-wasm0.25.0/bin/full/canvaskit.js/script -- !-- 本地方式从本地服务器加载 -- script typetext/javascript src/build/canvaskit.js/script对应的 JS 初始化部分同样有两套 base 路径// 从 CDN 加载时 // const base https://unpkg.com/canvaskit-wasm0.25.0/bin/full/; // 本地调试时 const base /build/; const ckLoaded CanvasKitInit({ locateFile: (file) base file });CanvasKitInit的locateFile回调用于告诉 WASM 运行时到哪里寻找.wasm文件当页面脚本来自/build/canvaskit.js时locateFile把请求的文件如canvaskit.wasm拼成/build/canvaskit.wasm正好命中make local创建的符号链接。这个模式是demos.skia.org下所有 demo 切换本地构建的通用套路把script src与base变量都改为指向/build/即可。加载成功后ckLoaded.then((CanvasKit) ...)回调里即可使用 CanvasKit API 创建画布表面const surface CanvasKit.MakeCanvasSurface(draw); const paint new CanvasKit.Paint(); paint.setColor(CanvasKit.RED); const textFont new CanvasKit.Font(CanvasKit.Typeface.GetDefault(), 20); function drawFrame(canvas) { canvas.drawRect(CanvasKit.LTRBRect(10, 10, 50, 50), paint); canvas.drawText(If you see this, CanvasKit loaded!!, 5, 100, textPaint, textFont); } surface.requestAnimationFrame(drawFrame);页面中那行 If you see this, CanvasKit loaded!! 文本本身就是对本地构建是否成功加载的最直观验证看到它说明本地 CanvasKit 已在浏览器中正常运行。五、验证与常见问题1. 如何确认加载的是本地构建而不是 CDN 版本修改modules/canvaskit下的源码后重新执行make debug再刷新 demo 页面若行为随之变化即可确认链路已切换到本地构建也可以借助浏览器开发者工具的 Network 面板查看canvaskit.js的请求来源是否为localhost:8123。2. 为什么需要先构建 CanvasKit 再启动make local因为make local只是创建指向modules/canvaskit/build/的符号链接并启动服务器它本身不触发编译。若尚未构建/build/canvaskit.js将 404页面会因无法执行CanvasKitInit而报错。顺序必须是先make debug产出 build 目录再make local启动服务。3. 构建版本选 debug 还是 release日常修改与调试建议make debug编译快、错误信息完整验证体积、性能或发布行为时再切换到make release等目标两者的产物都会输出到modules/canvaskit/build/无需改动 demo 页面的加载方式。4. 端口与访问入口服务器固定监听8123端口见 demos.skia.org/Makefile 中的python3 -m http.server 8123默认演示入口为http://localhost:8123/demos/hello_world/index.html。总结demos.skia.org为 Skia 的 Web 端能力提供了一个开箱即用的本地调试环境通过 modules/canvaskit/Makefile 的make debug编译出本地 CanvasKit再经 demos.skia.org/Makefile 的make local在 8123 端口拉起静态服务最后按 demos.skia.org/demos/hello_world/index.html 的模式把 demo 的脚本与base路径切换到/build/即可在浏览器中直接体验和调试基于本地源码的 CanvasKit 行为——这也是深入阅读 Skia 源码、二次开发 CanvasKit 功能时最实用的起步流程。赞分享图形学【免费下载链接】skiaSkia is a complete 2D graphic library for drawing Text, Geometries, and Images. See documentation for contribution instructions.项目地址https://gitcode.com/gh_mirrors/ski/skia点击查看免费下载相关推荐在 Fleet 中运行本地构建的 fleetd基于本地 TUF 仓库的 macOS 开发调试完整指南在 Fleet 中运行本地构建的 fleetd基于本地 TUF 仓库的 macOS 开发调试完整指南 本文面向 Fleet 开源项目的 macOS 贡献者完后端前端企业应用运维网络安全使用 ADK A2UI v0.9 构建 Gemini Enterprise 演示 Agent从本地运行到 Cloud Run 部署全指南使用 ADK A2UI v0.9 构建 Gemini Enterprise 演示 Agent从本地运行到 Cloud Run 部署全指南 本指南基于仓库中人工智能AI AgentAI 应用前端UI组件使用本地构建的 apphost 与 .NET 根目录进行运行时开发调试使用本地构建的 apphost 与 .NET 根目录进行运行时开发调试 导读 在 .NET 运行时仓库dotnet/runtime中开发、调试宿主host语言运行时标准库JIT编译编译器创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考