一行代码,把几何画板嵌入你的网页

24 阅读4分钟

前言

很多产品其实都需要 几何能力

比如:

  • 在线教育平台,需要在课程里展示几何图形

  • 题库系统,需要给数学题配图

  • AI Tutor,需要在讲题时动态画图

  • 教案 / 课件工具,需要生成数学图形

但问题是:

几何画板其实是一个非常复杂的软件系统。

如果自己开发,你很快就会发现要解决一堆问题:

  • 几何对象管理(点、线、圆、角、曲线)

  • 交点计算、约束计算

  • 图形渲染与拖拽交互

  • 多画板管理

  • 文件格式与分享系统

这些能力加起来,基本就是一个完整的产品。

很多团队最后的选择是:
要么用 静态图片,要么接入一个 现成的几何系统

最近我们做了一件事情:
把几何画板做成可以直接嵌入网页的组件。

开发者只需要一行代码,就能把一个完整的几何画板放进自己的产品里。



一个可以嵌入网页的几何画板

大角几何开放平台提供了一个 嵌入式几何画板 SDK

开发者可以像使用前端组件一样,把几何画板嵌入到自己的 Web 应用中。

核心思路其实很简单:

你的网页
   ↓
嵌入几何画板
   ↓
获得完整几何能力

这意味着:

  • 不需要自己开发几何引擎

  • 不需要自己实现几何计算

  • 不需要自己写复杂的交互逻辑

直接嵌入即可使用。

在官方能力设计里,大角几何希望成为“几何能力基础设施”:通过 SDK、API、REPL 等方式,让几何能力可以嵌入更多产品和系统。



最简单的方式:直接嵌入

如果你只是想展示一个几何图形,最简单的方法就是 iframe 嵌入

例如:

<iframe src="https://dajiaoai.com/e/33TA3484" width="800" height="600" allow="fullscreen"></iframe>

这样就可以把一个几何画板直接嵌入到网页中。

适合的场景包括:

  • 教学页面展示几何图

  • 博客文章嵌入数学图形

  • 在线教材展示动态图形

不需要额外开发工作。



开发者方式:使用 SDK

如果你希望更深度地控制画板,比如:

  • 动态加载图形

  • 切换画板

  • 导入文件

  • 调用几何操作

可以使用 SDK 接入方式

先安装 SDK:

npm install @dajiaoai/algeo-sdk

然后在页面中创建画板:

import { AlgeoSdk } from '@dajiaoai/algeo-sdk'

const container = document.getElementById('algeo-container')

const sdk = await AlgeoSdk.create(container, {
  initialId: '33TA3484'
})

这样就创建了一个几何画板实例。

之后可以通过 API 操作它,例如:

加载分享内容:

await sdk.loadShareById('33TA3484')

获取画板数量:

const { count } = await sdk.getSlideCount()

切换画板:

await sdk.switchSlide(2)

开发者可以把几何画板当成一个 可编程组件 来使用。



一个很有意思的能力:REPL

除了普通 API,大角几何还提供了 REPL 接口

简单理解就是用命令直接控制几何系统。

例如:

  • 定义几何对象

  • 查询图形状态

  • 执行几何操作

REPL 的输出是结构化文本格式,方便 AI 或 Agent 系统调用。

这意味着未来不仅是人类可以操作画板,AI 也可以直接调用几何能力。

这也是为什么我们把它叫做:AI 原生的几何能力接口。



适合哪些产品?

嵌入式几何画板其实适合很多产品。

在线教育平台

在课程页面中直接嵌入几何图形,支持拖拽与动态演示。

image.png

题库系统

为数学题自动生成或加载几何图形。

image.png

AI Tutor

在讲解几何题时动态画图。

image.png

数学内容平台

文章中直接嵌入几何图形。

image.png

独立开发者工具

快速做一个数学工具,而不需要自己开发几何引擎。

image.png



为什么我们做这个开放平台

在过去一年里,我做几何系统时有一个很深的体会:几何能力其实是很多产品的基础能力。

但目前市面上的解决方案并不多,要么是完整软件(例如 GeoGebra),要么是简单图形库。

缺少一种方式让几何能力像 API 一样被调用。

所以大角几何开放平台希望做的事情是让更多产品可以直接使用几何能力,而不需要重新发明轮子。


👉 大角几何开放平台: open.dajiaoai.com