产品嵌入画板怎么选？iframe、开源组件还是几何 SDK？

在题目解析页里，学生拖动圆上的点，观察角度关系；在教师后台，老师给同一张图补辅助线、改标签，再保存到题库。到了教研 Agent 的工作区，这张图还可能由 AI 生成，随后交给老师继续调整。

这三个页面都需要画板，接入深度却不同。选型前，先确定用户需要完成什么操作，以及操作结果要保存到哪里。

同一张几何图在解析、编辑和 Agent 工作区中的使用场景（AI 生成示意）。

如果只需要展示一份已经制作好的交互内容，可以从直接嵌入开始；如果页面要控制加载、编辑、保存和导出，就需要程序接口；如果团队要长期维护自己的几何引擎和编辑体验，则要进一步评估开源组件与自建投入。

先把选型问题拆开

iframe 是网页嵌入机制，开源组件和几何 SDK 是实现与交付方式。它们可以组合使用。例如，大角几何 SDK就通过内嵌页和 postMessage 与宿主网页通信，也提供不引入 SDK、直接使用 iframe 的演示入口。

因此，评估时应分别回答两个问题：画板运行在哪里，以及业务系统能通过什么接口控制它。

只看到画板“嵌进去了”，还不足以判断它能否接入题库。教师改完标签后，宿主系统能不能取得完整工程？学生进入解析页时，加载的是哪一个审核版本？导出的图片能不能对应当前内容？这些操作决定了接入方案是否适用。

只展示已有内容 可以先使用直接嵌入

假设已经制作好一份圆周角演示，解析页只需要让学生打开并观察。大角几何提供的直接 iframe 方式可以作为起点：

<iframe
  title="圆周角交互演示"
  src="https://dajiaoai.com/embed/present/YOUR_APP_ID/YOUR_SHARE_ID"
  style="width: 100%; height: 480px; border: 0"
  allow="fullscreen"
  referrerpolicy="origin"
></iframe>

将两个占位值换成自己的应用 ID 和真实分享 ID，再按平台要求配置应用。这里的 src 是嵌入资源地址，不是读者跳转入口。

这种方式适合先验证交互内容在页面里的价值。页面负责容器和布局，内嵌内容负责几何交互。需要宿主切换指定画板、读取内容或控制导出时，再评估 SDK 提供的对应接口。

如果接入方自行封装跨窗口通信，应校验消息来源和目标窗口，并处理初始化、超时和销毁。接入成熟 SDK 的价值之一，是复用已有通信协议和生命周期处理。

要编辑和保存 应围绕完整工程选择接口

教师后台的要求更具体：加载题目对应的工程，编辑几何对象，将修改保存到自己的业务记录，之后能够重新打开。

使用大角几何 SDK 时，可以采用编辑模式。以下代码假设已有一个具备固定高度的 geometry-editor 容器，业务后端返回完整工程：

import { createEditor } from '@dajiaoai/algeo-sdk';

const response = await fetch('/api/geometry-docs/10086');
if (!response.ok) throw new Error('工程读取失败');
const document = await response.json();

const editor = await createEditor(
  window.document.getElementById('geometry-editor'),
  {
    auth: { appId: 'YOUR_APP_ID' },
    initialContent: document.content,
    ui: { navbar: false, toolboxPanel: true, aiChatPanel: false },
  },
);

async function saveGeometry() {
  const content = await editor.document.getContent();
  const saved = await fetch('/api/geometry-docs/10086', {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ content }),
  });
  if (!saved.ok) throw new Error('保存失败，请保留当前页面并重试');
}

/api/geometry-docs/10086 是接入方自己实现的业务接口。示例用宿主页面的保存按钮调用 saveGeometry()；后端还需要落实用户权限、存储和版本冲突处理。

关键在于保存完整的可编辑内容。PNG 可以用于预览，工程用于后续修订。只存一张截图，会让下一次改标签重新变成人工描图。

初始化、事件和清理方法可查阅编辑模式文档。页面卸载时应销毁实例，避免遗留消息监听和未完成请求。

选择开源组件 要把长期维护纳入评估

开源方案适合需要深度控制、具备持续研发能力的团队。评估时应拿真实题目测试构造依赖、拖动约束、标签排版、工程读写、导出和移动端表现，而不只看能否画出点线圆。

举例说，圆上的动点应该始终留在圆上，垂足应该随原图变化，重新加载工程后对象关系也应保留。若这些能力需要由团队补齐，它们就属于实际开发范围。

同时核对代码许可证、部署方式、商用条件和第三方资源要求。某个接入层代码公开，并不能单独说明其依赖的在线服务、几何引擎或商业授权范围。大角几何的接入条件可分别查看免费使用说明与商业许可说明。

用同一份业务清单比较方案

业务要求	应验证的内容
解析页展示	能否加载指定版本，是否保留题目需要的拖动关系
教师编辑	能否调整构造、点名、标签与样式
保存与重开	能否读取完整工程，关闭后重新加载相同内容
课件与讲义出图	能否按目标尺寸、范围和清晰度导出
AI 生成后修改	生成结果能否进入编辑器，修改后能否交回业务系统
长期维护	版本升级、兼容性、服务部署与支持由谁负责

对教研 Agent 产品，可以先验证“题目生成工程—画板继续修改—保存—导出图片”。对题库解析页，则优先验证交互是否帮助观察，以及内容加载失败时是否有静态图可用。

两类产品可能最终使用同一套底层能力，但不必在第一阶段开放相同的界面和操作。

用一道真实题目完成接入验证

从自己的题库选一道有代表性的题，准备展示页和编辑页。展示页验证交互，编辑页修改一个标签并保存，关闭后重新打开，再把图导入实际使用的讲义版面。

这轮验证能直接暴露容器适配、工程保存、标签裁切和输出清晰度问题，也能让团队看清还需要补多少业务工作。

可以先在SDK 示例中心体验演示与编辑，再按自己的保存流程接入。最终选择应能支持用户完成实际任务，并让生成的几何内容留在产品里继续使用。