canvas

用pixi.js实现fabric.js(六)：从线性代数的角度理解编辑器交互在上一章中，我们已经实现了部分Canvas类的功能，但是仅仅是实现了事件系统相关的功能，还有很多交互功能，我们并没有实现，在实现这些交互功能之前，我们需要了解一些前置知识，以帮助理解如何实现这些交互功能。本文的目的，就是让大家来了解这些前置知识。

我做了一面互联网摸鱼墙：从无限 Canvas 到本地生产环境最近，我做了一个叫「摸鱼表格」的小项目。它看起来像表格，却没有表头、公式、筛选和工作任务。这里有的，只是一面可以无限拖动、缩放和探索的公共格子墙。

OpenClaw Canvas A2UI：AI驱动的交互式界面开发实战摘要：OpenClaw Canvas A2UI（AI-to-UI）是一种让AI智能体动态生成、推送和更新用户界面的创新机制。通过 a2ui_push 和 a2ui_reset 两个核心操作，AI可以在运行时将JSONL格式的界面描述推送到Canvas画布，实现表单、按钮、选择器、图表等交互组件的实时渲染。本文从A2UI概念出发，深入解析 a2ui_push 的JSONL数据格式与推送机制，剖析交互组件的事件处理模型，并通过交互式配置面板、实时数据监控仪表盘、AI驱动动态表单三个实战案例，展示A2UI在实际

OpenClaw Canvas 截图：页面捕获与保存本文详细介绍 OpenClaw Canvas 的截图功能。从基本截图、全页面捕获、元素截图到图像处理，全面解析如何通过 Canvas 实现灵活的页面捕获。通过实际案例演示报告生成、内容存档、错误记录等场景，帮助开发者掌握 Canvas 截图的实际应用。📸

如何使用Compose 绘制提升性能 —— 新手指南为界面绘制精细的装饰或自定义背景时，传统的Box嵌套往往会增加不必要的布局节点和性能开销。而利用Modifier.drawBehind、drawWithContent和drawWithCache，我们可以直接在DrawScope提供的画布上实现高性能、像素级精准的命令式绘制。

OpenClaw Canvas 执行：JavaScript 注入实战本文深入探讨 OpenClaw Canvas 的 JavaScript 执行功能。从基本执行、数据获取、DOM操作到高级应用，全面解析如何通过 eval 注入 JavaScript 实现灵活的界面控制。通过实际案例演示数据提取、动态更新、事件处理等场景，帮助开发者掌握 Canvas 的高级控制能力。⚡

用pixi.js实现fabric.js(五)：事件系统事件系统是一个渲染引擎最重要的功能之一，如果没有事件系统，这个渲染引擎将不可用。上一章里，我们已经实现了静态画布，用来绘制需要展示的元素，接下来我们将给这些元素绑定上事件，让这些元素可交互。

OpenClaw Canvas 导航：URL 加载与控制本文深入探讨 OpenClaw Canvas 的导航功能。从 URL 加载、页面控制、导航历史到高级导航技巧，全面解析如何通过 Canvas 实现灵活的页面导航。通过实际案例演示文档嵌入、工具集成、多页面切换等场景，帮助开发者构建具有导航能力的可视化应用。🧭

名字都不重要何况昵称

canvas 分层渲染思路和脏矩形处理大量静态背景 + 少量动态元素** 比如地图、数据可视化大屏、战棋游戏地图。静态地形、网格、标注画在底层，只需画一次；人物、光标、高亮效果在顶层单独刷新。这样可以大幅提升性能，尤其是静态层很复杂时。

只要微微辣

Uniapp 微信小程序 Canvas画框标注：拖拽缩放全攻略在很多业务场景中（比如 AI 视觉识别、隐患排查、票据信息提取等），我们需要在前端实现一个图片画框标注功能。用户拍完照或上传图片后，可以在图片上框选出特定的区域，并将该区域的坐标发送给后端进行处理。

用pixi.js实现fabric.js(四)：StaticCanvasStaticCanvas是fabric提供的静态画布，仅用来绘制内容，而无法与元素进行交互，未来要实现的Canvas(可交互画布)基于这个类，本文将解析如何用pixi实现这个类。

狼丶宇先森

vue-sign-canvas v2 重构复盘：从 Vue 2 签名板到 Vue 3 + TypeScript 组件库vue-sign-canvas 最初是一个面向 Vue 2 的手写签名板组件，核心目标很直接：让用户可以在 PC 或移动端完成签名，并导出 base64 图片。随着使用场景变多，旧版本逐渐暴露出一些维护和能力边界上的问题，例如移动端触点偏移、空签名校验不够明确、回显后继续编辑不稳定、导出格式处理不完整，以及组件内部逻辑越来越难维护。

OpenClaw Canvas：可视化界面入门本文介绍 OpenClaw 框架中的 Canvas 可视化界面功能。从 Canvas 基本概念、核心操作、界面展示到实际应用，全面解析如何通过 AI Agent 创建和管理可视化界面。通过实际案例演示网页嵌入、自定义界面、交互式应用等场景，帮助开发者构建具有可视化能力的智能应用。🎨

名字都不重要何况昵称

canvas 元素拾取在 2D 画布应用中，需要判断用户点击/悬停的是哪一个可交互元素。常见解决方案包括：关于 colorPick 可以参考我的另外一篇文章 colorPick

名字都不重要何况昵称

Color Pick 2D（多 Canvas 像素拾取）在 2D 画布应用中，需要判断用户点击/悬停的是哪一个可交互元素。常见解决方案包括：页面使用三个 Canvas，职责分离：

工艺图图在线编辑器在能源管理系统中，工艺流程图是展示热力站、换热站等设施运行状态的重要载体。传统的做法是用 Visio 或 CAD 绘制静态图片，但这样无法实时展示设备运行数据。

弃用 Canvas！高性能2D WebGL 引擎性能提升几十倍！原生Canvas开发矢量图形，存在代码冗余、无法二次编辑、无层级管理、交互难写等痛点。本文极简讲解前端矢量神器 Paper.js**，帮你用最少代码搞定绘图、可视化、画布动效需求。

用pixijs实现fabricjs(三)：对象继承链和自定义对象上一章，我们完成了fabric对象的继承链上的ObjectGeometry类，这个类包含了对象的基础信息，包括位置信息(left、top)、缩放信息(scale)、旋转信息(angle)等，但是这个类只是这条长长的继承链上的其中一环，fabric将对象的其他功能分散到了这条继承链上的其他类上，所以在这一章里，我们将继续完成这条继承链，并讲述fabric的内置对象是如何实现的。

用pixijs实现fabricjs(二)：对象的基础位置信息每种渲染引擎，都会封装某种代表对象的class，这个对象代表画布上的一个基本元素，它可以是一个矩形、圆、图片，可以是一堆对象的嵌套(group)，总之，我们会将需要绘制的内容，转换为渲染引擎提供的对象类的实例，然后渲染引擎就会把这些对象全部绘制出来，得到我们想要的结果。

努力干饭中

Vibe Coding 第二弹：做一个 Canvas K线图有了第一次的vibe coding 实践Vibe Coding 初体验：从对话模型到 RAG，不得不承认，现在的AI编程能力确实已经非常强大了。对比一年前，AI写出来的代码，还是会有报错，需要手动去修bug等情况，但现在已经几乎不需要人为干预了。